Core Web Vitals Guide: LCP, INP & CLS Optimization (2026)

Google began using user experience as a ranking signal in 2021, and since then Core Web Vitals (CWV) metrics have become essential indicators that every technical SEO professional needs to track daily. In March 2024, Interaction to Next Paint (INP) replaced First Input Delay (FID), significantly raising Google''s performance expectations. As of 2026, CWV is not merely a technical SEO checkbox — it is a direct determinant of organic rankings, conversion rates, and user satisfaction.

This guide provides an in-depth look at the three Core Web Vitals metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). For each metric, we cover thresholds, measurement methods, common issues, and actionable optimization techniques.

What Are Core Web Vitals?

Core Web Vitals are three metrics defined by Google to measure user experience on web pages. They evaluate loading performance, interaction responsiveness, and visual stability:

• LCP (Largest Contentful Paint): Measures how quickly the largest content element in the viewport becomes visible. It is the primary indicator of loading performance.
• INP (Interaction to Next Paint): Measures the time from when a user interacts with a page to when the browser produces a visual response. INP replaced FID in March 2024.
• CLS (Cumulative Layout Shift): Measures how much visible elements unexpectedly shift during page load or user interaction.

Together, these three metrics determine the quality of the experience your page delivers. Google classifies each page in the Search Console Core Web Vitals report as "good," "needs improvement," or "poor."

Why Core Web Vitals Matter for SEO

Google incorporated Core Web Vitals into its ranking algorithm as part of the page experience signals starting in 2021. CWV alone does not guarantee top rankings — content quality and relevance remain the most important factors. However, when you and your competitors have similar content quality, CWV performance can be the differentiator that determines ranking positions.

The concrete SEO impacts of CWV include:

• Ranking signal: Google uses CWV metrics as a direct ranking factor
• Crawl budget: Slow pages cause Googlebot to use crawl budget inefficiently, reducing indexation speed
• Conversion rate: According to Google''s own research, every 100 ms improvement in LCP can increase conversion rates by up to 1.7%
• Bounce rate: Pages loading longer than 3 seconds see bounce rates climbing to 53%
• Mobile priority: With mobile-first indexing, mobile CWV performance carries more weight than desktop

Core Web Vitals optimization is directly tied to overall page speed optimization. For a comprehensive page speed strategy, see our page speed optimization guide.

LCP — Largest Contentful Paint

What Is LCP?

LCP measures the time from when a user navigates to a page until the largest content element in the viewport is fully rendered. The "largest content element" is typically one of the following:

• A large element
• A poster
• An image loaded via CSS background-image
• A large text block (heading or paragraph)

LCP Thresholds (2026)

Factors Affecting LCP

Four main factors determine LCP performance:

1. Server response time (TTFB): The time for the server to send the first byte forms the foundation of LCP
2. Render-blocking resources: CSS and JavaScript files can delay page rendering
3. Resource load time: The download time of the LCP element (usually an image)
4. Client-side rendering: Content generated by JavaScript adds additional delay

LCP Optimization Techniques

Reduce server response time (TTFB optimization):

• Use a CDN to serve content from servers close to the user
• Implement server-side caching (Redis, Varnish)
• Enable HTTP/2 or HTTP/3 protocols
• Optimize database queries

Prioritize the LCP image:

```html

```

Eliminate render-blocking resources:

```html

```

Use modern image formats:

```html

```

Font optimization:

```css

@font-face {

font-family: ''CustomFont'';

src: url(''/fonts/custom.woff2'') format(''woff2'');

font-display: swap; / Text is visible immediately, swaps when font loads /

}

```

INP — Interaction to Next Paint

What Is INP?

INP is the interaction metric that replaced First Input Delay (FID) in March 2024. While FID only measured the input delay of the first interaction, INP tracks all interactions on a page (clicks, taps, keyboard input) and reports the worst-case latency. This provides a far more accurate picture of overall page responsiveness.

INP measures three phases:

1. Input Delay: The time from the user''s interaction to when the event handler begins executing
2. Processing Time: The execution time of the event handler code
3. Presentation Delay: The time until the browser paints the next frame

INP Thresholds (2026)

Factors Affecting INP

• Long Tasks: JavaScript tasks exceeding 50 ms block the main thread
• Large DOM tree: A high number of DOM nodes increases interaction response time
• Third-party scripts: Analytics, advertising, and social media scripts occupy the main thread
• Unnecessary re-renders: In frameworks like React, unnecessary component re-renders

INP Optimization Techniques

Break up Long Tasks:

```javascript

// BAD: A single long task blocks the main thread

function processAllItems(items) {

items.forEach(item => heavyComputation(item));

}

// GOOD: Break tasks using the scheduler API

async function processAllItems(items) {

for (const item of items) {

heavyComputation(item);

// Give the browser room to breathe

await scheduler.yield();

}

}

```

Defer non-essential JavaScript:

```html

```

Prevent unnecessary re-renders in React/Next.js:

```typescript

// Use React.memo to prevent unnecessary renders

const ExpensiveList = React.memo(({ items }: { items: Item[] }) => {

return items.map(item => );

});

// Use useMemo to cache expensive computations

const sortedItems = useMemo(

() => items.sort((a, b) => a.score - b.score),

[items]

);

```

Reduce DOM size:

Large DOM trees (1500+ nodes) seriously impact interaction response time. Lazy load off-screen content, use virtual scrolling, and avoid unnecessary wrapper elements.

CLS — Cumulative Layout Shift

What Is CLS?

CLS measures the total score of unexpected layout shifts throughout a page''s lifecycle. The core problem CLS aims to prevent is when a user is about to click a link and the content shifts, causing them to click the wrong element.

The CLS score is calculated by multiplying the impact fraction (the percentage of the viewport affected) by the distance fraction (how far elements moved). Layout shifts caused by user interaction (clicks, taps) are not included in the CLS score.

CLS Thresholds (2026)

Common CLS Issues

1. Images and videos without dimensions: Media elements without width/height push surrounding content when they load
2. Late-loading ads: Ad slots injected after content loads cause layout shifts
3. Dynamically injected content: Content added to the DOM via JavaScript pushes existing elements down
4. Web fonts: Size differences between system fonts and custom fonts cause text shifting (FOUT)
5. Late-loading third-party widgets: Cookie banners, live chat bubbles, and social media plugins

CLS Optimization Techniques

Always specify dimensions for images:

```html

```

Reserve space for ads and dynamic content:

```css

/ Set minimum height for ad containers /

.ad-container {

min-height: 250px; / Common ad size /

width: 300px;

background-color: #f5f5f5;

}

```

Font loading strategy:

```css

/ font-display: swap can cause FOUT /

/ font-display: optional is the best choice for performance /

@font-face {

font-family: ''BrandFont'';

src: url(''/fonts/brand.woff2'') format(''woff2'');

font-display: optional; / If font doesn''t load in time, system font is used /

}

```

Use transform for animations:

```css

/ BAD: Changing top/left causes layout shift /

.animate-bad {

position: relative;

top: 0;

transition: top 0.3s;

}

.animate-bad:hover { top: -10px; }

/ GOOD: transform does not affect layout /

.animate-good {

transition: transform 0.3s;

}

.animate-good:hover { transform: translateY(-10px); }

```

How to Measure Core Web Vitals

Field Data vs Lab Data

There are two fundamental data types for CWV measurement:

Field Data (RUM): Data collected from real users. Chrome User Experience Report (CrUX) data falls into this category. Google uses field data for ranking because it reflects actual user experience. It is evaluated on a 28-day rolling average at the 75th percentile (p75).

Lab Data: Test results simulated in a controlled environment. Tools like Lighthouse and WebPageTest produce lab data. It is useful for debugging and optimization but is not used as a ranking signal.

An important distinction: INP cannot be measured in lab data because it requires real user interaction.

Measurement Tools

Google PageSpeed Insights: Provides both field and lab data. Enter your URL to get an instant CWV report. Shows field data when CrUX data is available, otherwise only lab data.

Google Search Console: Monitor all your pages collectively through the Core Web Vitals report. Groups pages as "good," "needs improvement," and "poor." Provides separate reports for mobile and desktop. For detailed usage, see our Google Search Console guide.

Chrome DevTools: Analyze page load and interaction performance in detail using the Performance tab. The Web Vitals extension lets you see real-time CWV values.

Lighthouse: Can be run within Chrome DevTools or as a CLI tool. Produces lab data for LCP and CLS. INP cannot be directly measured with Lighthouse since it requires field data.

Web Vitals JavaScript library:

```javascript

import { onLCP, onINP, onCLS } from ''web-vitals'';

onLCP(metric => {

console.log(''LCP:'', metric.value, ''ms'');

// Send to analytics

sendToAnalytics({ name: ''LCP'', value: metric.value });

});

onINP(metric => {

console.log(''INP:'', metric.value, ''ms'');

sendToAnalytics({ name: ''INP'', value: metric.value });

});

onCLS(metric => {

console.log(''CLS:'', metric.value);

sendToAnalytics({ name: ''CLS'', value: metric.value });

});

```

With the SEOctopus Lighthouse integration, you can monitor your CWV metrics regularly, compare historical data, and detect issues early. SEOctopus automatically reports LCP, INP, and CLS scores for each page and flags pages that fall below threshold values.

Mobile vs Desktop CWV Differences

Because Google applies mobile-first indexing, mobile CWV performance is more impactful for rankings than desktop. CWV metrics typically score lower on mobile because:

• Lower processing power: Mobile CPUs can be 3-5x slower than desktop, directly affecting INP
• Slower network connections: 4G/3G connections significantly increase LCP times
• Smaller screens: Layout shifts in a smaller viewport result in proportionally larger CLS scores
• Touch interactions: Touch events have different latency profiles than click events

For more on mobile performance optimization, see our mobile SEO guide.

Real-World CWV Optimization Examples

E-commerce Site — LCP Improvement

An e-commerce site had an LCP of 4.2 seconds on product pages. Optimizations applied:

1. Hero image converted to WebP format (60% size reduction)
2. Hero image preloaded with
3. Critical CSS inlined, remaining CSS loaded asynchronously
4. CDN activated

Result: LCP dropped from 4.2 seconds to 1.8 seconds (57% improvement).

News Site — CLS Fix

A news site had a CLS score of 0.38. Root causes:

1. Images lacked width/height attributes — dimensions added to all images
2. Ad slots loaded dynamically — reserved space with min-height
3. Web font loading caused FOUT — applied font-display: optional

Result: CLS dropped from 0.38 to 0.06.

SaaS Application — INP Improvement

A SaaS dashboard had an INP of 620 ms. Solutions:

1. Unnecessary React component re-renders eliminated with React.memo
2. Large list renders migrated to virtual scrolling (react-window)
3. Third-party scripts moved to web workers
4. Heavy computations in event handlers deferred with requestIdleCallback

Result: INP dropped from 620 ms to 180 ms.

Core Web Vitals Optimization Checklist

LCP Checklist

• [ ] Is TTFB under 800 ms?
• [ ] Is the LCP element marked with fetchpriority="high"?
• [ ] Is there a for the LCP image?
• [ ] Is loading="lazy" NOT used on the LCP image?
• [ ] Are images in WebP or AVIF format?
• [ ] Is critical CSS inlined and remaining CSS loaded asynchronously?
• [ ] Is CDN active?

INP Checklist

• [ ] Are there Long Tasks exceeding 50 ms? (Chrome DevTools Performance tab)
• [ ] Are third-party scripts loaded with defer/async?
• [ ] Is the DOM node count under 1,500?
• [ ] Are there unnecessary re-renders in React/framework components?
• [ ] Are heavy computations broken up with web workers or scheduler.yield()?

CLS Checklist

• [ ] Do all images have width and height specified?
• [ ] Is minimum space reserved for ads and dynamic content areas?
• [ ] Is the font loading strategy (font-display) correct?
• [ ] Are animations using transform?
• [ ] Are there late-loading banners or bars at the top of the page?

General Checklist

• [ ] Has PageSpeed Insights been tested for both mobile and desktop?
• [ ] Is the Search Console Core Web Vitals report being tracked regularly?
• [ ] Has field data (CrUX) been compared with lab data?
• [ ] Has mobile performance been optimized separately?

Conclusion

Core Web Vitals remain one of the most important components of technical SEO in 2026. By achieving fast loading with LCP, instant interaction response with INP, and visual stability with CLS, you can improve both user experience and organic ranking performance.

A successful CWV strategy consists of three fundamental steps: first measure (PageSpeed Insights, Search Console, SEOctopus), then prioritize the issues with the greatest impact, and systematically optimize. CWV is not a one-time fix — it is an ongoing process that requires continuous monitoring and improvement.

For a comprehensive audit covering all dimensions of technical SEO, see our SEO audit guide. To check every element of on-page optimization, our on-page SEO checklist is ideal.

Related Articles

• Page Speed Optimization Guide 2026
• Technical SEO Guide
• Mobile SEO Guide: Mobile-First Optimization 2026
• SEO Audit Guide
• On-Page SEO Checklist 2026
• Google Search Console Guide 2026