Core Web Vitals

Core Web Vitals are the three metrics Google uses to grade a page's real-world experience. Each captures a different feeling: LCP — does it *look* loaded fast? CLS — does it hold still or jump around? INP — does it *answer* my taps quickly? A page only passes when *all three* are good.

LCP — loading (Largest Contentful Paint)

LCP is the moment the *largest visible element* — often the hero image or headline — finishes rendering. It's the honest answer to 'when did the page look loaded?', better than older paint metrics that fire before the main content arrives. Slow LCP usually comes from a slow server, render-blocking CSS/JS, or a heavy unoptimized hero image.

CLS — visual stability (Cumulative Layout Shift)

CLS is a *unitless* score of how much visible content unexpectedly jumps as the page loads — you go to tap a button and an image loads above it, shoving everything down. Each shift adds to the score. The usual culprits: images and ads without reserved space, and late-injected banners. The fix is to reserve space up front (set width/height or aspect-ratio on media).

INP — interactivity (Interaction to Next Paint)

INP measures the delay from a tap or click to the *next frame the browser draws* in response — how snappy the page feels. In March 2024 it replaced FID (First Input Delay) as a Core Web Vital: FID only timed the *first* interaction's input delay, while INP watches *all* interactions across the whole visit and reports a near-worst one, including the time to run the handler and repaint. Long-running JavaScript on the main thread is the main cause; break up long tasks to fix it.

The thresholds

Metric  Measures            Good       Needs work    Poor
------  ------------------  ---------  -----------   --------
LCP     loading             <= 2.5 s    <= 4.0 s       > 4.0 s
CLS     visual stability    <= 0.1      <= 0.25        > 0.25
INP     interactivity       <= 200 ms   <= 500 ms      > 500 ms