How to improve mobile page loading speed

We’ve all been there. Someone sends you a link to a product on your mobile. You click, it takes ages to load, you abandon. In e-commerce terms, this represents a poor ‘bounce rate’ – that is, people abandoning your site (often never to return) because of poor loading times. For those looking to boost their e-commerce game, I dissect this and more in my latest article which you can read here.

As detailed in my previous post The importance of page speed, page loading speed is important for 3 key reasons: SEO ranking, bounce rate, and conversion rate to purchase.

Why does page speed affect SEO, bounce and conversion?

A brief explanation…

1. For SEO ranking, the speed of pages loading is a signal to Google of the quality of UX. Anything over around 2.5 seconds and Google scores your site as poor UX and will de-prioritise it for first page ranking.
2. For bounce rate, people expect pages to load within just a few seconds, particularly on mobile; and will quickly abandon after the first page if it has taken time to load. One in four will abandon if the site takes more than 4 seconds to load. Also the same study in the link shows 46% of traffic don’t return!
3. The conversion rate of a site is closely correlated to the page speed of a site

Here’s a great graphic to show the effect from Websitebuilderexpert.com (source of data: Delloite)…

Or this graphic from Think with Google…

Why is it important to fix speed for mobile?

Because simply put, most of your traffic nowadays in from mobile devices. Generally the split is about 60% mobile, 20% tablet and 20% PC.

Simpler fixes

So on to how to increase speed on your mobile displayed site.

Compared with my previous article The importance of page speed which looked in to quite a lot of detailed coding areas, here I want to show you some simpler and quicker fixes.

1. Convert to AMP

The first option is to convert your mobile version of your site to an AMP (Accelerated Mobile Pages) version. If you are using WordPress (or a CME similar) you could search for an AMP plugin, such as AMP for WordPress.

What is an AMP site?

Essentially it is a stripped down version of your site where Google helps load speed by storing a cached version of your site on their server. It started life as a Google initiative to improve the UX of its search results.

Features like videos, ads and animations are removed and give almost instant page loading speed.

How does AMP work?

Search Engine Land sums it up:

Essentially a framework for creating mobile web pages, AMP consists of three basic parts:

1. AMP HTML: A subset of HTML, this markup language has some custom tags and properties and many restrictions. But if you are familiar with regular HTML, you should not have difficulty adapting existing pages to AMP HTML. For more details on how it differs from basic HTML, check out AMP Project’s list of required markup that your AMP HTML page “must” have.
2. AMP JS: A JavaScript framework for mobile pages. For the most part, it manages resource handling and asynchronous loading. It should be noted that third-party JavaScript is not permitted with AMP.
3. AMP CDN: An optional Content Delivery Network, it will take your AMP-enabled pages, cache them and automatically make some performance optimizations.

In other words – a lot of tech!

The important thing to know is: AMP renders your pages using optimized HTML code. As a result, the pages load faster because it eliminates HTML code tag manager aspects that would slow down the page.

NB: If JavaScript is included in your mobile pages, it won’t be rendered for your Accelerated Mobile Pages.

AMP Pros

Faster loading speed – better UX (implications of bounce, site penetration and duration, returning visitors, conversion rate)

Higher ranking – as explained earlier

Easy if you use WordPress – using the above mentioned plugin (although note: you have to use a particular theme so if your site look uses particular brand stylings you may decide against)

AMP Cons

If you don’t use WordPress it will need an expert coder and time.

Reduced ad revenue if you monetise your space – AMP sites limit the number of ads shown.

Limited design as design elements are stripped to the minimum.

Lead capture an issue – as AM strips out lead capture forms.

Social sharing limited – your buttons may not even work.

2. The alternative to AMP

Well it’s not a direct alternative.

But a good first step is to do a Google Speed Test and work on the Google recomendations.

If it is saying your Largest Contentful Paint (LCP) is taking more than around 2.5 seconds (the minimum really for users to tolerate), you need to act on the recommendations.

It might be recommending to ‘Defer Off-screen images’. You could try installing a ‘Lazy Load’ plugin like Smush (which works well for wordpress sites). This is where images only load as you scroll down the page, saving load and time to load what is immediately viewable.

The test may also recommend reducing reducing unused JavaScript. Do you have plugins that you could lose?

3. An easier alternative – simplify the site

Sometimes developers trying to make the most eye catching site end up with a slow, code loaded site. Developers call this ‘code bloat’.

Now don’t get me wrong – design is important, very important. It’s what we stand for at Jam after all!

But performance can’t be secondary to good looks.

And you can have both – simplicity does not mean poor design.

Look at this image from Neilpattel.com:

Reduced content and a single call to action.

Remember users are time scarce!

How to simply your mobile site?

1. Compress your images. Images take a roughly 63% of your site’s weight. There are various plug-ins to compress your images, like the above mentioned Smush
2. Add code to only show certain sections on mobile. It’s important here to not use code that simply hides the content as it will still take the time to load regardless. See the section below for a guide on this.
3. Don’t use custom fonts
4. Use a plugin to ‘minify’ your code. Essentially, minifying your code takes out everything that’s redundant and unnecessary. Simply put it makes sure your site is only using the code it needs
5. Cut down on redirects

Finally, check out this Google article on mobile speed – it shows how important speed is to Google. They say “If speed thrills, friction kills.”

Code to reduce sections shown

Re the point 2 above, below is example code.

In the php page file log the div class name (e.g. ‘container2’)

Add the following to the css file:
.container2 {
display: none;
}

@media all and (min-width: 768px){
.container2 {
display: block;
}
}

The above code means below 768px view the div class code for ‘container2’ won’t show.

NB: Although hiding this code removes from view on the front end, the server still has to load first then hide so page speed is not totally saved.

That’s it from me for now – feel free to add a comment or question and I will reply back. Thanks.

Good luck! 🙂