Technical
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.
RELATED READING
The Consulting Shift I Am Making In Year Two
After a year of writing and building, my consulting practice is changing shape. Shorter engagements. Sharper outcomes.
ReadThe Frontend Shift: Shipping Less JavaScript In Year Two
A year ago I reached for Next.js for everything. This year I often reach for nothing.
ReadThe Serverless Lesson I Would Write On A Sticky Note
After a year of shipping serverless projects, one rule explains most of the wins and all of the losses.
Read