From 13.6 seconds to 2.7: fixing a slow Largest Contentful Paint

Google’s PageSpeed Insights gave the Hank Marvins homepage an odd result on mobile. First Contentful Paint was 1.1 seconds, blocking time was zero, layout shift was zero, and yet Largest Contentful Paint (LCP) was 13.6 seconds. Nothing on the page felt slow, so what was going on?

This is a write-up of how I tracked it down, because the cause is common on modern homepages with animated heroes, and the fix is small once you understand it.

What Largest Contentful Paint measures

LCP is the time until the biggest piece of content in the first screen is painted: usually a hero image or a large heading. It’s one of Google’s Core Web Vitals, and Google treats anything over 4 seconds on mobile as poor. It matters because it’s a good stand-in for “when does the page look ready?”

Step 1: find the LCP element

Don’t guess. PageSpeed Insights names the element in its “LCP breakdown”. Here it wasn’t an image at all: it was the hero headline, “Proper takeaway, done properly.” The breakdown showed no delay loading a resource, just an 980 millisecond “element render delay” in the lab run. The headline was waiting for something before it appeared.

Step 2: work out what it was waiting for

The homepage hero is a scroll-driven film: about 150 still frames of a burger coming apart, drawn to a canvas as you scroll. Two things combined:

The headline was hidden until JavaScript ran. Its fade-in class was added by the script, so the text couldn’t be painted until the script had loaded and run.
The film frames started downloading straight away, before the headline had appeared.

On a fast connection that costs a fraction of a second. But PageSpeed doesn’t just time the page on a fast connection: it records the real load, then simulates a slow 4G phone from it. Every request that started before the LCP is treated as something the LCP depended on. With several megabytes of film frames requested before the headline painted, the simulation concluded the headline couldn’t appear until they’d all downloaded over slow 4G. Hence 13.6 seconds.

Step 3: the fix

Two small changes, neither of which changes how the page looks:

Render the headline in the HTML. The opening block of text is now visible from the first paint, instead of waiting for JavaScript to switch it on. A loading screen covers the film area for its first moment either way, so there’s no visible difference.
Start the film download only once the headline has painted. The page watches for its own Largest Contentful Paint, and the moment the heading is on screen, it begins fetching the frames. There’s a safety net too: if the browser can’t report LCP, the film starts after a moment anyway.

The result

Measured live on PageSpeed Insights afterwards:

Mobile: Largest Contentful Paint 2.7 seconds (from 13.6), performance score 96.
Desktop: Largest Contentful Paint 0.5 seconds, performance score 100.
No layout shift and no blocking time on mobile, and the film looks and moves exactly as before.

What to take from it

Read the LCP element before optimising images. The slow thing here wasn’t an image at all.
Don’t hide your main heading behind JavaScript. Fade-ins are fine, but the text should be in the page from the start.
Heavy media should wait for the important content. Films, image sequences and 3D models can load a moment later without anyone noticing, and your scores will reflect what people actually see.
Test on mobile, not just desktop. Desktop scored 100 throughout; only the mobile test exposed the problem.

Common questions

Does page speed affect Google rankings?

Core Web Vitals are one of many signals Google uses. They rarely outweigh relevance, but a slow mobile page also loses visitors before they read a word, which costs enquiries whatever your ranking.

Is my site slow?

Run your homepage through PageSpeed Insights on the mobile setting and look at the LCP figure and the element it names. If you’d like me to look for you, I’ll include it in a free website review.

Want your site checked?

Speed work like this is part of every site I build, and I can fix it on an existing site too. Small jobs without a care plan are £50 an hour, and anything bigger is quoted before I start. Get in touch or call 0191 722 1678.