Core Web Vitals

Last updated:

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.

Field data beats lab runs for “what users feel,” but not all field data is the same audience. The Chrome User Experience Report (CrUX) behind PageSpeed Insights field scores and Search Console CWV comes from Chrome users who opted in to sharing browsing statistics — not from Edge or other Chromium browsers, Firefox, Safari, or the long tail of clients your site may serve. Use CrUX as a large, useful sample; use your own real-user monitoring (RUM) to see your actual traffic mix.

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
  • prioritise field data over lab for what to fix first — your RUM shows your users; public CrUX/Lighthouse field scores are Chrome opt-in only
  • 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
  • treating CrUX or lab scores as the whole user base — Safari, Firefox, and other browsers need your own RUM or testing
  • chasing lab scores while real-user metrics stay poor

05 — Close

Metrics matter because people matter

Stable, fast, responsive pages feel trustworthy.

Set budgets for LCP, CLS, and INP on key templates — see performance budgets. Define current, target, and aspirational levels in performance planning, then schedule improvements in performance roadmaps. Regressions should fail CI or block release — same discipline as accessibility or security checks.

Related: JavaScript cost, performance standard.