Technical SEO • 14 min read

Core Web Vitals Guide: LCP, INP, and CLS Explained

Complete guide to Core Web Vitals for SEO. Learn what LCP, INP, and CLS measure, how to test them, and how to improve your scores for better rankings.

By Rankture Team
Core Web Vitals Guide: LCP, INP, and CLS Explained

Core Web Vitals are Google’s specific metrics for measuring user experience. Since becoming ranking factors, they’ve transformed how we think about page performance. This guide explains what each metric measures and how to optimize for them.

What Are Core Web Vitals?

Core Web Vitals (CWV) are three specific metrics that measure loading performance, interactivity, and visual stability:

  1. LCP (Largest Contentful Paint) - Loading
  2. INP (Interaction to Next Paint) - Interactivity
  3. CLS (Cumulative Layout Shift) - Visual stability

These metrics became part of Google’s page experience signals in 2021 and continue to influence rankings.

LCP: Largest Contentful Paint

What LCP Measures

LCP measures how quickly the main content of a page loads. Specifically, it marks when the largest image or text block is visible in the viewport.

Common LCP elements:

LCP Thresholds

ScoreRating
≤2.5sGood
2.5-4sNeeds Improvement
>4sPoor

What Causes Poor LCP

1. Slow server response time

2. Render-blocking resources

3. Slow resource load times

4. Client-side rendering

How to Improve LCP

Optimize your server:

Optimize the LCP element:

Reduce blocking time:

INP: Interaction to Next Paint

What INP Measures

INP (Interaction to Next Paint) replaced FID in March 2024. It measures responsiveness by tracking the latency of all user interactions throughout the page lifecycle.

Interactions INP measures:

INP reports the worst interaction latency, ignoring outliers.

INP Thresholds

ScoreRating
≤200msGood
200-500msNeeds Improvement
>500msPoor

What Causes Poor INP

1. Long JavaScript tasks

2. Large JavaScript bundles

3. Poor event handler performance

4. Too many DOM elements

How to Improve INP

Break up long tasks:

// Instead of one long task
function processAll(items) {
  items.forEach(item => processItem(item)); // May block for 200ms+
}

// Break into smaller chunks
function processInChunks(items) {
  const chunk = items.splice(0, 10);
  chunk.forEach(item => processItem(item));
  if (items.length > 0) {
    requestIdleCallback(() => processInChunks(items));
  }
}

Reduce JavaScript:

Optimize event handlers:

Reduce DOM size:

CLS: Cumulative Layout Shift

What CLS Measures

CLS measures visual stability by tracking unexpected layout shifts during the page’s lifecycle. A layout shift occurs when a visible element changes its position from one rendered frame to the next.

What counts as a shift:

What doesn’t count:

CLS Thresholds

ScoreRating
≤0.1Good
0.1-0.25Needs Improvement
>0.25Poor

What Causes Poor CLS

1. Images without dimensions

2. Ads, embeds, and iframes

3. Dynamic content insertion

4. Web fonts causing FOIT/FOUT

How to Improve CLS

Always include dimensions:

<!-- Bad - no dimensions -->
<img src="photo.jpg" alt="Photo">

<!-- Good - explicit dimensions -->
<img src="photo.jpg" alt="Photo" width="800" height="600">

<!-- Also good - CSS aspect ratio -->
<img src="photo.jpg" alt="Photo" style="aspect-ratio: 4/3; width: 100%;">

Reserve space for dynamic content:

<!-- Reserve space for ad -->
<div style="min-height: 250px;">
  <!-- Ad will load here -->
</div>

Optimize font loading:

/* Preload your font */
<link rel="preload" href="font.woff2" as="font" crossorigin>

/* Use font-display: swap or optional */
@font-face {
  font-family: 'Custom Font';
  font-display: swap;
  src: url('font.woff2') format('woff2');
}

Never insert content above existing content:

// Bad - inserts above visible content
container.prepend(newElement);

// Better - insert below fold or at bottom
container.append(newElement);

// Or animate smoothly
newElement.style.opacity = 0;
container.append(newElement);
// Fade in

Measuring Core Web Vitals

Lab Testing (Synthetic)

PageSpeed Insights:

Chrome DevTools:

WebPageTest:

Field Data (Real Users)

Chrome User Experience Report (CrUX):

Google Search Console:

If that report tells you your Core Web Vitals assessment failed, that verdict is based on field data for the whole URL group, not the single page you happened to test — which is why a page can pass Lighthouse and still fail. To check your own pages against both, run the Core Web Vitals checker.

Real User Monitoring (RUM):

Lab vs Field Differences

Lab and field data often differ because:

Focus on field data for actual ranking impact — see field data vs lab data for how to reconcile the two when they disagree.

Core Web Vitals and SEO

Impact on Rankings

Core Web Vitals are a ranking factor, but context matters:

When CWV Matters Most

When CWV Matters Less

Core Web Vitals Checklist

LCP Optimization

INP Optimization

CLS Optimization

Monitoring

Related Resources:

Tags:

core web vitals lcp inp cls page experience site speed

Share this article:

Share on X Share on LinkedIn

Ready to improve your SEO?

Get a free SEO audit and see exactly what needs fixing on your site

Start Free Audit