How I took a club website from 70 to 100 on PageSpeed

The website of the Slovenian naturist club Društvo naturistov K naravi, knaravi.si, was tidy and good-looking, but slow on phones: Google's PageSpeed Insights gave it 70 out of 100. Three weeks later it scored 100 — three times in a row. There was no magic button. There were three culprits that plenty of other websites share, and one trap I did not see coming.

First: how I measured

Every number here comes from PageSpeed Insights, on the Mobile tab. Google opens the page on a deliberately slowed-down phone with a slower connection — stricter than what most visitors experience. I repeated every measurement three times in a row, because a single number fluctuates: the same, unchanged page scored 81 on one day, then 72, and then 70 three times in a row. I only trust a number that repeats.

* a single measurement. Bold scores were measured three times in a row. In the end, accessibility, best practices and SEO are also 100, and so is desktop speed.

Step one: things that load before anyone needs them

The header image sent phones 268 KB, even though a phone shows it small — they now get a 116 KB version. Six gallery pages were preloading an image they never used. But the biggest cost was the spam protection on the contact form (Google reCAPTCHA): it loaded as soon as the page opened, although only someone writing a message needs it. On my own website I measured that this costs about 14 points. Now it loads only when a visitor clicks into the form — and, as a side effect, they get no Google cookies until they start typing.

Culprit two: fonts

The site used Google Fonts, which load from Google's servers. When I looked at what the browser actually downloads, I found a surprise: it fetched the same font up to four times — 682 KB instead of 228 KB. At the same time the page stayed blank for almost a second (871 ms in the measurement) while the browser waited for them.

The fix: the fonts now live on the same server as the site, each file once. Until they arrive, the text is drawn in a system font that is scaled and spaced to take up exactly the same room, so nothing moves when they swap. Score: 92, 92, 92.

Culprit three: analytics for everyone

The Google Analytics script was downloaded for every visitor, including those who had not agreed to analytics in the cookie notice — without consent it stored no cookies, but it still downloaded. Now it downloads only after consent. That is fairer to the visitor and faster: 100, 100, 100. The price is known and accepted: the statistics now only include visitors who consent.

The trap I did not expect

Right afterwards, one of the gallery pages dropped from 100 to 87. Nothing on it had changed — what changed was something that was no longer there. The Google script had been delaying the moment the browser declares the page loaded. Without it, that moment came sooner, the fonts waiting for it started downloading before the first image appeared, and Google counted them into the time to display. The fonts now download one second later — and the gallery is back at 100, three times.

Lesson: if you remove a script, check what was waiting for it.

And something the score does not show

At 100 points everything looked “perfect” — until, while viewing one of the report pages, I noticed that the letters looked different for the first second and then grew. The score does not catch this, because nothing moves: the fallback font has the same dimensions but differently shaped letters. Now the first page of a visit stays in the fallback font throughout, the real fonts quietly download in the meantime, and every following page shows them from the very first paint. The score stayed at 100, and the letters stay still.

What you can take for your own website

• Measure three times before you believe a number — and at roughly the same time of day.
• When the score drops, ask which of the five measurements dropped. PageSpeed lists five numbers under the score; one of them points to the cause faster than any guess.
• Let third-party scripts wait until someone needs them — form protection, chat, maps, statistics.
• Host your fonts yourself and check how many times they actually download.
• Look at the page with your own eyes, too. A score of 100 does not mean the visitor is comfortable.

The basics of measuring speed are in the article Why does website speed matter, and how do you check it?