August 11, 2026 · Performance · Frontend
Core Web Vitals in production: what actually moves LCP, INP, and CLS
Lighthouse gives you a score. It doesn't tell you which of the twenty things it flagged will actually move the number a real visitor experiences. Here's what does, in rough order of impact.
A Lighthouse report can list twenty opportunities and give almost no sense of which two or three will actually change what a real visitor on a real connection experiences. In practice, a small number of changes account for most of the movement on each Core Web Vital — the rest is diminishing returns.
Largest Contentful Paint
- The single biggest lever is usually the hero image or largest above-the-fold element: correct sizing, a modern format, and `priority`/preload so it isn't discovered late
- Render-blocking CSS and fonts delay LCP more than almost anything else — inline the critical CSS, and use `font-display: swap` so text isn't invisible while a webfont loads
- A slow server response time sets a floor under every other optimisation; no client-side fix compensates for a backend that takes 2 seconds to respond
Interaction to Next Paint
- Long JavaScript tasks on the main thread are the direct cause — break up expensive work with `requestIdleCallback`, chunking, or moving it off the main thread entirely
- Third-party scripts are a disproportionate contributor here: a chat widget or analytics tag can single-handedly own the main thread during the exact window a user tries to interact
- Over-eager event handlers — a scroll or input listener doing real work on every single event rather than throttled or debounced — show up directly in INP measurements
Cumulative Layout Shift
- Images and embeds without explicit width/height (or aspect-ratio) are the most common cause by far — the browser can't reserve space until the asset loads, so it shifts everything below it
- Content injected above existing content — a banner, a cookie notice, a late-loading ad — is the second most common cause, and the fix is almost always to reserve the space up front
- Web fonts that load with a different metric shape than the fallback cause a visible reflow when they swap in; matching fallback font metrics closes most of that gap
None of this is exotic engineering — it's mostly about sequencing what loads when, and reserving space for what hasn't loaded yet. The value of a focused audit over a generic Lighthouse pass is prioritising the two or three fixes that actually move the visitor-facing number, instead of working down a twenty-item list in the order a tool happened to print it.