Mobile Website Performance – Best Practices


Mobile Browsing v/s Desktop Browsing May 2011

As you could see the mobile browsing increasing day by day. So what are the best practices needed to build a scalable web application that can be browse-able on mobile.? Though the best practice similar to desktop based browsing one important thing we need to keep in mind is mobile networks have high latency than the wired broadband connections. It is also running on low processor and limited screen size.

So by and large the performance of your website depends up on three major factors.

  • Mobile Networks
  • Mobile Software
  • Mobile Hardware

We can see what are the best practices we could follow to get best out of it.

Mobile Networks

As we discussed mobile network latency is the biggest area of concern. The broadband connection on an average have 20 ms latency where the mobile network have latency ranging from 250ms to 400 ms seconds, which is more than 15 times high. Certain things not in our hand, though mobile networks are working on to reduce the latency time. Since the latency time is high we need to follow the best practice to make it as much as possible.

1. Reduce the number of request:
Reduce number of request by reduce number of objects required by the website to load. As each HTTP request to load your image, css, html and scripts file are called independent, each will consume its own latency time to load. By reduce the number of request we can reduce the latency time.
2. Eliminate Single Point of Request:
It means each and every request should be independent of each others. one should not wait for the other object to get loaded. The best way is to do like

  • Use Asynchronous methods to load JavaScript / CSS files
  • Avoid iframes
  • Avoid using Fonts.

Facebook leads the way with Async loading. Here is the sample code of it.

(function () {
    var e = document.createElement('script');
    e.src = 'http://connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());

3. Maintain the heart beat:

Maintain the heart beat is nothing but simple old polling technique to keep the connection alive. Typically a mobile connection alive for 2-3 seconds. So sending a dummy AJAX request for every 2 to 3 seconds will keep the connection alive. That will reduce the latency time for subsequent requests. Though one could argue it is an evil implementation as it will kill the battery life heavily one should be very careful before implementing this.

Mobile Software
Once your content delivered via your mobile network, now the mobile software taken care of rendering. Software here means your mobile OS as well as the browsers ranging from IOS to Android, from Safari to opera. The traditional browsers have two behavior,
1. It will cache the js/css files.
2. It will not allow only one or two parallel request from a domain at a time.
The mobile web browsers are no difference. However the cache size is a big problem with mobile. So the best practices are like,
1.Caching : Use HTML5 local storage :

The default cache size of the web browser on mobile platform is typically 5MB which is pretty low. Other big concern is that restarting the mobile will make the cache empty. So it is always good to use HTML5 local storage which offers 25MB of cache. The important think is it won’t flush the cache when you restart your mobile. The simple way to do the caching using HTML5 local storage is,

<script data-cacheable="1">

and your script will look like,

foreach resource {
    localStorage.setItem(resource.id, resource.contents);
    cachedResources.push(resource.id);
}
cookie['cachedResources'] = cachedResources.join('|');

2. HttpPipelining :
HTTP pipelining is a technique in which multiple HTTP requests are sent on a single TCP connection without waiting for the corresponding responses. The pipelining of requests results in a dramatic improvement in the loading times of HTML pages, especially over high latency connections such as satellite Internet connections.
All the major mobile browsers like opera and firefox supporting it and recently IOS5 also added the support for it.
The major concern with HTTP pipelining is that suppose you have requested 3 resources at once and two got response fast but the third one is too large and taking lot of time, will result the other resources also not getting loaded. So it is always important to use DNS sharding and group the resources based on the size and loading time.

3. DNS Sharding:

To enable parallel downloading we can make different subdomains and serve resource from different domain. But one should careful on two things,
a) creating many DNS will increase the DNS lookup time
b) The resource serving should be consistent (i.e) if a script getting loaded from scripts.domain.com, on all subsequent request, it should load from the same sub domain. If it is not it will affect the caching we discussed above.

Mobile Hardware
Mobile equipment usually have low CPU power compare to your desktop. So we should be careful not to do too many computations on the client side. “Slow CPU, Slow JavaScript”. We should avoid dynamic graphics using CSS and excess computation of javascript. If the application demands it,make it such a way that it loads the javascript at the end of page after we loaded a basic version of the page.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s