Core Web Vitals

Main Hero

Definition

Field-measured UX metrics for loading, responsiveness, and visual stability.

Advanced

Largest Contentful Paint measures loading speed, Interaction to Next Paint measures input responsiveness, and Cumulative Layout Shift measures visual stability. Benchmarked at the 75th percentile of real user visits.

Why it matters

Correlates with higher conversions and supports organic search performance.

Use cases

  • Performance improvement program
  • Release quality gates
  • Migration or redesign checks

Metrics

  • LCP under 2.5 seconds
  • INP under 200 milliseconds
  • CLS under 0.1

Issues

  • Unoptimised hero images and fonts
  • Layout shifts from ads or embeds without reserved space

Example

Preload the hero image, self-host critical fonts with font-display swap, and set explicit width and height for media.