WrinkleHQ

Build ยท Site Speed

The Speed Pass That Took 40 Sites to 99 or 100

In one day we raised 40 sites in our network to a 99 or 100 mobile PageSpeed score. The fixes were plain ones. The lesson was where to make them, because a fix made in the wrong place quietly undoes itself.

6 years
  1. Year 1Website
  2. Year 2Map Listings
  3. Year 3Booking Tool
  4. Year 4Front Desk
  5. Year 5Payments
  6. Year 6Reports

Same six pieces.
Built once. Switched on in hours.

The Short Version

  • 40 sites reached a 99 or 100 mobile score in one day.
  • Stale generators revert hand fixes, so the fix goes in the template.
  • Right sized images in modern formats, and a hero that is a real image, did most of the work.
  • Fonts were self hosted and preloaded, and the one animation that must move still respects reduced motion.
At a Glance
Sites raised40
Score reached99 or 100 mobile
Time takenOne day
Measured withLighthouse, best of two runs
Main fixesImages, fonts, hero, scripts
Where fixedTemplates, not pages
Where a speed fix has to live
  1. TemplateHero markupFont loadingScript timing
  2. GeneratorBuild scriptImage sizes
  3. Built pagesHTMLWebP imagesInline CSS
  4. EdgeStatic hostingCache
  5. MeasureLighthouseBest of two

What a Slow Site Costs

Most people who find a local business do it on a phone. Many of them are on a weak signal. If the page is blank for a few seconds, they hit back and tap the next result. You never see them. They do not show up as a lost lead. They just are not there.

Speed also shapes how search engines judge a page. A slow site is working uphill on every search.

Across our network, most sites were fine. Fine was costing us. So we spent one day raising 40 of them to a 99 or 100 mobile PageSpeed score, and we wrote down what moved the number.

What We Changed on Almost Every Site

  • The hero became a real image. A background image set in CSS is found late, after the stylesheet loads. A real img tag is found right away, and it can be told it matters most.
  • The hero stopped fading in. A hero that starts at zero opacity and fades up is invisible while the clock runs. It looks nice and it scores badly.
  • Images were sized and converted. Each image was cut to the size it is shown at and saved as WebP. A phone should not download a desktop photo.
  • Fonts were self hosted. We kept each site's font pair and served the files ourselves. The hero faces were preloaded, and fallback fonts were tuned to the same size so the text does not jump when the real font arrives.
  • Analytics waited. The analytics tag loads on the first tap or a few seconds after the page settles, not before the page is drawn.
  • Small CSS went inline. A small stylesheet is faster inside the page than as a second request.

Here is the hero, before and after:

<!-- Before: found late, faded in -->
<div class="hero" style="background-image:url(/img/shop.jpg)"></div>

<!-- After: found early, marked as the most important image -->
<img src="/img/shop-800.webp"
     srcset="/img/shop-800.webp 800w, /img/shop-1600.webp 1600w"
     sizes="100vw" width="1600" height="900"
     fetchpriority="high" alt="Technician checking brakes on a lift">

How We Measured

The public speed test often runs out of daily quota. So we measured with Lighthouse on our own machine, one address at a time. A shared machine swings a few points from run to run, so we took the best of two runs and wrote down the reason for any site below 99.

Lab scores are a check, not a verdict. Real visitor data takes time to catch up after a fix. We do not claim a field result on the same day we ship. The details of reading both are in the guide to the mobile speed score.

What Broke and What We Changed

Hand Fixes That Came Undone

Some sites are built by a generator script. Fix the page by hand and the score goes up. Then the next build runs the old template and the fix is gone. Worse, some generators had drifted out of step with the live pages, so running them would have undone other work too. The rule we took away is simple. Fix the template. If a generator is stale, mark it stale and do not run it until it matches what is live.

The Animation That Had to Keep Moving

One home page has a showcase that moves on purpose. The first fix turned all motion off for people who ask for reduced motion. But some computers report that setting when animations are simply switched off in the system, so the showcase went still for people who never asked. We kept it moving under reduced motion, because a still showcase there reads as a broken page.

A Cap We Did Not Own

On a couple of sites, a hosting analytics script is added at the edge. It holds those pages just under the top score. That is a hosting setting, not a page fix, so we wrote it down as a known cap rather than hide it.

What We Deliberately Did Not Do

A speed score is easy to game. We did not.

  • We did not strip the design. Every site kept its fonts, its photos and its look. A fast page that looks cheap loses the visitor anyway.
  • We did not drop analytics. The tag still loads. It just waits until the page is drawn, so the owner still sees who came.
  • We did not trust one run. A single lucky score proves nothing on a shared machine. Best of two, with a written reason for anything under the top.
  • We did not touch a site we did not own. One site in the batch belongs to its owner and runs its own code. It stayed as it was.
  • We did not run stale generators. A script that no longer matches the live pages would undo a week of work in one build. Those scripts are marked and left alone until someone brings them up to date.

The fixes that stayed are the ones that will still be there next month.

What It Means When You Switch It On

A new site from us ships with every fix above from day one. The hero is a real image. The fonts are yours and load early. The analytics wait their turn. The template carries the fixes, so a later build cannot quietly undo them.

Your visitors see the page before they think about leaving. And when a score is below the top, you get a reason in plain words, not a shrug.

Next, see how those sites are hosted on the edge hosting page.

Questions People Ask

Why does my website score low on mobile?

The usual causes are a hero image found late, fonts that block text, large images, and scripts that load before the page is drawn. Each has a plain fix.

Will a speed fix last after my next update?

Only if it is made in the template. A fix made by hand on one page can be undone by the next build.

Does a 100 score mean my site is fast for real visitors?

It is a strong sign, but it is a lab test. Real visitor data takes time to catch up after a fix.

Do I have to give up my fonts to get a fast site?

No. We kept every site's font pair. We served the files ourselves and loaded them early.

We sell time

Get Years of Building Switched On in Hours

A thirty minute call. A written price. Nothing built until you say yes.

Get Your Time Back