Core Web Vitals: LCP, CLS & INP
Core Web Vitals are the three metrics Google uses to measure real-world user experience. They directly influence search rankings and are what actually matters when someone asks “is this site fast?”
| Metric | What it measures | Good | Poor | Common fixes |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Time until the largest visible element renders | ≤ 2.5s | > 4s | Preload LCP image, inline critical CSS, use fetchpriority="high", fast server response |
| CLS (Cumulative Layout Shift) | How much the layout shifts unexpectedly during load | ≤ 0.1 | > 0.25 | Set explicit width/height on images, reserve space for dynamic content, use font-display: swap with size-adjust |
| INP (Interaction to Next Paint) | Worst-case latency from interaction to visual response | ≤ 200ms | > 500ms | Break up long tasks with scheduler.yield(), debounce handlers, move heavy work to web workers |
Google measures these on real Chrome users via the Chrome UX Report (CrUX). Your Lighthouse score in DevTools is lab data — useful for debugging, but the field data from CrUX is what determines your pass/fail status in Search Console.
INP replaced FID (First Input Delay) in March 2024. Where FID only measured the first interaction’s input delay, INP tracks all interactions throughout the page’s lifecycle and reports roughly the p98 worst case — a much better reflection of how responsive the page actually feels.