Core Web Vitals

Core Web Vitals isolate three distinct dimensions of perceived performance. Each has a "good", "needs improvement", and "poor" threshold, evaluated on the 75th percentile of page loads across mobile and desktop, using real Chrome user data (the Chrome User Experience Report, or CrUX).

• Largest Contentful Paint (LCP) measures loading: the time until the largest visible element (hero image, heading block, video poster) is rendered in the viewport.
• Interaction to Next Paint (INP) measures responsiveness: the latency between a user interaction (click, tap, key press) and the next visual update. INP replaced First Input Delay (FID) as a Core Web Vital in March 2024.
• Cumulative Layout Shift (CLS) measures visual stability: how much visible content shifts unexpectedly during the page lifecycle, typically caused by images without dimensions, injected ads, or late-loading fonts.

Core Web Vitals are part of Google's page experience signals and act as a tie-breaker: between two pages of comparable relevance, the one delivering a better experience can rank higher. They do not override content relevance, but poor scores can suppress otherwise strong pages, especially on mobile.

A critical distinction governs how they are evaluated:

• Field data (lab vs. real users): Google ranks using field data from CrUX, collected from real Chrome visitors over a rolling 28-day window. This is the data that affects SEO.
• Lab data: tools like Lighthouse and PageSpeed Insights simulate a single load in a controlled environment. Useful for debugging, but lab and field scores often diverge because real users have varied devices and networks.
• Reporting: the Core Web Vitals report in Google Search Console groups URLs by status and is the canonical view of how Google sees a site.

Because field data is percentile-based and lagging, fixes do not appear instantly; the report reflects improvements only after enough real-user sessions accumulate.

Each metric maps to a recognisable set of technical root causes, which makes triage straightforward once you know which one is failing.

• Poor LCP: slow server response time (high TTFB), render-blocking CSS and JavaScript, unoptimised or non-preloaded hero images, missing CDN. Levers: preload the LCP resource, compress and serve modern image formats, reduce server latency.
• Poor INP: long JavaScript tasks blocking the main thread, heavy third-party scripts, costly event handlers. Levers: break up long tasks, defer non-critical scripts, minimise main-thread work.
• Poor CLS: images and embeds without explicit width and height, ads or banners injected above existing content, web fonts causing a layout reflow. Levers: reserve space with size attributes or CSS aspect-ratio, avoid inserting content above the fold after load.

For server-rendered stacks delivering complete HTML, LCP and CLS are often the most actionable wins, while INP becomes the priority on interaction-heavy interfaces with significant client-side JavaScript.