← Lessons

quiz vs the machine

Gold1400

Frontend

Core Web Vitals

The three user centered metrics for loading, stability, and responsiveness.

5 min read · core · beat Gold to climb

Measuring real experience

Core Web Vitals are three metrics that capture how a page feels to a real user, not just lab timings.

The three metrics

  • Largest Contentful Paint measures loading: when the biggest visible element finishes rendering. Aim under two and a half seconds.
  • Cumulative Layout Shift measures visual stability: how much content jumps around unexpectedly. Aim under one tenth.
  • Interaction to Next Paint measures responsiveness: how quickly the page reacts to input across the visit.

How to improve each

  • Improve LCP by optimizing the hero image, fonts, and server response.
  • Improve CLS by reserving space for images and ads so nothing jumps.
  • Improve INP by breaking up long tasks so the main thread can respond.

These are measured in the field from real visitors, so improvements must hold on real devices and networks.

Key idea

LCP tracks loading, CLS tracks visual stability, and INP tracks responsiveness, so optimizing all three improves the experience real users feel.

Check yourself

Answer to earn rating on the learn ladder.

1. What does Cumulative Layout Shift measure?

2. Which metric is about responsiveness to input?

3. A good way to improve LCP is