Core Web Vitals • 16 min read

Core Web Vitals: LCP, INP, CLS Explained (Complete Guide)

Master Core Web Vitals with this complete guide covering LCP, INP, and CLS. Learn what each metric measures, why it matters for SEO, and how to optimize.

By Rankture Team
Core Web Vitals: LCP, INP, CLS Explained (Complete Guide)

Core Web Vitals are three specific metrics that Google uses to evaluate user experience on your website. Since they became a ranking factor, understanding and optimizing LCP, INP, and CLS has become essential for SEO.

This comprehensive guide covers everything you need to know about each Core Web Vital—what it measures, why it matters, how to diagnose issues, and exactly how to fix them.

What Are Core Web Vitals?

Core Web Vitals are a set of real-world, user-centered metrics that measure critical aspects of web performance:

MetricFull NameMeasuresTarget
LCPLargest Contentful PaintLoading performance≤ 2.5 seconds
INPInteraction to Next PaintInteractivity≤ 200 milliseconds
CLSCumulative Layout ShiftVisual stability≤ 0.1

Together, these three metrics capture the user experience of loading, interacting with, and viewing your web pages.

Part 1: LCP (Largest Contentful Paint)

What LCP Measures

LCP measures how quickly the main content of a page becomes visible. Specifically, it tracks the render time of the largest image, video, or text block visible in the viewport.

Think of it as answering the question: “How long until the user sees the important stuff?”

Common LCP Elements

The LCP element is usually one of these:

LCP Thresholds

ScoreRangeMeaning
🟢 Good≤ 2.5 secondsUsers see content quickly
🟡 Needs Improvement2.5 - 4.0 secondsSome users may be frustrated
🔴 Poor> 4.0 secondsHigh chance of abandonment

What Causes Poor LCP?

1. Slow Server Response Time

If your server takes too long to respond (high TTFB), everything else is delayed.

Symptoms:

Fixes:

2. Render-Blocking Resources

CSS and JavaScript that must load before rendering can delay LCP.

Symptoms:

Fixes:

<!-- Inline critical CSS -->
<style>
  .hero { min-height: 500px; background: #f0f0f0; }
</style>

<!-- Defer non-critical JS -->
<script src="app.js" defer></script>

3. Slow Resource Load Times

Large, unoptimized images are the most common LCP killer.

Symptoms:

Fixes:

<!-- Preload the LCP image -->
<link rel="preload" as="image" href="hero.webp">

<!-- Use modern formats -->
<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero" fetchpriority="high" width="1200" height="600">
</picture>

4. Client-Side Rendering

JavaScript frameworks that render content after page load delay LCP.

Symptoms:

Fixes:

How to Measure LCP

PageSpeed Insights:

pagespeed.web.dev → Enter URL → Check "Largest Contentful Paint"

Chrome DevTools:

  1. Open DevTools (F12)
  2. Go to Performance tab
  3. Record page load
  4. Find “LCP” marker in timeline

JavaScript API:

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });

Part 2: INP (Interaction to Next Paint)

What INP Measures

INP measures the latency of all user interactions throughout the entire page lifecycle, then reports a value representative of overall interactivity.

It replaced First Input Delay (FID) in March 2024 because FID only measured the first interaction, while INP captures the full picture.

Types of Interactions Measured

INP tracks:

It does NOT measure:

INP Thresholds

ScoreRangeMeaning
🟢 Good≤ 200msInteractions feel instant
🟡 Needs Improvement200 - 500msNoticeable delay
🔴 Poor> 500msSite feels unresponsive

What Causes Poor INP?

1. Long JavaScript Tasks

Any JavaScript task over 50ms blocks the main thread, delaying interaction responses.

Symptoms:

Fixes:

// Break up long tasks
async function processItems(items) {
  for (const item of items) {
    processItem(item);
    await yieldToMain(); // Let the browser breathe
  }
}

// Yield to main thread
function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

2. Large DOM Size

Massive DOM trees make every interaction slower because the browser has to recalculate layout for more elements.

Symptoms:

Fixes:

3. Heavy Event Handlers

Complex logic running on every interaction adds delay.

Symptoms:

Fixes:

// Debounce input handlers
const debouncedSearch = debounce((query) => {
  performSearch(query);
}, 150);

input.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

4. Main Thread Congestion

Too many scripts competing for the main thread.

Symptoms:

Fixes:

How to Measure INP

Field Data (Real Users):

Lab Data (Debugging):

  1. Open Chrome DevTools
  2. Go to Performance tab
  3. Record while interacting with the page
  4. Look for long tasks after interaction

JavaScript API:

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('INP candidate:', entry.duration, entry.name);
  }
}).observe({ type: 'event', durationThreshold: 16, buffered: true });

Part 3: CLS (Cumulative Layout Shift)

What CLS Measures

CLS quantifies how much visible content shifts around unexpectedly during page load. It measures visual stability.

Nothing frustrates users more than clicking a button just as the page jumps, causing an unintended click.

How CLS is Calculated

CLS is calculated by multiplying two factors:

CLS Score = Impact Fraction × Distance Fraction

Multiple shifts are accumulated over the page session, with a scoring mechanism that accounts for expected interactions.

CLS Thresholds

ScoreRangeMeaning
🟢 Good≤ 0.1Stable, pleasant experience
🟡 Needs Improvement0.1 - 0.25Some annoying shifts
🔴 Poor> 0.25Frustrating, shift-heavy experience

What Causes Poor CLS?

1. Images Without Dimensions

Images that load without explicit width/height cause shifts as they render.

Symptoms:

Fixes:

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

<!-- Or use aspect-ratio CSS -->
<style>
  .image-container {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
</style>

2. Ads, Embeds, and Iframes

Dynamic content injected after page load causes shifts.

Symptoms:

Fixes:

<!-- Reserve space for ads -->
<div style="min-height: 250px;">
  <div id="ad-slot"></div>
</div>

<!-- Reserve space for embeds -->
<div style="aspect-ratio: 16/9;">
  <iframe src="embed-url" loading="lazy"></iframe>
</div>

3. Web Font Loading

Custom fonts can cause Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT).

Symptoms:

Fixes:

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: optional; /* Prevents all font-related CLS */
}
<!-- Preload critical fonts -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

4. Dynamically Injected Content

Content inserted above existing content pushes everything down.

Symptoms:

Fixes:

5. Animation Using Layout Properties

Animating properties like height, width, or margin causes layout shifts.

Symptoms:

Fixes:

/* Bad: Causes CLS */
.element { transition: margin-left 0.3s; }

/* Good: No CLS */
.element { transition: transform 0.3s; }

How to Measure CLS

Layout Shift Debugger:

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      console.log('Layout Shift:', entry.value);
      console.log('Sources:', entry.sources);
    }
  }
}).observe({ type: 'layout-shift', buffered: true });

Chrome DevTools:

  1. Open DevTools
  2. Press Cmd/Ctrl + Shift + P
  3. Type “Show Core Web Vitals overlay”
  4. Enable it and reload the page
  5. Red boxes show elements causing shifts

Core Web Vitals and SEO

How Google Uses Core Web Vitals

Core Web Vitals are part of Google’s “page experience” ranking signal, which also includes:

Ranking Impact

Core Web Vitals act as a tiebreaker between pages with similar content quality:

Mobile vs. Desktop

Google uses:

Since Google uses mobile-first indexing, mobile performance is typically more important.

Checking All Three Core Web Vitals

Quick Test (Any URL)

PageSpeed Insights:

  1. Enter URL
  2. View both Field Data (real users) and Lab Data (simulated)
  3. See individual LCP, INP, CLS scores

Site-Wide Monitoring

Google Search Console:

  1. Go to Experience → Core Web Vitals
  2. View Mobile and Desktop reports
  3. See URL groups with issues

Full SEO Context

Rankture Free Audit:

  1. Enter URL
  2. Get Core Web Vitals + 20 other SEO factors
  3. Prioritized recommendations

Optimization Priority Order

When fixing Core Web Vitals, follow this order:

Phase 1: Quick Wins

  1. Add image dimensions (fixes CLS immediately)
  2. Compress and convert images to WebP (improves LCP)
  3. Preload LCP element (improves LCP)

Phase 2: Render Optimization

  1. Inline critical CSS (improves LCP)
  2. Defer non-critical JavaScript (improves LCP and INP)
  3. Remove unused CSS/JS (improves all metrics)

Phase 3: Advanced Fixes

  1. Break up long JavaScript tasks (improves INP)
  2. Implement font loading strategy (fixes CLS)
  3. Optimize server response time (improves LCP)

Phase 4: Ongoing

  1. Audit third-party scripts (ongoing maintenance)
  2. Monitor with Search Console (catch regressions)
  3. Test after every deployment (prevent new issues)

Core Web Vitals by Platform

Different platforms have different optimization paths:

WordPress

Full WordPress guide →

Shopify

Full Shopify guide →

React/Next.js/Vue

FAQs: LCP, INP, CLS

How long until improvements show in Search Console?

Search Console uses a 28-day rolling average. Expect 2-4 weeks before seeing the full impact of changes. Lab data (PageSpeed Insights) updates immediately.

My field data and lab data are different. Which is accurate?

Field data reflects real user experiences and is what Google uses for rankings. Lab data is useful for debugging but may not match real-world conditions due to:

What if only one metric fails?

You need to pass all three Core Web Vitals for the page experience benefit. Focus on failing metrics first, but don’t ignore ones that are borderline “Good.”

Can JavaScript-heavy sites pass Core Web Vitals?

Yes, but it requires:

Do Core Web Vitals affect mobile and desktop rankings differently?

Yes. Google uses separate Core Web Vitals data for mobile vs. desktop rankings. Optimize mobile first since that’s what mobile-first indexing prioritizes.

Summary: Core Web Vitals Cheat Sheet

MetricTargetTop CausesQuick Fixes
LCP≤ 2.5sLarge images, slow server, render-blocking resourcesOptimize images, use CDN, preload LCP element
INP≤ 200msLong JS tasks, heavy event handlers, large DOMBreak up tasks, debounce handlers, reduce DOM
CLS≤ 0.1Missing dimensions, ads, fonts, animationsAdd width/height, reserve space, preload fonts

Start Optimizing Your Core Web Vitals

Understanding LCP, INP, and CLS is the first step to improving them. Now you know what each metric measures, why it matters, and how to fix issues.

Ready to check where your site stands? Run a free SEO audit to see your Core Web Vitals performance alongside 20+ other SEO factors. You’ll get prioritized recommendations so you know exactly what to fix first.

The sites that master Core Web Vitals are increasingly being rewarded with better rankings and user engagement. Make sure yours is one of them.

Tags:

core web vitals LCP INP CLS page experience SEO ranking factors

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