Core Web Vitals

Core Web Vitals are three metrics Google defined to describe how a page feels to a visitor. Each measures a different part of the experience.

Largest Contentful Paint (LCP) is about loading. It records when the largest piece of content in the viewport, usually a hero image or heading, gets painted. It answers “when did the page look ready?”

Interaction to Next Paint (INP) is about responsiveness. For every click, tap, and key press it measures the time from the input to the next frame on screen, then reports a value near the worst end for the whole visit. It answers “when I do something, how long until I see a result?”

Cumulative Layout Shift (CLS) is about visual stability. It adds up every unexpected movement of visible content. It answers “did things jump around while I was reading?”

Why three numbers

One metric can’t stand in for another. A page can paint its hero in half a second and then take a full second to respond to a click. Another can respond instantly while images push the article down as they load.

So I look at all three before deciding what to work on. The worst one tells you where the pain is.

Field data and lab data again

The numbers Google uses come from real Chrome visits. That’s field data: slow phones, bad networks, cold caches, users who click before the page is ready.

A recording in DevTools is lab data, one visit under conditions you chose. Its value is that you can inspect it and trace a bad number to the exact request or task that caused it.

Field data tells you there’s a problem. Lab data tells you why.

Connect a metric to what the browser did

Open the Performance panel on a page you care about. Before recording, it shows live LCP, INP, and CLS values. Interact and watch INP update.

Then record a reload. The recording marks LCP on the timeline, so you can click it and see which element it was and what came before it. Layout shifts get their own track. Select one and DevTools highlights the elements that moved.

The metric names the experience. The trace explains it.

About thresholds

Google publishes “good” thresholds: right now 2.5 seconds for LCP, 200 milliseconds for INP, and 0.1 for CLS. Check the current Web Vitals documentation when you set targets, because definitions change.

Use those lines for monitoring, not as the goal. Going from 2.6 to 2.4 seconds looks like a win on a dashboard and changes nothing for the visitor. What matters is that the page feels better, and that the slow end of your field data moves.