Core Web Vitals

LCP, CLS, and INP measure real user experience — not Lighthouse vanity scores.

01 — Purpose

Metrics that reflect real users

Core Web Vitals measure experience quality in the field — not benchmark theatre in a lab.

Users feel slow loading, layout jumps, and sluggish taps. Core Web Vitals (CWV) translate those pains into measurable signals Google uses for ranking and teams use for prioritisation — when interpreted correctly.

See the performance standard for broader budgets and the performance review checklist before release.

02 — Principles

Experience over screenshots

Users experience loading speed, layout stability, and responsiveness — not Lighthouse scores.

  • optimise for real devices, networks, and cache states — not only cable-connected laptops
  • field data (RUM) tells truth; lab data helps debug
  • one metric never tells the whole story — read LCP, CLS, and INP together

03 — Metrics

LCP, CLS, and INP

Know what each metric actually measures.

  • LCP (Largest Contentful Paint) — when main content appears; improve images, fonts, server response, and render-blocking resources
  • CLS (Cumulative Layout Shift) — unexpected layout movement; reserve space for images, ads, and async UI
  • INP (Interaction to Next Paint) — responsiveness to input; reduce main-thread work and long tasks — see JavaScript cost

04 — Avoid

What hurts CWV

Giant payloads and unstable layouts fail users before metrics dashboards update.

  • hero images and fonts that block first paint — see image delivery and font loading
  • layout jumps from ads, embeds, or web fonts without reserved space
  • heavy hydration delaying interaction — see hydration costs
  • chasing lab scores while field data stays poor

05 — Close

Metrics matter because people matter

Stable, fast, responsive pages feel trustworthy.

Set budgets for LCP, CLS, and INP on key templates. Regressions should fail CI or block release — same discipline as accessibility or security checks.

Related: JavaScript cost, performance standard.