Mobile Speed Optimization Tips for Cache, HTTP requests and more

Using responsive web design to adjust websites to mobile devices is a popular topic in latest years, but mobile navigation is not only about pretty layouts. Sometimes the site may be too resource-intensive, and that does not create an acceptable user experience, because speed comes into play and mobile speed optimization is crucial. So how can we speed up websites for mobile?

Here is a list of guidelines for mobile speed optimization:

1. Mobile-first approach

Mobile version of a site should have priority, that is coding for mobile-first.
When coding a site for desktop and then progressively enhancing it for mobile some extra resources are loaded, think about images always hidden with display: none;. These elements should be background-images and declared as such only above desktop breakpoints, thus preventing mobile devices from loading them at all.

2. Minimize files

Development versions of files contain a lot of characters like spaces, comment and line breaks unuseful for the machine, cutting out these characters will reduce the size of files. You can expect a 20-30% saving on average, and this can help a lot for large files. Just in case, web development versions may be kept on live sites for further changes.

Various tools are available for this task, among them are:
http://csscompressor.com/, http://jscompress.com/, https://htmlcompressor.com/compressor/ .

All you have to do is paste in the code.

3. Reduce the size of the images

Images take more than 50% of an average webpage playload. Their sizes should be reduced as much as possible, but also you need to think about the image quality. In order to accomplish these two goals, optimal formats should be considered:

• Line art – SVG
• Pictures with low few colors – GIF, PNG-8
• Photos – JPEG, PNG-24
• High complexity pictures with transparency – PNG-24

But it’s not enough to use the right format, images need to be passed through a compression tool. After compression, a 10-40 % decrease in file size can be seen, without any noticeable sacrifice to image quality.
A good compression online tool is Optimzilla – http://optimizilla.com/

4. Reduce the number of http requests

Creating multiple css files isn’t always a good idea, at least for responsive reasons. All files are downloaded anyway, even if not needed for mobile screen size, so they can be combined in a single file and reduce the number of HTTP requests.
An optimal approach is attained with Sass preprocessor where you can import all partial files into a single one and compile it to a single minimized file.
Alternatively server-side functions may be used to dynamically insert the correct style sheet based on the device. But this is also possible on with front-side scripting. A technique on this is described by Christian Heilmann on https://www.christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/ .

Another factor which creates HTTP requests are the images. Each image must be requested and downloaded separately, so for minimizing requests small ones may be combined with sprites.

5. Reduce client side processing

The limitation of the bandwidth is not all that slows down mobile devices, but also the internal memory and processor speed that contribute to a longer processing of the page, and it’s the client-side scripting that requires processing power. So JavaScript usage should be kept to a minimum. If possible inline script should be used.

6. Enable Cache

Some of the files comprised in a site repeat from page to page, such as logo, JavaScript and CSS. It’s a good practice to store them locally and thus enabling faster access. That’s where caching comes into play.
There are two options to control caching of your site, the Expires header and the Cache-Control header. The first one works with older HTTP 1.0 browsers, and the second is a modern system and works with HTTP 1.1 compliant browsers. Both of these headers can be used, as older browsers will ignore Cache-Control and use Expires and modern ones will override Expires and use Cache-Control.

Note: Apache “mod_expires” should be enabled.

Setting Expire headers is quite simple. The text below should be placed in .htaccess file:

This is telling the browser to use cached copies of all those file types until the specified date.
The cache-control headers are a lot more powerful, they allow us to fix the number of seconds between the moment when a file is first cached and it’s expire date.

This is just a short list of mobile speed optimizations that can be done. If you have any questions or suggestions about mobile speed optimization, do not hesitate to write us a comment below.