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/