ProductionIntermediate5h

Core Web Vitals.

LCP, INP, CLS — the metrics Google and your users feel.

What is it?

Core Web Vitals are Google's three user-experience metrics: LCP (how fast the main content appears), INP (how fast the page responds to input), and CLS (how much the layout jumps around). They're measured on real users, factor into search ranking, and map directly to how fast a site feels.

Why it matters

Vitals are where "frontend developer" meets "the business cares." A slow LCP loses mobile conversions. A janky INP makes the product feel cheap. Hiring teams ask "how would you improve LCP?" and a real answer — not "add a loading spinner" — separates candidates.

What to learn

  • LCP: what element counts, how to find it, how to speed it up
  • INP (replaced FID in 2024): interaction latency, long tasks
  • CLS: layout shift sources — images without dimensions, injected content, fonts
  • Field data (CrUX, real users) vs lab data (Lighthouse)
  • The "good / needs improvement / poor" thresholds for each
  • Common fixes: image optimization, font loading, code splitting, reserving space

Common pitfall

Optimizing lab scores (Lighthouse) while field scores (real users) stay bad. Lighthouse runs on a simulated fast device; your users are on a three-year-old Android on spotty 4G. Always check CrUX / real-user monitoring, not just the green Lighthouse number.

Resources

Primary (free):

Practice

Run PageSpeed Insights on a real site you built. Note the field LCP, INP, and CLS. Pick the worst one and fix it — reserve image space for CLS, preload the LCP image, or break up a long task for INP. Re-measure. Done when one metric moves from "poor" to "good."

Outcomes

  • Identify the LCP element on any page and name what's slowing it.
  • Distinguish field data from lab data and know which matters.
  • Fix a layout shift by finding its source.
  • Break up a long task to improve INP.
Back to Frontend roadmap →