Core Web Vitals 2026: new metrics and optimization guide

Core Web Vitals are Google's user experience metrics: Largest Contentful Paint (loading performance), Interaction to Next Paint (responsiveness), and Cumulative Layout Shift (visual stability). They are part of Google's Page Experience signal, which influences Search rankings. While Google has confirmed Core Web Vitals are a ranking factor, they function as a tiebreaker — highly relevant, high-quality content will rank well even with poor CWV, but for comparable-quality pages, better CWV can provide a ranking advantage. Beyond rankings, CWV improvement directly correlates with better user experience, higher engagement, and improved conversion rates.

INP (Interaction to Next Paint) measures the worst interaction delay throughout a user's page session, at the 75th percentile. FID (First Input Delay) only measured the delay for the first interaction on a page — a significant limitation because many poor-responsiveness experiences occur after the page loads, during scroll, click, and form interactions. INP captures the full responsiveness story: if a user clicks a button and the browser takes 800ms to respond because of a long JavaScript task, INP captures this even if the initial page load was fast. Google replaced FID with INP in March 2024.

Long main thread tasks are the primary cause of poor INP. When the browser's main thread is busy executing JavaScript (parsing, evaluating, running event handlers), it cannot process user input — causing interaction delays. Common sources of long tasks include: JavaScript event handlers that do too much synchronous work; third-party scripts (analytics, chat, ad networks) running expensive code; React re-renders that process large component trees; and synchronous localStorage or IndexedDB access during interactions. Use Chrome DevTools' Performance panel to profile interactions and identify which tasks are blocking the main thread during user input events.

scheduler.yield() is a browser API (available in Chrome 115+) that yields control back to the browser from a long-running JavaScript task, allowing the browser to process pending user input (rendering interactions that occurred during the task) before continuing the remaining work. It is a more elegant alternative to setTimeout(fn, 0) for breaking up long tasks. Use it to split event handlers into critical synchronous work (immediate visual feedback) and non-critical work (server sync, analytics, secondary UI updates) that can be yielded before execution.

The fetchpriority="high" attribute (applied to the LCP <img> element) signals to the browser's preload scanner that this image should be fetched at the highest priority, rather than waiting behind other resources. Without this attribute, the browser may discover the LCP image during parsing but deprioritise its fetch behind render-blocking scripts and stylesheets. Adding fetchpriority="high" to LCP images typically reduces LCP by 200–500ms on pages where image discovery lag was the bottleneck, with zero implementation cost beyond adding the attribute.

The Chrome UX Report (CrUX) is a dataset of real user performance metrics collected from Chrome users who have opted in to usage statistics. It provides field data — actual performance experienced by real users on real devices and networks. Lighthouse is a lab tool — it simulates page load under controlled conditions on a single device profile and network speed. CrUX data is what Google uses for Search ranking signals (the CWV data in Google Search Console is CrUX). Lighthouse is useful for diagnosing issues and CI/CD regression detection. Both are important: Lighthouse for development-cycle optimisation, CrUX for understanding actual user experience.

Use the web-vitals JavaScript library (Google's official CWV measurement library) to capture LCP, INP, CLS, FCP, and TTFB from real user sessions and send them to your analytics or monitoring platform. The library provides callbacks when each metric is observed: onINP((metric) => sendToAnalytics(metric)). You can send these measurements to Google Analytics 4 (GA4 automatically processes web-vitals events), a custom endpoint, or a RUM platform like Datadog, Grafana, or New Relic. Segment by device type (mobile vs desktop), connection type, and page template to identify where optimisation will have the most impact.

The "Good" thresholds are: LCP ≤2.5s, INP ≤200ms, CLS ≤0.1. For e-commerce specifically, industry benchmarks suggest: LCP under 2.0s correlates with significantly better conversion rates (Google research shows each 0.1s improvement in LCP improves retail conversion by ~1%); INP under 150ms for key interactions (add to cart, filter application) is the target for best-in-class retail experiences; CLS below 0.05 eliminates the accidental tap frustration common on product pages that load late-rendering elements. Use Google Search Console's Core Web Vitals report segmented by page type (PDP, category, checkout) to identify the highest-impact optimisation opportunities.