Performance
How I made a Wax London product page feel ready sooner
I cut the time it takes a phone to show a finished product page by 17%. On a computer the page started painting 25% sooner.
- WebPageTest
- Shopify
- Liquid
- JavaScript
Problem The product was ready too late
I worked with Wax London on a Shopify product page that took too long to look finished. Reviews, cookie consent, and extra third-party hosts were getting in the way of the first screen.
Shoppers should see the product, then the rest of the page. If scripts delay that, they wait on a blank or half-drawn screen. That is a common problem on fashion stores that add review widgets, consent tools, and size apps on top of the theme.
I measured one live page in WebPageTest, on a phone and on a computer, then shipped a small set of loading changes. The page I used is the Whiting Coral and Pale Blue Pike Check Overshirt.
If I cut blocking work on the product page, people should see a usable screen sooner, even while the main product photo still loads the old way.
On a phone, Speed Index went from 8.008s to 6.633s. That is 17.17% faster. Speed Index is how soon the screen looks complete. The full visible page used to take more than 9 seconds. It now finishes within 7.5 seconds. First Contentful Paint and Largest Contentful Paint each improved by about 100ms, which is small.
On a computer, the page started rendering 25% sooner, First Contentful Paint improved 21%, and Total Blocking Time dropped 16%. Largest Contentful Paint, the moment the main photo lands, went the other way, from 4.148s to 4.374s. That is 5.4% slower, and still a long way from Google’s 2.5s target.
These figures are WebPageTest median runs, sorted by Speed Index. They are lab runs, not Chrome User Experience Report field data.
Work What I changed
I shipped four changes. I did not rewrite the theme. I did not replace the image pipeline.
Delayed the review widget
The reviews script no longer blocks the first paint. It can wait until the product is on screen.
Started the cookie script earlier
Consent still has to run. Starting that fetch earlier meant less waiting once the page needed it.
Let people zoom
The viewport was blocking pinch zoom. I set max-scale to 2.0 so people can enlarge the page. That is an accessibility fix, not a speed trick.
Warmed up extra hosts
I preconnected cdnjs.cloudflare.com and geo.cookie-script.com so those requests start with a connection already open.
I could not fix Largest Contentful Paint in this pass. The main photo still depends on lazysizes, so the browser finds it late. The URL is also dynamic, so a simple preload is not safe.
Results What moved
The script work moved completeness and first paint. It barely touched Largest Contentful Paint. On a computer, largest paint got worse. That is honest. The photo is still the leftover problem.
Phone
6.633s
Speed Index
from 8.008s
Computer
1.2s
Start render
from 1.6s
Phone
3.661s
Largest paint
from 3.772s
Computer
4.374s
Largest paint
from 4.148s, 5.4% slower
Phone What changed on a phone
The biggest gain is how soon the screen looks complete. Speed Index improved 17.17%. First Contentful Paint and Largest Contentful Paint both moved in the right direction, but only by about a tenth of a second. Largest Contentful Paint is still over 3.5s. Google wants 2.5s.
Before · Phone
Before the script changes
Start render at 2.600s. First Contentful Paint at 2.572s. Speed Index at 8.008s. Largest Contentful Paint at 3.772s. Total Blocking Time at 1.053s.
After · Phone
After reviews, cookies, and preconnects
The screen looks usable sooner. Speed Index dropped 1.375s. First Contentful Paint and Largest Contentful Paint each improved by about 110ms. The photo is still the slow part.
Complete · Phone
100% visible content within 7.5 seconds
Before, the visible page was still filling in after 7.5 seconds, and took more than 9 seconds to finish. After, the same checkpoint is done. A size widget called Eyefitu still added some extra work on the way.
Computer What changed on a computer
Desktop started painting much sooner. Start render went from 1.6s to 1.2s. First Contentful Paint followed it. Total Blocking Time fell. Speed Index improved a little. Largest Contentful Paint got worse.
Start render, First Contentful Paint, and Total Blocking Time all improved. Largest Contentful Paint did not. That is the image problem showing up on a faster machine.
Before · Computer
Before the script changes
First pixels at 1.6s. Largest Contentful Paint at 4.148s. Speed Index at 8.526s. Total Blocking Time at 330ms.
After · Computer
Faster first paint, slower largest paint
The page starts 400ms sooner. First Contentful Paint and Total Blocking Time improve with it. Largest Contentful Paint is 226ms later than before. The hero image is still the bottleneck.
Complete · Computer
100% visible content within 9 seconds
The after run is visually complete by 9 seconds. The before run is still filling in past that. This matches the Speed Index gain. It does not cancel the Largest Contentful Paint regression.
Work with me
Is your first screen late too?
I audit Shopify pages and ship loading work that makes the first screen usable.