20i.com Blog
Google Mobile Loading Speed Testing

Mobile First Indexing: testing mobile site speed

A explanation of Google’s four main methods of testing the speed of a website on a mobile device.

How do you measure your site speed on mobile devices? With Google’s Mobile First Indexing here, it’s important to know.

Site speed is a critical element of Google’s “mobile friendliness score”. Speed of loading affects search engine rankings, so how do you measure it?

You can’t say “my page loads in X seconds on mobile”.

Or rather, you can’t say it with any authority without also qualifying it with:

  • on X phone
  • in X country and location
  • on XG network, provided by X internet service provider
  • in X browser, etc.

In reality, there will be a range of user timings, something like this:

Histogram of load times for different users
Histogram of loading times (credit: Google)

So you need to test performance in a variety of ways to get an idea of that range.

Checking it on your phone, your mate’s and your Mum’s isn’t enough.

Tools are available that will simulate different mobile devices and networks from your desktop, while others use aggregated real world timings.

How to check your mobile speed performance

There are many free and independent ways to check your web page loading speed, such as Pingdom or WebPageTest. It’s worthwhile having a look at a few different ones, as they tend to use different methods – meaning that you can get a more holistic view of what you should optimise.

However, this article is concerned with Google’s Mobile First Index, so I’ll concentrate on Google’s mobile speed tools. One would assume that their search engine rankings are based on these tools, largely.

In typical Google fashion, they’ve created a number of different tools – all of which do many of the same things – but there are some important differences.

Test My Site

Google’s Test My Site is the most attractively-designed and user-friendly mobile speed test tool. Simply enter your domain in the box and it does its magic.

Google's Test My Site on Mobile

It tests your entered domain on a simulated 3g connection, as, in their words:

70% of mobile network connections globally will occur at 3G or slower speeds through 2020.

– so makes sense to test your site on slower networks.

It will then scan your site for the technical side of things: HTML/CSS, Javascript and compression.

Next, it looks at the user experience: text readability, sizes of elements and that it conforms to the viewport (the device’s screen resolution and aspect ratio).

It will then compare your results against others in that industry – if that’s available.

Finally, it will simulate the loading time based on the network in your area.

Whether it’s 3G, 4G or more, loading speeds can vary drastically dependent on your physical location. This is because it depends on so many different variables, such as: how busy cell towers are, the type of technology they use and even the connectivity of the cables that supply those towers.

Google’s neural network has a ‘90% prediction accuracy’ at simulating the load time on your ‘local regional network’. It’s not clear what that ‘regional network’ is but I’d assume that they mean your country.

Each stage of the process includes animated illustrations projected on the screen of the ‘phone’, giving the impression of lots of data processing and number-crunching going on. It’s a pleasant distraction for the minute or so it takes.

You’re then given the verdict: the timing, an overall speed verdict and a comparison with similar sites in your industry.

Google's Alphabet Report
Google’s parent company receives a great verdict on mobile page speed. This is not surprising.

Uniquely, it gives an estimation of what percentage of visitors you will lose due to slow loading of your mobile site.

This Estimated Visitor Loss could be an extremely useful tool for web designers and developers when presenting to clients, or potential clients.

It’s a way to hammer-home the message about site speed: even the least technically-minded person can understand the raw percentages. That percentage improvement of more mobile visits could be the difference between a healthy profit and a substantial loss for many businesses.

Google Test My Site Industry Comparison
In delicious irony, the ‘Test My Site’ site is slower than the top performing sites.

Finally, they offer to send you a detailed report by email.

Test My Site email report

You may recognise the content of this report. It’s in a similar vein to Test My Site’s grandaddy, PageSpeed Insights.

Measure Site Speed with PageSpeed Insights

PageSpeed Insights is an old hand in the speed game.

If you’ve been in web design or SEO in the last few years, you’ll be familiar with it.  It has had a few visual design upgrades over time, but the basic function appears unchanged.

Unlike Test My Site, it’s not focused on mobile-only. But if you’re testing a responsive site, then it’s very likely that any optimisations will have positive effects on your mobile speed as well as desktop.

There aren’t any pretty animations for this one, apart from the progress bar (!), but it takes less time compared to the above. Once complete, you’re given a separate score for mobile and desktop speed, along with a list of recommendations.

I won’t go in to detail about the recommendations it provides, but it’s all the usual suspects:

  • Compress images
  • Eliminate render-blocking Javascript
  • Leverage browser caching, etc.

…all those things that we may think we’re doing already – but that Google likes to torture us with.

A recent addition to Pagespeed Insights is the ability to look at site speed as whole. To do this, you need to place the word ‘origin:’ before the home page like: origin:https://www.20i.com.PageSpeed Insights logo

A bit more technical

It’s a bit more technical than Test My Site.

It uses daunting initialisms like FCP and DCL.

Thankfully, they aren’t as scary as they sound.

First Contentful Paint (FCP) measures when a user sees a visual response from the page – like the background colour changing from white, for example. This will be affected by Time To First Byte (TTFB).

DCL stands for DOM Content Loaded (DOM is the Document Object Model). This “measures when the HTML document has been loaded and parsed”, i.e., when the page’s content has appeared fully. You might still delay some things until after this load (such as shopping cart shenanigans), but it’s when the page appears to be fully ‘there’ on your device.

Both FCP and DCL can be improved by a decent hosting platform, but the report will also highlight other technical ways to improve site loading speed too.

The score out of 100 is a little naughty: you lose points for having Google’s own scripts on your pages, such as Google Analytics, Maps and YouTube.

So don’t expect to get a 100 out of 100 score, unless you’re willing to take the risks of removing them, getting them to load internally or hiding them from the Googlebot.

Optimised JS and images

An easily-overlooked feature of Pagespeed Insights is if it nags you to optimise (compress) images and Javascript, it offers help! If your page ‘fails’ these tests, it will provide you with a .zip file at the end of the report. This will include the compressed files.

UPDATE ( 13.11.18): Google have updated the Pagespeed Insights UI to version 5: it now includes extra info from both the Chrome User Experience and Lighthouse reports (see below).

Chrome User Experience Report

Another difference with PageSpeed Insights is its use of the Chrome User Experience Report (CrUX).

This report is made from real-world timings of user experiences on a particular page.

It’s restricted to “popular destinations” on the web. So if the site isn’t ‘popular’, it’s unlikely that it will be the CrUX. You’ll still get an Insights report, but you’ll get a message saying “Data about the real-world performance of this page was unavailable.”

Speed Scorecard, or “Winning on mobile”

Google’s Speed Scorecard is a great tool if you want to test your mobile domain speed against your competitors. You just need to enter your site and up to 9 comparison sites, then it will rank them in order of loading speed. You can also set it by country and network (3G or 4G).

Here’s one I made earlier:

Google Mobile Speed Scorecard

Warning – only show this to clients if you have a fast host (ahem)!

The issue with this tool is that it relies on the CrUX Report. Which makes it useless for sites in development, unfortunately!

This page also includes an “Impact Calculator”. This shows the potential revenue that could be gained through loading speed improvements.

Google Revenue Impact Calculator

Just enter your current loading speed, your monthly visitors, conversion value and rate. Use the slider to estimate your speed increase, and it poops-out a magic number: the amount of extra revenue you could gain in USD!

This can also be easily shared by email. Thanks Google! 😉

Lighthouse

Right…I have to admit, Lighthouse kinda scares me. It’s aimed at those writing ‘Progressive Web Apps’ (PWAs), so it’s not purely for websites, but still has a lot to offer the site developer.

It’s part of the Chrome Dev Tools toolset, but it can also run as a Chrome extension, from the command line or as a Node module. It will generate a report on a web page and score it for performance, accessibility, best practices and SEO.Lighthouse

I find that a Google tool actually gives a score for ‘SEO’ hilarious…

It’s definitely the most complex and detailed report.

The Performance section covers loading speed, and shows a useful visual timeline measured in microseconds of how your page will appear.

It will tell you when the First Meaningful Paint happens – which is different to FCP and DCP , but I believe lies in between, closer to FCP. It’s the time when the website will first appear to be ‘loaded’ in the viewport, but background processes may still be taking place.

This is then followed by the time to First Interactive, which is when most of the user interface elements are visible and work. This is then followed by the time when the page is Consistently Interactive, which is when all the UI is visible and can be interacted-with.

There’s then the Perceptual Speed Index. This is probably the closest the page is to ‘fully loaded’. It’s when a human would see it as ‘visually populated’. It uses a node module called Speedline to create your score.

There’s then Estimated Input Latency (bored yet?). This is how long it takes for your page or app to react to user input. If your latency is higher than 50 ms, users may perceive it as ‘laggy’.

There are plenty of other metrics included too, as well as recommendations for the changes you should make. These recommendations are scored in order of most impact, which is a handy touch.

What should I do with my mobile website speed report?

So you’ve got your mobile page speed report. Or ideally, you’ve got a few reports to compare and contrast.

Unless you have super-powers, there are likely to be many, many recommendations…

But to be frank: it’s unlikely that you’ll be able to implement all the changes and still have the site you want.

A good thing to remember is that:

in the end, you’re designing for humans, not search algorithms or speed-testing tools.

Yet if you treat them as the recommendations that they are – the clue’s in the name – you can make some valuable gains.

We’ll publish a companion article soon covering the changes you can make to help speed up your mobile site.

How do you measure mobile site loading speed performance? Let us know.

1 comment

Sign up!

Richard Chambers

Richard is a Marketing Manager at 20i. He likes all things tech and is a master of none.

Visit the 20i main site