EasyCore Web Vitals📖 Theory Question

What are the three Core Web Vitals and what does each measure?

💡

Hint

LCP (loading), INP (interactivity), CLS (visual stability) — Google's user-experience signals that affect search ranking

Full Answer

Core Web Vitals are Google's three standardized metrics for measuring real-world user experience, incorporated into Google's Search ranking since 2021.

LCP — Largest Contentful Paint

  • Measures: how long it takes to render the largest visible image or text block in the viewport.
  • What users feel: "How fast does the main content appear?"
  • Good: ≤ 2.5s | Needs improvement: ≤ 4s | Poor: > 4s

INP — Interaction to Next Paint (replaced FID in 2024)

  • Measures: the latency of the worst interaction (click, keypress, tap) across the entire page visit.
  • What users feel: "Does the page respond quickly when I interact?"
  • Good: ≤ 200ms | Needs improvement: ≤ 500ms | Poor: > 500ms

CLS — Cumulative Layout Shift

  • Measures: unexpected visual shifts of page elements during the entire lifetime of the page.
  • What users feel: "Do things jump around as I try to click?"
  • Good: ≤ 0.1 | Needs improvement: ≤ 0.25 | Poor: > 0.25

More Core Web Vitals Questions

EasyWhat are the most common causes of poor LCP and how do you fix them?→EasyWhat causes CLS (Cumulative Layout Shift) and how do you fix it?→EasyWhat is INP (Interaction to Next Paint) and how does it differ from FID?→EasyHow do you measure Core Web Vitals in a production React app?→

Practice this in a timed sprint →

5 free questions, no signup required

⚡ Start Sprint