Definition
Core Web Vitals are three Google-defined metrics for a page's perceived quality: LCP (Largest Contentful Paint) for load speed, INP (Interaction to Next Paint) for responsiveness, CLS (Cumulative Layout Shift) for visual stability.
The targets are clear: LCP under 2.5 seconds, INP under 200 milliseconds, CLS under 0.1. Measurement uses real user data from the Chrome User Experience Report, not a lab - which separates workshop optimisation from reality.
Typical levers: images in modern formats (AVIF/WebP) with fixed dimensions, self-hosted fonts instead of render-blocking CDN calls, less JavaScript in the critical path, and reserved space for late-loading elements to prevent layout shifts.
Why it matters
Core Web Vitals have been an official Google ranking factor since 2021 - and a conversion driver at the same time: every extra second of load time measurably costs conversions, especially on mobile.
In practice
- 01A render-blocking Google Fonts call with display:block delays LCP - self-hosted fonts with font-display: swap fix it.
- 02Images without fixed width and height cause CLS because the browser only knows the space after loading.
- 03Heavy JavaScript on the main thread worsens INP - every interaction feels sluggish.
