Optimising for Mobile Page Speed -

Google favours responsive sites over non-responsive in mobile search results.

Since then Google has been looking to further differentiate between mobile and desktop results. One of the next ranking factors to come into force is page speed – specifically mobile page speed.

Measuring page speed

On average, I have often found the mobile score for many websites to be considerably lower than that of the desktop page speed score, when testing with Google’s own page speed testing utility. An example of this could be Apple’s own website – scoring 65/100 for mobile and 81/100 for a desktop. Smartphones often suffer from greater latency when connecting over 2G or 3G, with 4G this is often less of an issue. However, because of this loading times on mobile can be vastly greater – especially in the case of render-blocking JavaScript and CSS resources. Each request made will suffer from the added latency.

Testing on mobile

Try testing how long your site takes to load on a 2G, 3G and 4G connection with Chrome’s web inspector tools by navigating to the network tab and changing the network throttling settings. You’ll probably find you’re waiting for ages for the page to load on both 2G and 3G. Many people will get bored of waiting for just a few seconds and will move on elsewhere, for eCommerce sites, this can mean lost business. Unfortunately, many websites will take awhile to load on slow, high latency connections but there are optimisations that can minimise this.

One of the most important optimisations you can do is reducing page size as much as possible. Any pages over a megabyte in size are going to take an eternity to load over a slow mobile connection. Think of it this way, the larger your site is the more data it uses –  costing the user more money. Does a potential customer really want to be paying you to sell them a product or service?

“Time is money.”

– Benjamin Franklin

Forty percent of people will leave your site if it takes longer than three seconds to load – an even higher percentage on mobile.

What you can do to improve mobile page speed

There are many page speed optimisations you can make to improve the time it takes for your pages to load. First and foremost is to cut back your page size – anything over two megabytes is often considered large. Try resizing images or compressing them for the web, this can have a great impact on page speed in itself. Full-screen video backgrounds may look pretty and won’t necessarily block the rest of your page’s HTML from loading but it can use a lot of bandwidths, this is especially true of mobile users. I’d recommend ensuring that videos only autoplay on a desktop, laptop and tablet sized devices.

Minimising and combining external JavaScript files, and CSS files is another great way of reducing page size. If you use frameworks such as Bootstrap, it’s worth customising it such that you only use the styles you need. There is no point in loading Glyphicons if your site doesn’t use them.

Removing render blocking content

Next, you’ll want to optimise above the fold content to render before the rest of the page. This ensures that your pages load fast on a mobile. Inline CSS and JavaScript doesn’t block the rendering of a page, whereas external assets do. To get around this inline the CSS you know is needed to load above the fold content and load the rest of it asynchronously. Google Developers has a great article on optimising the delivery of CSS.

Conclusion

The web is adopting the use of HTTP/2 as we speak, CDN providers such as CloudFlare are helping with this cause massively. By offering free shared SSL for everyone (HTTP/2 is only supported over SSL by almost all the major browsers). A lot of the tips provided above are mainly relevant to sites utilising the HTTP/1.1 protocol, as HTTP/2 has added many features to combat the problems above. CSS and JavaScript assets can be pushed to the browser, rather than block the rendering of the web page. Tricks such as domain sharding are now obsolete, and may even hamper performance when used in conjunction with HTTP/2.

Want to learn more or get support on making your site faster? Contact us today!