Core Web Vitals
Google's three user-experience metrics that directly affect search ranking. Measure real users, not lab tests, where you can.
1 credit
The metrics
3 itemsLCP (Largest Contentful Paint)
Time until the biggest above-fold element renders. Good: < 2.5s. Poor: > 4s.INP (Interaction to Next Paint)
Worst interaction response during a visit. Good: < 200ms. Poor: > 500ms. Replaced FID in 2024.CLS (Cumulative Layout Shift)
How much visible content jumps around. Good: < 0.1. Poor: > 0.25.Common fixes
7 itemsLCP: hero image slow
Preload, serve WebP/AVIF, use responsive `<img srcset>`, `fetchpriority=high`LCP: server slow
Cache HTML at edge, reduce DB queries in the render pathINP: jank on click
Break long tasks with `scheduler.yield()` or `setTimeout`; useTransition for non-urgent updatesINP: heavy JS bundle
Code-split, defer non-critical JS, move work to a Web WorkerCLS: image / iframe without size
Set `width` + `height` attributes — browser reserves spaceCLS: web fonts cause reflow
`font-display: optional` or preload + `size-adjust`CLS: dynamic content
Skeleton placeholders with reserved heightHow to measure
- **Field data** (real users): Chrome User Experience Report (CrUX), your own RUM with `web-vitals` library.
- **Lab data** (repro on demand): Lighthouse, PageSpeed Insights, WebPageTest.
- Monitor p75 — Google uses the 75th percentile of your traffic for ranking, not averages.