The three Core Web Vitals
- LCP (Largest Contentful Paint) — load speed. How fast the main content appears. Target < 2.5s.
- INP (Interaction to Next Paint) — responsiveness. How quickly the page reacts to taps/clicks. Target < 200ms.
- CLS (Cumulative Layout Shift) — visual stability. How much the layout jumps around. Target < 0.1.
They're measured on real users (field data) — that's what counts, not just lab scores.
How to fix LCP
Optimize and properly size images (modern formats, lazy-load below the fold but never the LCP image), use a CDN, reduce render-blocking CSS/JS, and serve fast server responses.
How to fix INP
Break up long JavaScript tasks, ship less JS, defer non-critical scripts, and avoid heavy work on the main thread during interactions.
How to fix CLS
Always set width/height (or aspect-ratio) on images and embeds, reserve space for ads/banners, and avoid inserting content above existing content.
A concrete example: an image with no dimensions. The browser doesn't know how tall it will be, so it reserves no space — and when the image finally loads, everything below it jumps down. That jump is your CLS. Reserving the space fixes it:
<!-- Causes CLS: no size, so text jumps when the image loads -->
<img src="/hero.jpg" alt="Team photo">
<!-- Fixed: the browser reserves the space up front -->
<img src="/hero.jpg" alt="Team photo" width="1200" height="600">Measure both ways
To read your own scores: open PageSpeed Insights, enter your URL, and click Analyze. The top panel ("Discover what your real users are experiencing") is field/CrUX data for LCP, INP, and CLS; scroll to Diagnostics to see which elements to fix. Use PageSpeed Insights / CrUX for field data and Lighthouse for lab debugging. Speed is a ranking factor, lowers ad costs, and lifts conversions — it pays back three ways. GrowMyWebsite's PageSpeed checker tracks all three vitals on mobile and desktop.