Website performance – an intro to Google PageSpeed Insights

No one ever wants a slow website, but as 2020 has progressed, site speed has become an ever-increasing concern for website owners; certainly in no small part to Google’s continued messaging that site performance can and does impact your search engine listings.

A glance at our support desk confirms this on an almost daily basis, clients routinely ask what they can do to increase their scores. More often than not the scores they’re referring to are the numbers provided by the Google PageSpeed Insights tool. Go ahead and pop your domain name in there now – how does your site perform?

While there are a number of site speed testing tools out there, it’s understandable why website owners turn Google’s; after all, it’s more than likely that the data generated here is what Google’ search engine brain understands about your website speed.

With all that in mind, over a series of posts I’m going to go over the PageSpeed tool, looking at the information it provides, understanding what it all means, and crucially how you can get your site to score better.

Let’s test a site

First of all, go ahead and test your site if you haven’t done so already. Pop your domain name in the field at the top of the page and press analyze. Your report should come back pretty quickly, typically no more than thirty seconds. We recommend you run the test a few times, three at least.

You’ll note that the report comes back a little differently each time. The Internet is a fluid and fascinating thing – network lag, processing hiccups, goblins in the gears – whatever the reason we think looking at the average is better than a one-off micro-slice in time.

You should now have a baseline score for your website, from zero through to one hundred. Think of 100 as Usain Bolt, and 0 as lying on your back and giving up at the notion of a brisk workout. 100 is fast, 0 is slow.

Mobile vs desktop

The first thing you’ll want to take note of is that the PageSpeed tool returns two numbers, and it’s easy to mistake the data. PageSpeed tests your site on a simulated mobile/cellphone connection and also a simulated desktop machine. As standard the data provided and shown to you is the mobile score. If you glance at the top left of the page you can see which you’re currently looking at, and also switching seamlessly between the two.

It’s worth noting that your mobile score is always likely to be less than your desktop score. In testing your site for mobile, Google uses a simulated connection of what they think the real world looks like. At the time of writing that’s using a “mid-tier device (Moto G4)” on a connection speed of 1.6mbps.

Google employs throttling to test how your site would work on such a device and mobile connection. They write, “These exact figures are used as Lighthouse’s throttling default and represent roughly the bottom 25% of 4G connections and top 25% of 3G connections (In Lighthouse it is sometimes called “Slow 4G” used to be labelled as “Fast 3G”). This preset is identical to the WebPageTest’s “Mobile 3G – Fast” and, due to a lower latency, slightly faster for some pages than the WebPageTest “4G” preset.”

If you hit the tab for desktop you should see a much faster score. It’s important to understand the two scores. Clients often get in touch with us about a “slow” score and don’t understand that the first score they’re given is that of a mid-range mobile device on (what I personally think) is a slow mobile connection these days.

Lab data

With your numbers in hand, scroll down the screen. Next up, Google breaks down how they’ve generated that score for you. There are six core points that make up your speed scoring. They’re a little hard to understand, so here’s what each of them means

First contentful paint – FCP represents the time take to show something to the user in their browser. This could be anything, a text or a simple image, anything is fine. FCP represents the user receiving some form of positive feedback that the site they’ve accessed is there and working. A fast FCP is important in engaging the person trying to use your site. If something doesn’t at least appear to be loading, they’ll likely leave.

Speed index – Once things start to load in the browser, exactly how fast do they start to load? Google generates a visual image of the various elements of your site loading (a block of text here, an image there) and then calculates how fast the progression of loading is.

Largest contentful paint – Google tries to estimate when the majority of your website’s content has loaded and is visible to the user. Google’s current recommendation is that your LCP should be achieved within 2.5 seconds.

Time to interactive – TTI is a measurement of when can the user start using your site. When can they click links, use menu navigation and so forth. Exactly how long does it take for your site to be fully interactive?

Total blocking time – This one is a little more complex to understand. Google define it as, “TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses”. In essence, as your page loads, a number of moments occur that prevent the user from using your site. How long is that period in total?

Cumulative layout shift – Google’s own description of this one makes complete sense, “Have you ever been reading an article online when something suddenly changes on the page? Without warning, the text moves, and you’ve lost your place. Or even worse: you’re about to tap a link or a button, but in the instant before your finger lands—BOOM—the link moves, and you end up clicking something else”.

CLS measures any of these jarring loading experiences for your site. If the page loads only to suddenly be re-arranged or shifted, it will be noted here.

Taken together, these six components make up your overall site speed score. For those parts of your sites Google deems ok you will see the score in green. If Google thinks you have an issue with one of these components it will show in red. This can help track down parts of your site that might be dragging things down.

Again though, test a few times to be sure. It’s very common to see your site score one way, only for the issue to be fixed again a few minutes later. This can be down to the hosting server or Google’s test tool itself. Always look at the average, never a one off test.

Opportunities

Next up, the exciting stuff! How do we go from slow to lightning fast? This section aims to help you get there. It’s not as simple as you might think, but I’ll cover that in my next post…