Before the new Swiss and UAE Curaprox stores went live, I went through the product pages with Lighthouse and a real Chrome. One colour-variant product page weighed 16.2 MB on mobile. A toothbrush that comes in 36 colours is a nice problem for a brand and a heavy one for a page.
None of the fixes were clever. All of them were about sending less.
1. Images the size they are shown
The gallery was loading images far larger than the space they filled on a phone. Serving properly sized images took the gallery from 13.0 MB to 1.4 MB, on its own the biggest single win.
2. One swatch, drawn once
Each of the 36 colour swatches had the same SVG shape pasted inline. Thirty-six copies of identical markup is invisible to a shopper and very visible in the HTML, so I defined the shape once and referenced it everywhere:
<svg hidden><symbol id="swatch" viewBox="0 0 24 24">…</symbol></svg>
<!-- each of the 36 swatches -->
<svg><use href="#swatch"/></svg>Simplified. Each swatch still gets its own colour.
The HTML of that 36-colour page went from 2.03 MB to 0.76 MB.
3. Nothing that jumps
On mobile product pages, content shifted after loading in about half of the test runs, with a layout shift score of 0.108. After my fix it was zero in every run. On a slow 3G connection, the bestseller slider now shows all its images after 20.8 seconds instead of 31.7, 34% sooner.
The part that is not about speed
While I was in there, I checked the delivery promises on the UAE product pages against what checkout actually offers. All 84 test cases now match, because a fast page that promises the wrong delivery date is still a bad page.
Measured in my pull requests on unpublished test themes against the live theme, August and September 2026: mobile Lighthouse for page weight, Slow 3G with a cold cache for the slider, repeated runs for layout shift.