Web Vitals and Measuring Real User Performance

Learn the key Core Web Vitals metrics relevant to React apps and how to measure them in production.

Core Web Vitals are a set of standardized metrics Google defines to quantify real-world user-perceived performance: LCP (Largest Contentful Paint — how long until the largest visible element renders), INP (Interaction to Next Paint — responsiveness of interactions, replacing the older First Input Delay metric), and CLS (Cumulative Layout Shift — how much visible content unexpectedly shifts around during load). These matter both for user experience and, for public sites, as a factor in search ranking.

Core Web Vitals are like a restaurant's real diner satisfaction surveys collected from actual customers over time, rather than a single taste test performed once by the head chef in an empty kitchen — real, varied conditions (different devices/networks, like different customers' moods and expectations) surface problems a controlled test would never catch.

Key Concepts

React apps have specific patterns that commonly hurt these metrics: large client-side JavaScript bundles delaying interactivity (affecting INP indirectly through slow hydration), images or ads loading without reserved space causing layout shift (hurting CLS), and heavy client-side rendering delaying when meaningful content appears (hurting LCP) — which is part of the motivation behind server-side rendering and streaming approaches like React Server Components.

The web-vitals JavaScript library provides a small, official way to measure these metrics directly from real users' browsers in production (not just synthetic lab tests) and report them to an analytics endpoint, since lab-measured performance on a fast development machine often doesn't reflect what real users on varied devices and networks actually experience.

web-vitals

Interviewers exploring performance-mindedness ask candidates to name the Core Web Vitals and connect each one to a concrete React-specific cause and mitigation — for example, connecting CLS to images/ads without reserved dimensions, or LCP to render-blocking JavaScript and unoptimized images, rather than reciting the metric names without understanding what drives them.