Core Web Vitals 2026: LCP, INP, and CLS Thresholds

Google evaluates website user experience through three main metrics, supported by server-level metrics such as Time to First Byte (TTFB). Each metric contains three performance ratings: Good, Needs Improvement, and Poor. Google calculates these metrics independently for mobile and desktop visits using real-user field data collected by the Chrome User Experience Report.

• Largest Contentful Paint (LCP): Good is 2.5 seconds or less; Poor is greater than 4.0 seconds.
• Interaction to Next Paint (INP): Good is 200 milliseconds or less; Poor is greater than 500 milliseconds.
• Cumulative Layout Shift (CLS): Good is 0.1 or less; Poor is greater than 0.25.
• Time to First Byte (TTFB): Good target is 0.8 seconds or less to support initial response delivery.

To earn a passing mark in Search Console reports, 75 percent of page visits recorded during a 28-day window must hit the Good threshold for every metric. If even one metric lands in the Needs Improvement or Poor category at the 75th percentile, the URL fails the overall assessment.

Device capabilities and network speeds vary substantially between desktop computers and mobile devices. Smartphone CPUs are generally less powerful than desktop processors, and mobile network latency changes based on signal strength. Measuring performance separately prevents strong desktop metrics from hiding poor mobile user experiences.

The 75th percentile threshold ensures that the majority of visitors receive a performant web experience. If 74 percent of mobile sessions load in under 2.5 seconds but 26 percent experience longer wait times, the page falls into the Needs Improvement bracket. This approach encourages technical teams to build resilient sites that work consistently on lower-end devices and slower connections.

Largest Contentful Paint tracks the time required to render the main content element in the user viewport, such as a hero banner image, video thumbnail, or large text block. High LCP values usually stem from slow server response times, render-blocking CSS or JavaScript, and delayed asset downloading. Target a Time to First Byte (TTFB) of 0.8 seconds or less to give the browser enough time to load critical assets.

In a typical e-commerce store with high-resolution imagery, the hero image on product pages frequently serves as the LCP element. When web pages apply lazy loading to above-the-fold media, browsers delay downloading those assets until JavaScript completes execution. To accelerate loading, remove lazy loading from main header images and apply the fetchpriority=”high” attribute directly to the HTML tag.

Optimizing CSS delivery also improves LCP times. Extraneous CSS rules block main-thread rendering before the browser can draw the main visual block. Extract critical CSS required for initial viewport rendering into inline style tags, while deferring non-critical external stylesheets.

Interaction to Next Paint assesses overall page responsiveness by measuring the time between user actions—such as tapping a button or entering text—and the subsequent visual frame update. High INP values occur when long tasks execute on the main browser thread, preventing immediate UI rendering.

To keep INP under 200 milliseconds, front-end code must avoid executing long tasks exceeding 50 milliseconds. Developers can split monolithic functions into smaller asynchronous execution blocks using native API options like setTimeout or scheduler.yield(). This allows the browser main thread to process user events quickly between execution steps.

Third-party scripts like live chat widgets, analytics trackers, and marketing pixels often trigger unexpected main-thread delays. In a typical site audit, running multiple third-party tags simultaneously blocks thread execution during button clicks. Audit external scripts regularly, load non-essential tags asynchronously, or push background calculations into web workers.

Cumulative Layout Shift quantifies visual stability by measuring how often layout elements shift unexpectedly during page rendering. Layout shifts occur when elements load asynchronously without pre-reserved space, causing existing content to move suddenly.

The primary cause of high CLS scores is missing layout dimensions on images, embed containers, and dynamically loaded advertisements. When the browser lacks pre-defined dimensions, it cannot calculate page geometry until assets finish downloading, resulting in reflows.

• Specify explicit width and height attributes on all image and video HTML elements, or define explicit aspect ratios using CSS.
• Reserve dedicated layout containers for dynamic content like advertisement banners and notification bars to prevent surrounding elements from jumping.
• Use font-display: swap or font-display: optional alongside font preloading to eliminate text reflow shifts caused by web font loading delays.
• Avoid injecting new HTML content above existing visible elements after page rendering, unless explicitly initiated by direct user input.