In one of our previous posts entitled 6 Tips and 15 Free Tools to Make an Awesome Mobile Website, we discussed various factors that contribute to creating a mobile-friendly website, as well as tools that help you do so. One of the factors that is a crucial consideration when it comes to retaining mobile customers is your mobile site’s page load time. Today we will discuss how to optimize this.
Desktop sites are at an advantage over mobile versions of these sites in regards to page load time. Mobile sites have some extra factors affecting their loading time, which are as follows:
- Slower network connections.
- Smaller browser cache memory.
- Slower parsing of HTML.
Google came up with a mobile page speed online testing tool in the beginning of 2012. This is known as Chrome for Android, and it works in the same way the Google Page Speed Test tool does, where you get a speed score for your website and suggestions on how to further improve your load time.
The following are some best practices to ensure your mobile site loads faster on mobile browsers:
1. Optimize Caching
Mobile caches, unlike desktop browser caching, cannot hold a large amount of content. Hence, mobile browser caching affects the page loading speed of mobile sites. This problem has now mostly been taken care of due to the HTML5 Web Storage Application being applied to most popular mobile browsers. The Chrome cache, for example, is dynamic, which means that its cache size depends on the amount of disk space available. Some mobile browsers use local memory to cache resources, thus avoiding unnecessary server requests.
2. Embed Resources in HTML
If your mobile site is not cached on mobile browsers, then storing your site’s resources externally and linking to them is not necessary. Instead you can embed them in your site’s HTML. However, this may lead to an increase in page size, which negates the optimization of your site speed. To avoid this, you need to use a web application that allows you to embed resources in the HTML while also allowing you to track when mobile site caching does not occur, to embed resources only when necessary. Mobile Optimizer is one such application.
4. Optimize Redirects or Remove them
Redirects generally require extra client-side processing. When a desktop site is redirected to a mobile site, this processing increases the loading speed of the mobile site. In some cases, when the mobile site is served at a different location than the main site, this redirect may be necessary. In such instances it is advisable to make the mobile site cacheable, in order to increase the loading speed of the site. However, if the mobile site is served in the same location as the main site, it is best to avoid redirects and serve the mobile site to the user directly. Display a link to the main site on your mobile version for users who would prefer to browse the main site.
5. Minify Scripts and Style Sheets
Compressing files is another method of reducing page load times but some mobile browsers fail to cache compressed files.
6. Use CSS3 and HTML5
The lightweight features of CSS3 and the new structural elements of HTML5 make it easier for mobile web pages to load faster. Here is a table of mobile browsers that support various HTML5 features. CSS3 has features such as text/box shadow, rounded corners and animations.
The following is a list of sites that provide documentation and downloading for the CSS3 and HTML5 framework:
7. Minimize Image Size
It is not generally advisable to have images on your mobile website due to the restricted screen space. A simple image-free layout is preferred. However, if you do have images, they must be resized for faster page loading times. High resolution images take up more bandwidth space, processing time and mobile browser cache space.
Here are some online tools to optimize your site’s images:
8. Replace Click Events with Touch Events
On most devices there is a considerable delay after users click on mobile site buttons. A touchend event must be sent when the user lifts their finger off the surface of the screen to help overcome this delay. Click here to understand more about touch events.
9. Use AJAX
Using AJAX allows data to be fetched from a web server without having to refresh the page where the code is running. It allows the display of updated data on part of a page without having to reconstruct the entire page. While AJAX is recommended for desktop sites, it is even more essential for mobile sites, which are at a disadvantage due to network latency, constrained processor speed, and smaller memory and cache sizes. AJAX allows your mobile web application to load quickly and fill in updated content progressively while the the viewer is on the page.
Adopting these tactics will help you optimize your mobile site speed considerably. Let us know about any other problems you face concerning mobile site loading speed in our comments section below.