What a slow website costs, in numbers

What exactly Google measures, where the seconds your website loses come from and the fixes in order of payoff. With our own case: from 88 to 97.

Website speed gets little discussion because it sounds like a matter for technicians. Yet it is one of the few things in this whole trade that can be measured beyond argument, with a free tool, in a minute.

Open PageSpeed Insights, paste your address and look at the mobile score. Not the desktop one, which always comes out better and represents hardly anyone.

The three things Google measures

Since 2021 Google has used three measurements to rank results. They have ugly names and are worth understanding, because each one is fixed in a different way.

The first is LCP, the time it takes for the largest element on the screen to appear. It is usually the header photo or the headline. Google considers anything under 2.5 seconds acceptable.

The second is CLS, how much the content moves around while it loads. We have all gone to tap a link only for it to jump down at the last instant because an image had just loaded above it. That is CLS. It is measured from 0 to 1 and anything below 0.1 is acceptable.

The third is INP, how long the page takes to respond when you tap something. Under 200 milliseconds.

Of the three, the second is the most neglected, because it is not perceived as a speed problem. It is a problem for your nerves.

Where the seconds come from

In the websites we audit, the weight is almost always spread the same way.

Images come first. A header photo straight from the camera weighs between 2 and 5 MB. The same image in WebP, at the size it will be displayed, weighs 150 or 200 KB. That is a reduction of more than 90 % and nobody notices the difference by looking.

Fonts come second. They are what most people overlook. Loading a font from Google Fonts’ servers adds a connection to another domain, with its own DNS lookup and TLS handshake, before a single letter is painted. Hosting it yourself removes that trip. It also avoids the privacy problem of your visitors’ IP addresses ending up on someone else’s server without their consent.

Third come the scripts. The customer service chat, the Facebook pixel, the embedded map, the reviews widget. Each one brings its own. Together they can add up to half a megabyte of JavaScript that the phone has to download, parse and run. A mid-range phone from four years ago takes far longer to do that than anyone testing from a new laptop on fibre imagines.

The case of this website

We are telling it with numbers because that is more useful than theory.

Our home page had a CLS of 0.188, almost double the limit. Nearly all of it came from the subtitle in the header: the text was painted with the system font and, once Montserrat finished loading, it changed size and pushed everything below it down.

The fix was not removing the typeface. It was defining a fallback font with its metrics adjusted to match Montserrat’s, so that the provisional text takes up exactly the same space as the final one. The jump disappeared: CLS 0. The overall score went from 88 to 97.

It is a change of a few lines of CSS that hardly anyone makes. In one go it solves the measurement that is hardest to fix any other way.

The order to tackle it in

First the images, because that is where the weight is and where the fix is mechanical. Convert them to WebP, serve them at the size they are displayed at and put width and height on the tag so the browser reserves the space.

Second, host your fonts on your own domain and load only the weights you actually use. If you have six variants loaded and use two, you are paying for four too many.

Third, go through the third-party scripts one by one and ask yourself whether each one brings in more than it costs. A chat that receives two enquiries a month is expensive.

Fourth, if your website is generated every time someone visits, consider generating it in advance. A static website, which is a set of ready-made HTML files, does not have to query any database to respond. We work like this almost all the time. That is why our websites load fast without a fight.

What you do not need

A caching plugin that promises to fix everything. It usually hides the symptom and leaves the problem. If your images weigh 4 MB, the cache speeds up the same person’s second visit and nothing more.

Nor do you need to chase 100. Nobody notices the difference between 92 and 98, while every point above 90 costs twice as much as the one before. What does matter is not being at 40.

One more thing, which is not about speed

All of the above also reduces your visitors’ data usage and battery drain. And it makes your website usable with poor coverage, which is the situation of anyone visiting from an industrial estate, a car park or a small village. For many businesses, those are precisely their customers.

If you want to know what numbers your website gets, write to us and we will send you the report with what comes out and what it costs to fix.

← Back to the blog

Comments