Core Web Vitals in the Real World: What Actually Moves the Needle

Core Web Vitals have been a ranking factor long enough that most sites have taken a shot at optimizing them. After running CWV work across several client sites this year, here is what moved the needle, what looked like it would help but did not, and the tradeoffs that are worth understanding.

The Three Metrics

CWV tracks three main numbers:

• LCP (Largest Contentful Paint): when the biggest element is visible
• INP (Interaction to Next Paint): how responsive the page feels to clicks
• CLS (Cumulative Layout Shift): how much the page jumps around during loading

Good scores are LCP under 2.5s, INP under 200ms, CLS under 0.1. Most sites fail at least one. Most sites that fail fail LCP.

What Moved LCP

The single biggest LCP improvement I made was preloading the hero image. One HTML line:

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

That moved LCP from 4.2s to 1.8s on a representative page. Nothing else I tried came close. The image was going to load eventually; preload just tells the browser to start earlier.

Other big LCP wins:

• Use modern image formats (WebP, AVIF)
• Size images correctly (not a 4000px hero on a phone)
• Cache headers that let the CDN serve the edge copy

What Did Not Move LCP

What did not help much:

• Fancy code-splitting (helps total load, rarely helps LCP specifically)
• Deferring the JS bundle (unless it was blocking the LCP element)
• Reducing the DOM size (hard to do, small payoff)

INP: The Quiet Killer

INP is newer and more punishing than CWV's previous interactivity metric. The thing that hurt INP on my sites was third-party scripts: analytics, chat widgets, ad tags. Anything that hooks into clicks and does CPU work before returning.

The fix is to load third-party scripts with defer or async, and use requestIdleCallback for work that does not need to happen immediately.

CLS: Low Effort, Low Return

CLS is usually easy to fix (set explicit dimensions on images and embeds) but it is also the metric that matters least for ranking. Fix it because it is cheap, not because it will change your traffic.

The Tradeoff No One Talks About

Aggressive CWV optimization makes the site feel slower to first paint. Preloading the LCP image delays other resources. Deferring scripts delays interactivity. The fast-looking numbers sometimes hide a less fluid experience. Monitor the real user experience (RUM), not just the lab scores.

The Web Vitals documentation explains each metric in detail.