Core Web Vitals: LCP, INP, and CLS Explained for 2026

What are Core Web Vitals?

Core Web Vitals are a set of metrics defined by Google that measure real-world user experience across three dimensions: loading performance, interactivity, and visual stability. They form part of Google's page experience signals and directly influence search rankings.

As of 2024, there are three Core Web Vitals:

• LCP (Largest Contentful Paint): measures loading performance
• INP (Interaction to Next Paint): measures interactivity and responsiveness. INP replaced FID (First Input Delay) in March 2024.
• CLS (Cumulative Layout Shift): measures visual stability

Google sets threshold targets for each metric. Pages that pass all three thresholds are considered to provide a good page experience.

LCP: Largest Contentful Paint

LCP measures how long it takes for the largest visible content element to fully render in the viewport. This is typically a hero image, a large heading, or a video poster.

Thresholds:

• Good: 2.5 seconds or less
• Needs improvement: 2.5 to 4.0 seconds
• Poor: over 4.0 seconds

Common causes of poor LCP:

• Large, unoptimised hero images not served in modern formats (WebP, AVIF)
• Images not preloaded with <link rel="preload">
• Slow server response time (high TTFB)
• Render-blocking CSS or JavaScript that delays page rendering
• Absence of a CDN for static assets

How to improve LCP:

• Serve hero images in WebP or AVIF at the correct display size
• Add <link rel="preload" as="image"> for the LCP image so it starts loading as early as possible
• Ensure your server or CDN responds in under 600ms
• Eliminate render-blocking resources or mark them async or defer

INP: Interaction to Next Paint

INP measures the responsiveness of your page to user interactions. It captures all interactions (clicks, taps, keyboard input) during a visit and reports the worst-case latency from interaction to the next visual update. INP replaced FID because FID only measured the delay before the browser began processing an interaction, not how long the full visual response took.

Thresholds:

• Good: 200 milliseconds or less
• Needs improvement: 200 to 500 milliseconds
• Poor: over 500 milliseconds

Common causes of poor INP:

• Long-running JavaScript tasks on the main thread that block the browser from responding to input
• Heavy event handlers doing too much synchronous work on interaction
• Third-party scripts (analytics, chat widgets, ad scripts) consuming the main thread
• Excessive DOM size making updates slow

How to improve INP:

• Break long JavaScript tasks into smaller chunks using setTimeout or scheduler.postTask()
• Debounce or defer expensive operations triggered by user input
• Audit and reduce third-party script impact using Chrome DevTools coverage
• Profile with the Chrome DevTools Performance panel to identify and resolve long tasks

CLS: Cumulative Layout Shift

CLS measures visual instability: how much page content unexpectedly shifts during the page lifecycle. Layout shifts are disorienting for users and can cause accidental taps when content moves just as a user goes to interact with it.

Thresholds:

• Good: 0.1 or less
• Needs improvement: 0.1 to 0.25
• Poor: over 0.25

Common causes of poor CLS:

• Images and videos without explicit width and height attributes, causing reflows when they load
• Ad slots without reserved space that expand on load
• Web fonts causing a flash of unstyled text that shifts text position
• JavaScript injecting content above existing page content

How to improve CLS:

• Always set width and height attributes on <img> and <video> elements
• Reserve space for ads, embeds, and dynamic content using CSS min-height or aspect-ratio
• Use font-display: optional or preload critical fonts to prevent layout-shifting text

How to measure Core Web Vitals

There are two types of data: lab data (measured in controlled test conditions) and field data (measured from real users via the Chrome User Experience Report). Google's ranking signal uses field data, but lab tools are invaluable for diagnosing and fixing issues.

Key tools:

• PageSpeed Insights: shows both lab and field data for any public URL with specific recommendations
• Lighthouse: available in Chrome DevTools or as a CLI, measures lab data with actionable diagnostics
• Google Search Console: aggregates field data across your whole site in the Core Web Vitals report
• WebPageTest: advanced lab testing with waterfall charts, filmstrips, and multi-location testing
• Chrome DevTools Performance panel: for profiling JavaScript and identifying long tasks that hurt INP

Core Web Vitals and SEO

Core Web Vitals became a Google ranking factor in 2021 as part of the Page Experience update. Passing all three thresholds does not guarantee top rankings: content quality and relevance remain more important. But failing them can suppress pages that would otherwise rank well. For competitive terms where multiple pages have similar content quality, Core Web Vitals can be the differentiator.

Want a full performance audit of your site? See our Performance Testing service or get in touch.

Related reading: Load Testing Guide: k6, Artillery, and When to Performance Test