What to fix first on a slow website

Run any website through Google's PageSpeed Insights and you get a score, five timings and a list of things to fix. The list is the problem. It is long, it is written for developers, and it puts a two-kilobyte saving next to a two-second one as if they were the same kind of thing.

They are not. On most slow sites, two or three fixes do almost all of the work, and the rest is tidying. This is the order we go through a report in.

01Start with what the visitor waits for

Before touching the list, look at the five timings and ask which one a visitor actually feels. The test measures them all, but they do not all hurt in the same way:

• First thing on screen: how long the page stays blank.
• Main content on screen: how long until the headline, the photo, the thing they came for, is there.
• Page looks complete: how long until it stops visibly filling in.
• Time frozen to taps: how long the page ignores a finger while it is busy.
• Content jumping around: how much things move after they have appeared.

The second one is usually the one that matters. A visitor will forgive a page that builds itself in front of them; they will not forgive one that shows a menu and an empty space for three seconds.

The score is a summary. The timings are what a person sits through.

02The three fixes that usually matter

1. The biggest image on the page

On most sites we test, the main content is a photograph, the hero image at the top, and it is far larger than it needs to be. A picture exported for print and dropped into the page can be ten times the weight of one sized for a screen.

The fix is unglamorous:

1. Resize it to the largest size it is ever shown at.
2. Save it in a modern format such as WebP or AVIF.
3. Tell the browser it matters, so it fetches it first.

<img
  src="/hero-1600.webp"
  width="1600" height="900"
  fetchpriority="high"
  alt="The workshop floor"
/>

The width and height are not decoration: they let the browser keep the space for the picture before it arrives, which is most of the fix for content jumping around as well.

2. Scripts nobody remembers adding

Chat widgets, two analytics tools doing the same job, a cookie banner, a map on every page because it is on the contact page. Each one is small. Together they are often the reason the page freezes for a second after it appears.

Go through them one at a time and ask who uses what each one produces. The ones nobody can answer for come out. The ones that stay can usually load after the page, not before it.

3. Fonts

A typeface is often three or four files, each loaded before any text can be drawn. Using fewer weights, serving the files from your own domain, and letting the text show in a fallback font while they load turns a blank page into a readable one.

03What can wait

Plenty of items in the report are real but small. As a rough guide to where they sit:

The last two are worth doing, and they are worth doing last. They are easy, which is why they get done first. Then the report still says the page is slow, because the hero image is still four megabytes.

04Test it again, on a phone

Every change should be measured, and measured the way a visitor sees it: on a phone, on a mobile connection. A site can score well on a desktop and badly on a phone with the same code, because the phone has less processing power and a slower network.

If you want a starting point, run your site through our speed check. It tests it as a phone and as a desktop, and lists the fixes biggest first, with the files behind each one.