Core Web Vitals: the three numbers worth arguing about

Three metrics, three distinct problems

Core Web Vitals get discussed as one score. They are not. Each measures a different failure, and each has a different set of usual suspects.

LCP: how long until the main thing appears

Largest Contentful Paint measures when the biggest above-the-fold element finishes rendering. Target: under 2.5 seconds, and under 2.0 if you want margin.

The usual causes, in the order we find them:

• A hero image served at full resolution with no modern format and no explicit dimensions.
• Render-blocking CSS or a font that delays text paint.
• The LCP element being rendered by JavaScript, so it cannot paint until a bundle downloads, parses and executes.
• A slow server response, which no amount of front-end work will fix.

That last one is worth checking first. If time to first byte is already 800ms, the front end is not your problem.

CLS: how much the page moves while loading

Cumulative Layout Shift measures unexpected movement. Target: under 0.1, and under 0.05 is achievable on almost any site.

Nearly all CLS comes from four things: images and iframes without width and height, web fonts swapping to a differently-sized face, content injected above existing content (banners, cookie notices), and animations of properties that trigger layout.

The fix is usually reserving space, not animating less.

INP: how quickly the page responds to input

Interaction to Next Paint replaced First Input Delay and is meaningfully harder to satisfy, because it measures every interaction rather than only the first. Target: under 200ms.

Bad INP is almost always long JavaScript tasks blocking the main thread: heavy hydration, an expensive event handler, or a third-party script that was added once and never reviewed.

The uncomfortable priority order

If you only do four things:

1. Measure the real site, not localhost. Field data and lab data disagree constantly, and field data is what counts.
2. Fix the LCP element specifically. Not everything on the page, the one element.
3. Put explicit dimensions on every image and reserve space for anything injected.
4. Audit third-party scripts. There is nearly always one nobody remembers adding that costs more than everything you optimised.

Performance work has sharply diminishing returns after those. Chasing the last five points of a Lighthouse score is usually less valuable than fixing a confusing call to action.