What Are the 3 Core Web Vitals Metrics? LCP, INP & CLS Explained

Core Web Vitals are three specific page experience metrics that Google uses to evaluate how users experience your website. Understanding these metrics is essential for SEO because they directly impact your search rankings.

In this guide, we’ll break down each of the three Core Web Vitals metrics, explain what they measure, and show you the exact thresholds you need to hit for good scores.

The 3 Core Web Vitals Metrics at a Glance

Metric	Name	Measures	Good Score
LCP	Largest Contentful Paint	Loading performance	≤ 2.5 seconds
INP	Interaction to Next Paint	Interactivity	≤ 200 milliseconds
CLS	Cumulative Layout Shift	Visual stability	≤ 0.1

Let’s dive deep into each one.

---

1. LCP (Largest Contentful Paint)

What it measures: How quickly the main content of your page loads.

LCP specifically measures the time it takes for the largest visible element in the viewport to render. This is typically:

• A hero image
• A featured video thumbnail
• A large text block
• A background image

LCP Thresholds

• Good: 2.5 seconds or less ✅
• Needs Improvement: 2.5 to 4.0 seconds ⚠️
• Poor: More than 4.0 seconds ❌

What Causes Poor LCP?

The most common culprits include:

1. Slow server response times - Your Time to First Byte (TTFB) is too high
2. Render-blocking resources - CSS and JavaScript files blocking the initial render
3. Slow resource load times - Large, unoptimized images or videos
4. Client-side rendering - JavaScript frameworks that render content after page load

How to Improve LCP

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

<!-- Use fetchpriority for critical images -->
<img src="/hero.webp" fetchpriority="high" alt="Hero image">

Key optimization strategies:

• Use a CDN to reduce server response times
• Preload critical resources
• Optimize and compress images (use WebP format)
• Remove unused CSS and JavaScript
• Implement server-side rendering for JavaScript frameworks

---

2. INP (Interaction to Next Paint)

What it measures: How quickly your page responds to user interactions.

INP replaced First Input Delay (FID) in March 2024 as the official Core Web Vitals interactivity metric. While FID only measured the first interaction, INP measures all interactions throughout the page lifecycle.

INP Thresholds

• Good: 200 milliseconds or less ✅
• Needs Improvement: 200 to 500 milliseconds ⚠️
• Poor: More than 500 milliseconds ❌

What INP Measures

INP tracks the latency of:

• Click events
• Tap events (mobile)
• Keyboard events

For each interaction, it measures the time from when the user initiates the action to when the browser can paint the visual response.

What Causes Poor INP?

1. Long JavaScript tasks - Scripts that block the main thread for more than 50ms
2. Large DOM size - Too many DOM elements causing slow renders
3. Heavy event handlers - Complex logic running on every user interaction
4. Main thread congestion - Too many scripts competing for resources

How to Improve INP

// Break up long tasks with yield
async function processItems(items) {
  for (const item of items) {
    await new Promise(resolve => setTimeout(resolve, 0));
    processItem(item);
  }
}

// Use requestIdleCallback for non-critical work
requestIdleCallback(() => {
  // Non-urgent processing
  analytics.track('page_view');
});

Key optimization strategies:

• Break up long JavaScript tasks
• Minimize DOM size (aim for under 1,400 nodes)
• Defer non-critical JavaScript
• Use web workers for heavy computations
• Debounce input handlers

---

3. CLS (Cumulative Layout Shift)

What it measures: How much unexpected layout shifting occurs during page load.

CLS quantifies visual stability by measuring how much visible content shifts around as the page loads. Nothing is more frustrating than clicking a button only to have it move just as you tap, causing you to click something else.

CLS Thresholds

• Good: 0.1 or less ✅
• Needs Improvement: 0.1 to 0.25 ⚠️
• Poor: More than 0.25 ❌

What Causes Poor CLS?

1. Images without dimensions - Images that load without explicit width/height
2. Ads and embeds - Dynamic content injected after page load
3. Web fonts - FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text)
4. Dynamically injected content - Elements added above existing content

How to Improve CLS

<!-- Always specify image dimensions -->
<img src="/photo.webp" width="800" height="600" alt="Photo">

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

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

Key optimization strategies:

• Always include width and height attributes on images and videos
• Reserve space for ads, embeds, and iframes
• Use font-display: optional or preload fonts
• Avoid inserting content above existing content
• Use CSS transforms instead of layout-triggering properties

---

How Google Uses Core Web Vitals for Rankings

Core Web Vitals became an official Google ranking factor in 2021 as part of the broader “page experience” update. Here’s how they factor into search:

The Page Experience Signal

Google combines Core Web Vitals with other page experience factors:

• HTTPS - Site must be secure
• Mobile-friendly - Site must work well on mobile devices
• No intrusive interstitials - No annoying pop-ups blocking content
• Safe browsing - No malware or deceptive content

Ranking Impact

While Core Web Vitals are a ranking factor, they serve as a tiebreaker between pages with similar content quality. Here’s how to think about it:

1. Content relevance and quality remain the primary ranking factors
2. Among pages with similar content quality, those with better Core Web Vitals may rank higher
3. Extremely poor Core Web Vitals can hurt rankings even with great content

---

How to Check Your Core Web Vitals

1. Google Search Console

The most authoritative source for your site’s Core Web Vitals data. It shows real user data (field data) from actual visitors.

Navigate to: Search Console → Experience → Core Web Vitals

2. PageSpeed Insights

Enter any URL to get both lab data (simulated) and field data (if available).

• Field data comes from the Chrome User Experience Report (CrUX)
• Lab data is generated by Lighthouse in a controlled environment

3. Rankture

Our free SEO audit tool measures Core Web Vitals along with 20+ other SEO factors:

• Mobile and desktop scores
• Specific LCP, INP, and CLS values
• Actionable recommendations for improvement
• Historical tracking across audits

4. Chrome DevTools

For debugging specific issues:

1. Open DevTools (F12)
2. Go to the Performance tab
3. Record a page load
4. Look for layout shifts, long tasks, and LCP elements

---

Core Web Vitals FAQs

How often does Google update Core Web Vitals data?

Google collects Core Web Vitals data continuously, but the data shown in Search Console represents a 28-day rolling average. Changes you make today won’t immediately reflect in your scores—expect 2-4 weeks before seeing the impact.

Do Core Web Vitals affect mobile and desktop rankings differently?

Yes. Google uses mobile Core Web Vitals for mobile rankings and desktop Core Web Vitals for desktop rankings. Since Google primarily uses mobile-first indexing, your mobile scores are typically more important.

What if I have good lab data but poor field data?

This is common and usually means:

• Your real users have slower devices or connections than the lab simulation
• User behavior (like scrolling or clicking) triggers issues not caught in lab tests
• Third-party scripts behave differently in production

Field data always takes precedence because it represents actual user experiences.

Can I pass Core Web Vitals with a WordPress site?

Absolutely. Many WordPress sites achieve excellent Core Web Vitals scores with:

• Quality hosting (avoid cheap shared hosting)
• A well-coded, lightweight theme
• Image optimization plugins
• Caching plugins
• Minimal, well-chosen plugins

Check our guide on improving Core Web Vitals for WordPress for detailed steps.

What happened to FID (First Input Delay)?

Google replaced FID with INP (Interaction to Next Paint) in March 2024. INP is a more comprehensive metric because it measures all interactions, not just the first one. If you see old references to FID, just know that INP is now the official metric.

---

Quick Reference: Core Web Vitals Cheat Sheet

Good Scores to Aim For

• LCP: ≤ 2.5 seconds
• INP: ≤ 200 milliseconds
• CLS: ≤ 0.1

Most Common Fixes

Metric	Top Fix
LCP	Optimize images (WebP, preload, CDN)
INP	Break up long JavaScript tasks
CLS	Add explicit dimensions to images/videos

Testing Priority

1. Test mobile first (Google prioritizes mobile)
2. Use field data over lab data when available
3. Check multiple pages, not just the homepage

---

Start Measuring Your Core Web Vitals

Understanding the three Core Web Vitals metrics is the first step toward improving them. The next step is measuring where your site currently stands.

Ready to check your scores? Run a free SEO audit to see your Core Web Vitals performance along with 20+ other SEO factors. Our tool tests both mobile and desktop, giving you actionable recommendations for each metric.

The sites that prioritize user experience through strong Core Web Vitals scores are increasingly being rewarded by Google—make sure yours is one of them.