Google’s Core Web Vitals are three performance metrics that measure real user experience โ not theoretical performance scores โ and they carry direct weight in Google’s ranking algorithm through the Page Experience signal. Understanding what they measure and what actually improves them is essential for anyone responsible for a website’s organic visibility and user experience.
Largest Contentful Paint (LCP): Perceived Load Speed
LCP measures the time from navigation start to when the largest visible content element in the viewport has finished rendering. In practice, this is typically the hero image, a large text heading, or a video poster image. Google’s threshold for a “good” LCP is 2.5 seconds; above 4 seconds is “poor.”
The most impactful improvements for LCP are: removing render-blocking resources (synchronous scripts and stylesheets in the head that prevent rendering from starting), preloading the LCP image with a link rel=”preload” tag so the browser discovers it immediately rather than after parsing CSS, serving images in modern formats (WebP, AVIF) at appropriate dimensions, and ensuring the server responds quickly to the initial HTML request (TTFB under 600ms).
Cumulative Layout Shift (CLS): Visual Stability
CLS measures the sum of all unexpected layout shifts that occur during the page’s lifetime. A layout shift happens when a visible element changes position without user interaction โ the classic example is text jumping down when an image above it loads without reserved space, or a button moving when a banner appears above it after the page has already rendered.
The primary fix for CLS is dimension reservation: images and video elements should always have explicit width and height attributes (or a CSS aspect-ratio) so the browser allocates space for them before they load. Dynamically injected content should be inserted below the current viewport position or in reserved space. Web fonts cause CLS when the fallback font renders at different dimensions from the loaded font โ using font-display: optional or size-adjust with system fonts mitigates this.
Interaction to Next Paint (INP): Responsiveness
INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. Where FID only measured the delay before the browser processed the first interaction, INP measures the full duration of all interactions during the page lifecycle โ from input event to the next visual update after the interaction. The threshold for “good” is 200ms; above 500ms is “poor.”
Poor INP is almost always caused by long tasks on the main thread blocking the browser from responding to user input. JavaScript execution that takes more than 50ms is classified as a long task. Improvements include breaking long tasks with scheduler.yield(), reducing JavaScript bundle size, deferring non-critical scripts, and using web workers for CPU-intensive work that does not need main thread access.
Measurement and Tooling
Chrome DevTools’ Performance panel and Lighthouse provide lab measurements โ useful for diagnosing issues during development. Field data from real users is more authoritative and is available through Chrome User Experience Report (CrUX), PageSpeed Insights, and Google Search Console’s Core Web Vitals report. Discrepancies between lab and field data are common and usually explained by differences in network conditions, device capabilities, and the specific user journeys that field data captures.