Top add

Best Practices for Speeding-Up Mobile Web

Provide an obvious link to the mobile version from the desktop version. 

Users really don’t want to be browsing a media-rich 800-pixel-plus wide site on mobile screens 
without even realizing there's a version toiled over just for mobile. Make sure web site users 
are completely aware that a mobile counterpart exists. 

Use a conventional mobile URL. 

No accepted standard exists for providing an address to a mobile version of a desktop service, 
but there are some recognized conventions. For example:, or Choose a simple mobile URL and publish it on 
your desktop site. 

Make the user interface work for mobile devices. 

Avoid requiring users to do a lot of typing. Provide large, actionable, clickable UI features. 
Provide URLs that are short and easy to type. Use easily actionable UI widgets and features
that compose well together in a small format. Web designers should think about the scenario 
the mobile user is in when they're looking at the website: probably not sitting comfortable at a 
desk, so information must be able to be found fast. Make sure your content is clearly labeled 
and succinct.

Website should be compatible for a range of mobile browsers. 

Full-featured (Mobile Safari, Android, etc.), half-featured (BlackBerry), and small-featured 
(older-style flip phones) browsers all exist in the mobile space. How the mobile web page will 
look on screen sizes all the way from150x128 to 640x480 shall be considered. Mobile browser 
standards can also differ by country and so, if the website has an international audience, make 
sure the design is flexible enough to meet the devices available in those countries.

Minimize number of requests and data transferred 

To avoid a dramatic increase in latency, it is a good idea to reduce the number of times the 
website or application must make a round-trip request to its server. Single large objects load 
faster than many small ones due to TCP and socket behavior. While these are general best 
practices, they especially apply to mobile. 

Sprite your images using CSS or transfer your images using a data URI scheme. Some of web 
services, consolidate static requests by using the data URI scheme, which is a way of including 
static data items in-line on a web page. The data URI technique will not work on older 
browsers and should be used for pages and applications specifically designed for iPhone, 
Android, or other modern mobile web browsers. 

Including an image by its base64 string may cause a loss in some compression provided by 
image formats (data transferred this way must rely solely on gzip for compression). But, it’s 
better to avoid opening a new connection/HTTP request, which is often a more important 
savings factor for mobile. 

Instead of having a CSS file that imports several others, or a JavaScript file that loads other bits 
of code, all of the page's dependencies shall be consolidated into a single file. Reducing the 
page down to a single file (and thus a single request) will yield an increase in speed. 

Minify your code. 

The less code, the smaller the amount of data transferred, the faster the web page will load. 
While the size of data transferred is often not as important as minimizing round trips, every bit 
helps on high-latency mobile connections. 

Eliminate redirects. 

Sometimes web pages and web services will redirect a single request several times. If the 
service requires redirects, it’s preferable to do the redirection on the server-side rather than 
client side, in order to reduce client-side round trip requests. 

Load contents lazily. 

Transfer data when needed and preload where appropriate. Don't load images that will never 
be seen by the end user. Time-to-text on mobile is important. For example: A mobile 
application that displays a gallery of images, should download the previous and next image to 
increase UI speed, but must not load images that are far "out of reach." 

Take advantage of new features in HTML 

Use an application cache for local content storage. 

HTML5 browsers (Mobile Safari, Android) can use an application cache to both reduce page 
startup time and to enable offline features. 

Use CSS3 instead of images 

HTML5 browsers that support CSS3 (again, Mobile Safari, Android) can use attributes for 
rounded corners, gradients, shadows, text transformations, canvas, and more. Using CSS to 
design your page instead of images can reduce data transfer. 

Keep it simple. 

If the web page or application has to be reached by as many users as possible, its compatibility 
with varying degrees of support by mobile devices must be insured. Not only is minimalist 
code faster, but in general, the less complex the code, the more compatible it will be. 

Some warnings: 

    • Flash is currently not supported even by iPhone or Android browsers. Don't use it for 
         mobile websites. 

    • Many BlackBerry’s do not have CSS and JavaScript enabled by default. Most users will 
         not dig through menus to enable them. 

    • JavaScript on devices with slow processors can be expensive to execute. Besides 
         implementing network-based optimizations, it's important to make sure the client- 
         side code is lean, mean, and uses minimal memory too. 

Test as much as you can 

Cross-browser testing is just as important for mobile devices as it is for desktop applications. 

In order to better format content for mobile device screens, mobile browsers may resize text 
and images and interpret CSS differently from desktop web browsers. Verify usability after the 
mobile browser has "had its way" with your page. 

Reading a mobile web page or using a mobile application can feel very different once you try 
it in your hand. It should not be assumed that interaction on the PC is equivalent to interaction 
on a mobile device. 

Testing resources: 

    • Android Emulator 

    • BlackBerry Device Simulators 

    • iPhone Simulators 

    • iPhone Device 

    • iPod Touch Device 

    • Opera Mini Simulator 

No comments: