Can we trust Google page speed for website performance?

What is website performance?

Performance is how quickly a website loads and responds to user interactions. Why should we care about performance? A more performant site is going to load quicker. Say you are on a crappy 3G signal trying to book train tickets – you want that site to be loading as quickly as possible and even in less than ideal circumstances connectivity wise.

Then there is just the feel of a site. If every time you click a link you see the website thinking and trying to load it can be incredibly frustrating. For big online shops this can make or break them.

Last but not least we have SEO. Google loves fast websites and ranks them higher in google searches. So if we are at all concerned with our site being robust, being a pleasant experience for users and ranking on google then we need to pay attention to performance.

Getting good performance

How do we get good performance then? A large part of it comes down to page speed. The smaller our site, the quicker it will load. This means makes a site with properly sized images, not using bloated plugins that drag in loads of extra resources. More than this, it often means designing with this mind. Do we really need all those extra images?

Here’s the dilema. If you want a really fast site, one of the best things you can do is just not include any content that takes time to load. Don’t use video, don’t use big images, don’t even load fancy fonts. What if your brand requires nice fonts though, or what if your businesss IS video? You’re going to want to show it off, so you’re going to need it on your site.

So it’s always a balance. Sometimes you need rich media on the site, and the best you can do is include it in a sensible way. The right file formats, the right sizing and things like lazy loading (only load things when you need them).

Static vs Dynamic sites

WordPress sites are dynamic – the content is generated on the server and can change based on user actions, database queries, and other factors. This is opposed to static sites that are just serving up prerendered files of html that are static.

Static sites are much faster to load than dynamic sites, but they come with some drawbacks. They are more complicated to setup and host and their CMS options are not as good unless you put in a lot of extra work. With a JAM Stack site (Javascript, Apis, markup, something like Next.js and Gatsby) you can even use WordPress as a separate CMS (known as a headless CMS) but then you are essentially building two sites. One for the content management, and one to render the site. It’s a lot more work and it’s more complicated to maintain. If you are developer these may not be problems (some developers will find this setup easier to maintain) but for the average end user it’s just more complexity.

So there’s a pattern emerging here. What is your use case and how do you balance performance against business needs, design and various other factors?

Measuring performance

Even if we are going take the performance results with a pinch of salt and balance it with our other needs we still need some way of measuring performance. There are a few main tools for this – Googles PageSpeed Insights and Lighthouse (a tool built into the chrome web browser), As well as performance they can also give you a score for accessibility, best practices and SEO.

Here’s the thing – it works of an algorithm so it doesn’t care about you business and design needs. It’s going to favour light sites that are static. Getting cracking performance on a site with barely any images is going to be multitudes easier than a video heavy site. That doesn’t mean that the site that has worse performance was built in a worse way, it just has more stresses on it’s content and load times.

Performance Scores

You will often see web developers showing off performance scores, but it’s important to look at the site and what it contains. Getting decent performance on a site filled with images and rich content is going to take way more work and skill then a super light site that is mostly text content.

There’s also a way to cheat these things to get higher scores. It cares about loading up front i.e. when you first load a page. You can lazy load things in later on scroll and they won’t get counted. You could load in a tonne of crap later and have a bloated and badly built site, but if you do it later these tools won’t know!

Here are the current performance scores for this site from google page speed checker:

You’ll notice that getting a high score on mobile is much harder than desktop. There’s lot of reasons for this – the tests for mobile assume a slower internet connect akin to 4G vs hi speed broadband, the tests quite possibly use a mid tier mobile device, and then there are just different ways that mobile renders things (such as the power of the device).

You should also notice how high the other scores are compared to the performance. You can follow all the rules and best practices, but getting really good performance on mobile of google page speed is really hard.

It’s still a very useful tool, but next time you see a web developer showing off their performance scores take a look at their site and see how much content and images are actually on there. If they have an incredibly high score and lots of rich media then they know their stuff!

In order to get high scores on mobile they are likely using a static site or using a performance plugin. Performance plugins charge a monthly fee and do lots of things to heavily optimise, cache and speed up a website. I’ll be taking a close look at them and writing an article soon.