A beginner's guide to Core Web Vitals

The three metrics

LCP (Largest Contentful Paint) measures how quickly the largest element on the page renders. Target: under 2.5s.

INP (Interaction to Next Paint) measures responsiveness to user input. Target: under 200ms.

CLS (Cumulative Layout Shift) measures visual stability. Target: under 0.1.

Quick wins

1. Preload your hero image.
2. Serve images in WebP/AVIF and set explicit width/height.
3. Defer non-critical JavaScript.
4. Use a CDN.
5. Avoid injecting layout above existing content after load.

Measure

Chrome DevTools Lighthouse works locally. For real-world data, check the Core Web Vitals report in Google Search Console.