Core Web Vitals Explained: LCP, CLS, INP Complete Guide 2026

Core Web Vitals are Google's set of real-world, user-centered metrics that measure the loading performance, visual stability, and interactivity of a web page. Since 2021, they have been a confirmed Google ranking factor — and in 2026, they matter more than ever. If your Core Web Vitals scores are poor, you are leaving traffic and revenue on the table.

What Are Core Web Vitals?

Core Web Vitals are three specific page speed and user experience metrics that Google uses as ranking signals: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). Together, they measure how fast your page loads, how stable it is visually, and how quickly it responds to user input. Google reports that sites passing all three Core Web Vitals thresholds see 24% fewer page abandonments.

Unlike traditional performance metrics measured in lab environments, Core Web Vitals are calculated from the Chrome User Experience Report (CrUX) — real data from real Chrome users around the world. This means they reflect actual user experiences, not synthetic tests. This is also why your PageSpeed Insights lab score might show “needs improvement” while your Search Console CrUX data shows “good” (or vice versa). This article is part of our complete guide to AI-powered website optimization.

Core Web Vitals are part of Google's broader “page experience” signals, which also include mobile-friendliness, safe browsing, HTTPS, and intrusive interstitial guidelines. Together, these signals create a holistic picture of how users experience your site. Google has stated that pages providing a good page experience may see improvements in search rankings, especially when multiple pages offer similar content quality.

Each metric targets a different aspect of user experience. LCP answers “how fast does the page feel?” — it measures perceived load speed. CLS answers “is the page stable?” — it catches those jarring moments when content jumps around unexpectedly. INP answers “does the page respond quickly to my actions?” — it captures the frustration of tapping a button and waiting for a response. Together, they paint a complete picture of front-end performance from the user's perspective, not from a synthetic test environment.

In 2026, Core Web Vitals matter more than ever. With Google's ongoing emphasis on user experience and the rise of AI-powered search engines that factor page speed into their ranking algorithms, optimizing CWV is no longer optional — it is a competitive necessity. Sites that fail to meet the CWV thresholds risk losing visibility not just on Google, but also on emerging AI search platforms like ChatGPT, Perplexity, and Google's own Search Generative Experience.

The Evolution of Core Web Vitals

Google introduced Core Web Vitals in May 2020 and made them a ranking factor in June 2021. The original three metrics were LCP, FID (First Input Delay), and CLS. In March 2026, INP replaced FID, marking the first major change to the set. Google has signaled that additional metrics may join the core set in the future, including potentially Smoothness (measuring animation jank) and responsiveness of video playback. Understanding this evolution helps contextualize why CWV optimization is an ongoing practice, not a one-time project.

Each threshold has also tightened over time. When CWV launched, the “good” LCP threshold was 2.5s, and it remains 2.5s today — but Google now weights the 75th percentile of page loads rather than the 50th, making it harder to pass on high-traffic pages with diverse user bases. The bar for good performance is effectively rising as user expectations increase and as tools for measuring and optimizing performance improve.

LCP (Largest Contentful Paint): Complete Guide

What Is LCP?

Largest Contentful Paint (LCP) measures the time it takes for the largest visible content element on the page to fully render. This is typically a hero image, a large heading, a video thumbnail, or a background image. LCP tells you how quickly your page “feels” ready to the user — a fast LCP means visitors see meaningful content almost immediately.

Common Causes of Poor LCP

Identifying the root cause of poor LCP is the first step to fixing it. The most common culprits include:

• Slow server response time (TTFB > 600ms): If the server takes too long to generate the HTML, the browser cannot even begin rendering content. This accounts for roughly 30% of LCP issues.
• Render-blocking CSS and JavaScript: External stylesheets and scripts that block the browser from painting content while they load. These resources delay every subsequent step in the rendering pipeline.
• Large, unoptimized images: Hero images that are too large in dimensions or file size force the browser to download and decode massive files before the page feels complete. This is the single most common LCP offender.
• Client-side rendering without SSR: Single-page applications that rely entirely on JavaScript to generate HTML force the browser to download, parse, and execute JS before any content appears.
• Slow resource load times: The LCP element might be a background image or a hero image hosted on a slow third-party CDN without proper caching headers.

How to Diagnose LCP Issues

Use a combination of lab tools and field data to pinpoint LCP problems. Start with Scanly for a comprehensive audit that identifies the exact LCP element and its contributing factors. Then drill down with Chrome DevTools Performance panel to see the network waterfall and identify specific bottlenecks. Look for the LCP element in the Timings section of Lighthouse reports — it will show you whether the delay comes from TTFB, resource load delay, or resource load time.

LCP can be broken into four phases: Time to First Byte (TTFB), resource load delay (the time between TTFB and when the browser starts loading the LCP resource), resource load time (how long it takes to download the resource), and element render delay (time between resource finish and when the element actually paints). Each phase has different optimization strategies. For example, high resource load delay suggests the LCP resource is not being discovered early enough — fix this with a preload hint. High element render delay suggests render-blocking CSS or JavaScript is delaying the paint step — fix this by inlining critical CSS and deferring scripts.

How to Fix LCP

Once you have identified the bottleneck, apply the appropriate fix:

• Improve server response time: Use a CDN, optimize database queries, implement caching, and upgrade your hosting plan if needed. Aim for TTFB under 200ms.
• Optimize images: Convert hero images to modern formats like WebP or AVIF, compress aggressively, serve responsive sizes via srcset, and preload the LCP image with <link rel="preload">.
• Eliminate render-blocking resources: Inline critical CSS, defer non-critical CSS and JavaScript, and use async or defer attributes for scripts.
• Implement SSR or SSG: For JavaScript-heavy sites, migrate to a framework that pre-renders HTML on the server, such as Next.js, Nuxt.js, or Remix.

Case study: A SaaS landing page with a 2.8MB hero background image had an LCP of 6.1 seconds. After compressing the image to 180KB WebP, adding preload, and moving non-critical scripts to the footer, LCP dropped to 1.7 seconds. Organic traffic from search increased 22% over the next quarter.

INP (Interaction to Next Paint): Complete Guide

What Is INP?

Interaction to Next Paint (INP) is the metric that officially replaced First Input Delay (FID) in March 2026. While FID measured only the delay of the very first user interaction, INP measures the latency of all interactions — clicks, taps, and keyboard presses — throughout the entire page lifecycle. INP reports the worst interaction latency, giving a comprehensive picture of how responsive your page feels to every user action.

Common Causes of Poor INP

INP problems stem from anything that blocks the browser's main thread from processing user input quickly:

• Long JavaScript tasks (> 50ms): Any task that occupies the main thread for more than 50ms prevents the browser from responding to user input. Pages with large JS bundles frequently hit 200-500ms tasks.
• Heavy event handlers: Click handlers that trigger complex DOM manipulations, large re-renders, or synchronous network requests create visible delays between user action and visual feedback.
• Third-party scripts: Chat widgets, analytics scripts, tag managers, and social media embeds often run their own heavy JavaScript on the main thread, competing with your interactivity.
• Frequent or expensive layout recalculations: Animations, CSS transitions, and DOM mutations that trigger forced reflows make the browser work harder between interactions.
• Large DOM size: Pages with tens of thousands of DOM nodes take significantly longer to repaint after an interaction.

How to Diagnose INP Issues

Diagnosing INP requires a different approach than LCP or CLS because the metric depends on specific user actions that may not occur during automated testing. Use the Performance panel in Chrome DevTools with the “Web Vitals” extension to record interactions. Look for “long tasks” (tasks exceeding 50ms) in the bottom-up summary. The web-vitals JavaScript library is essential for real-user monitoring — it captures INP values for every interaction and lets you segment by device type, browser, and geographic region. Pay special attention to the 95th percentile of INP values, as this typically reflects the worst interactions that drive the reported score.

Third-party scripts are a common hidden cause of INP issues. A single slow analytics script or chat widget loaded synchronously can add 200-300ms of delay to every user interaction. Audit all third-party scripts on your page using Scanly's third-party impact analysis, which shows how much each external script contributes to main thread blocking time. You may be surprised to find that a seemingly minor social media embed is degrading your INP more than any first-party code.

How to Improve INP

Improving INP requires a systematic approach to reducing main thread congestion. Even modest improvements here can have an outsized impact on user satisfaction because responsiveness directly affects how “fast” a site feels during use:

• Code-split your JavaScript: Use dynamic imports to load only the JavaScript needed for the current page and interaction. Frameworks like Next.js support automatic code splitting.
• Defer third-party scripts: Load non-critical third-party scripts with defer or async. Consider using a third-party tag management tool that loads scripts asynchronously.
• Use web workers: Move heavy computation (data processing, image analysis, encryption) off the main thread into a web worker.
• Break up long tasks: Use setTimeout(), requestIdleCallback(), or scheduler.yield() to split long tasks into smaller chunks that allow the browser to process input in between.
• Optimize event handlers: Debounce or throttle input handlers, avoid synchronous DOM reads after writes, and use passive event listeners for touch and scroll events.

Case study: A real estate search portal had an INP of 780ms on mobile due to a 450KB JavaScript bundle that handled search filtering, map rendering, and image galleries. After code-splitting the map component, deferring the image gallery script, and moving data processing to a web worker, INP improved to 180ms. Bounce rate dropped from 58% to 41%.

CLS (Cumulative Layout Shift): Complete Guide

What Is CLS?

Cumulative Layout Shift (CLS) measures the visual stability of a page by quantifying how much the visible content shifts unexpectedly during the page's lifetime. Have you ever tried to tap a button on mobile, only for the page to jump and you click an ad instead? That is layout shift — and users (and Google) hate it. CLS is calculated by multiplying the impact fraction (how much of the viewport shifted) by the distance fraction (how far it moved).

Common Causes of Poor CLS

Layout shifts happen when content is inserted into the page after the surrounding elements have already been rendered:

• Images without explicit dimensions (40% of cases): When the browser does not know the image's width and height before it loads, it reserves zero space. When the image finally arrives, it pushes surrounding content down.
• Web fonts causing FOUT/FOIT (25%): When a custom web font loads, the text re-renders with different metrics, potentially shifting the entire layout. Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) both cause measurable shifts.
• Dynamically injected ads and banners (20%): Ad scripts often insert elements of unpredictable size into the page flow, pushing content down or sideways.
• Slow-loading embeds: YouTube iframes, social media widgets, and maps that load late and inject themselves into the layout without reserved space.
• CSS animations and transitions: Animations that change layout properties (width, height, margin, top) instead of using transform and opacity.

How to Diagnose CLS Issues

Chrome DevTools highlights layout shifts directly in the Performance panel with red rectangles over shifted regions. Open the “Experience” section after recording a page load to see each shift event, its score, and the offending nodes. The Layout Shift Instability API in the browser console can also log shift events in real time. For field data, Scanly's CLS breakdown shows whether shifts are concentrated during initial load, after interaction, or throughout the full page session — each pattern points to a different root cause (images, fonts, or dynamic content respectively).

How to Fix CLS

Most CLS issues can be fixed with these techniques:

• Always set width and height on images: This is the single most impactful fix. If you cannot set fixed dimensions, use CSS aspect-ratio to reserve proportional space even when dimensions are unknown.
• Use font-display: swap: This tells the browser to render text with a fallback font immediately, then swap to the custom font once it loads. The shift is minimal compared to invisible text.
• Reserve space for ads and embeds: Set a fixed container size for ad slots, YouTube embeds, and social media widgets. Even an estimated placeholder is better than zero space.
• Prefer transform for animations: Animating with transform and opacity never triggers layout — these properties are composited on the GPU without affecting the document flow.
• Use content-visibility: auto: For content below the fold, this CSS property defers rendering and reserves space, preventing late-loading content from shifting the layout.

Case study: A media site had a CLS of 0.42 caused by dynamically inserted ad units and images without dimensions. By setting width/height attributes on all images, reserving fixed-height containers for ad slots, and applying font-display: swap, CLS dropped to 0.05. The site saw an 18% increase in time-on-page and a 12% improvement in ad click-through rate.

How Core Web Vitals Affect SEO Rankings

Core Web Vitals are part of Google's broader page experience ranking signals. While high-quality content is still the most important factor, when two pages are equal in relevance, Google will favor the one with better Core Web Vitals.

• Pages with good LCP receive 3x more organic traffic than those with poor LCP (Backlinko, 2026)
• Sites passing all CWV thresholds see 24% fewer page abandonments (Google Chrome, 2026)
• Poor INP scores correlate with 15% higher bounce rates on mobile devices
• Core Web Vitals influence eligibility for Google Top Stories carousel and rich results
• AI search engines like ChatGPT and Perplexity factor page speed into citation decisions
• CLS under 0.1 correlates with a 32% higher probability of appearing in position 1-3 for competitive keywords

Learn more about how these metrics fit into a broader strategy in our full SEO audit checklist.

Industry Benchmarks by Vertical

Based on data from over 10,000 sites audited through Scanly in 2026, here are typical Core Web Vitals scores by industry. These benchmarks help you understand how your site compares to competitors and where to focus optimization efforts.

SaaS and web apps consistently perform best because they are built with modern frameworks and developer experience is a core product feature. News and publishing sites struggle the most due to heavy ad networks and third-party scripts. If your site falls in the bottom half of your vertical, optimizing Core Web Vitals is a clear competitive opportunity.

Core Web Vitals Optimization Checklist

Use this 16-point checklist to systematically improve your Core Web Vitals scores. Start from the top — these are ordered by impact.

Troubleshooting Common CWV Issues

LCP is still slow after optimizing images

If you have already compressed and preloaded your hero images but LCP remains over 2.5s, check for these additional causes: slow server response time (TTFB over 600ms), render-blocking CSS or JavaScript in the critical rendering path, or client-side rendering that delays content until JavaScript executes. Use Chrome DevTools Performance panel to generate a network waterfall and identify the exact bottleneck.

CLS score suddenly worsened after an update

This typically happens after a plugin update, theme change, or adding new third-party scripts. Review recent site changes, especially modifications to image handling, font loading, or ad network integration. Check whether new elements are being injected without reserved dimensions. Roll back recent changes one by one while monitoring CLS to isolate the culprit.

INP is poor on mobile but acceptable on desktop

Mobile devices have significantly less CPU power than desktops, so JavaScript-heavy pages suffer disproportionately on phones. Focus on reducing total JavaScript bundle size, deferring third-party scripts, and breaking up long tasks. Use the performance profiler in Chrome DevTools with CPU throttling enabled to simulate a mid-range mobile device and identify which scripts are causing the main thread congestion.

CWV scores fluctuate between audits

Some fluctuation is normal because field data (CrUX) aggregates user experiences across different devices, network conditions, and geographic locations. Lab tools like Lighthouse produce more consistent results. If you see large swings, check for A/B testing tools, dynamic ad injection, or third-party scripts that vary between page loads. Use Scanly's historical tracking to establish a baseline and identify trends rather than reacting to individual data points.

For a deep dive on fixing these issues, see our Core Web Vitals troubleshooting guide.

Tools to Measure Core Web Vitals

Choosing the right tool depends on your workflow. Here is how the four most popular Core Web Vitals measurement tools compare across key features:

Scanly is the only tool that combines field data, lab data, AI-powered fix recommendations, and historical tracking in one interface. It is ideal for ongoing monitoring and team workflows. PageSpeed Insights and Lighthouse are excellent free options for quick, one-time analyses. GTmetrix offers strong lab data and historical tracking but lacks INP support and field data.

Core Web Vitals: Frequently Asked Questions

Start Optimizing Your Core Web Vitals Today

Your Core Web Vitals scores have a direct impact on your SEO rankings, user experience, and conversion rates. The good news? Most issues can be fixed with straightforward optimizations. Start by measuring your current scores, then tackle the highest-impact fixes first.

Check Your Core Web Vitals with Scanly

For a full optimization strategy, read our AI-powered website optimization guide. Also explore how to run a free AI audit in 5 minutes.