Performance and DevTools

Core Web Vitals

Use LCP, INP, and CLS as complementary signals for loading, responsiveness, and visual stability.

8 minute lesson

~~~

Core Web Vitals describe three different parts of a visitor’s experience:

  • Largest Contentful Paint (LCP) reports when the largest eligible piece of content in the viewport is painted during loading.
  • Interaction to Next Paint (INP) summarizes the latency of a page’s interactions, from input through the next presented frame.
  • Cumulative Layout Shift (CLS) scores unexpected movement of visible content.

One number cannot substitute for another. A page can show its hero quickly and still respond poorly to clicks. It can respond quickly while images shift the article under the reader.

Field and lab measurements answer different questions. Field data aggregates real visits and includes device, network, cache, geography, and behavior differences. A lab run is controlled and inspectable, making it useful for tracing a bad result to network or main-thread work.

Use the Performance panel’s live metrics or a recording to connect a metric to page activity. Locate the LCP candidate, interact with the page while watching responsiveness, and inspect layout-shift entries. The metric identifies the experience; the trace supplies the explanation.

Published “good” thresholds are useful for monitoring, but do not optimize only to cross a line. Check the current Web Vitals documentation when setting targets, because definitions and tooling evolve. More importantly, validate that the page feels better and that field distributions improve, especially for slower visitors.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →