Core Web Vitals

What Are Core Web Vitals?

Core Web Vitals are a set of specific metrics that Google uses to evaluate user experience on websites. Introduced as a ranking factor in 2021, these metrics measure how users actually experience your pages—not just how fast they load on a test, but how they feel to real visitors.

The three Core Web Vitals are:

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

Google uses Core Web Vitals as part of its "page experience" ranking signals. While content relevance remains most important, good Core Web Vitals can help your pages rank better, especially when competing against similar content.

The Three Core Web Vitals Explained

LCP (Largest Contentful Paint)

What it measures: How long it takes for the main content of a page to load—specifically, the largest visible element in the viewport.

Target: Under 2.5 seconds

What triggers LCP:

• Images (most common)
• Video poster images
• Background images loaded via CSS
• Block-level text elements

Why it matters: Users perceive pages as "loaded" when they can see the main content. Slow LCP means users stare at blank screens or loading spinners, increasing abandonment.

Common LCP issues:

• Slow server response times
• Render-blocking JavaScript and CSS
• Slow resource load times (images, fonts)
• Client-side rendering delays

INP (Interaction to Next Paint)

What it measures: How quickly a page responds to user interactions (clicks, taps, key presses) by updating the visual display.

Note: INP replaced FID (First Input Delay) in March 2024. INP measures all interactions throughout the page visit, not just the first one.

Target: Under 200 milliseconds

Why it matters: When users click a button and nothing happens, they don't know if the click registered. This creates frustration and erodes trust.

Common INP issues:

• Heavy JavaScript execution blocking the main thread
• Long tasks that can't be interrupted
• Excessive DOM size
• Third-party scripts competing for resources

CLS (Cumulative Layout Shift)

What it measures: How much the page layout unexpectedly shifts during loading. Each time a visible element moves, it contributes to the CLS score.

Target: Under 0.1

Why it matters: Nothing is more frustrating than trying to click a button only to have it move, causing you to click something else—like an ad or wrong link.

Common CLS causes:

• Images without dimensions
• Ads, embeds, or iframes without reserved space
• Dynamically injected content
• Web fonts causing text shifts (FOIT/FOUT)

How Core Web Vitals Affect SEO

Direct Ranking Impact

Core Web Vitals are a confirmed Google ranking factor as part of "page experience signals." However, the impact is nuanced:

• Not the primary factor: Content relevance and quality still matter most
• Tiebreaker effect: Among equally relevant pages, better Core Web Vitals may rank higher
• Mobile-first: Core Web Vitals are evaluated on mobile, which is Google's primary index
• Threshold-based: Passing all three thresholds matters more than perfect scores

Indirect Benefits

Beyond rankings, good Core Web Vitals improve:

• User engagement: Fast, stable pages keep users on site
• Conversion rates: Better UX leads to more completed actions
• Bounce rate: Poor performance increases abandonment
• Return visits: Good experiences bring users back

Measuring Core Web Vitals

Lab Data vs. Field Data

Lab data (synthetic testing):

• Simulated tests in controlled conditions
• Great for debugging and development
• Doesn't reflect real user experience variations
• Tools: Lighthouse, PageSpeed Insights (lab section)

Field data (real user monitoring):

• Actual user experience data
• What Google uses for rankings
• Reflects diverse devices, networks, and conditions
• Tools: PageSpeed Insights (field section), Search Console, Chrome UX Report

Important: Google uses field data for ranking. Your Lighthouse score might be great while real users have poor experiences.

Tools for Measuring

Google Tools (Free):

Third-Party Tools:

• Screaming Frog (crawl entire sites)
• Ahrefs Site Audit
• Semrush Site Audit
• WebPageTest (detailed waterfall analysis)

Improving LCP

1. Optimize Server Response Time

Goal: TTFB (Time to First Byte) under 200ms

• Use a CDN for global distribution
• Implement server-side caching
• Upgrade hosting if needed
• Optimize database queries

2. Remove Render-Blocking Resources

JavaScript and CSS that block rendering delay LCP:

<!-- Defer non-critical JavaScript -->
<script src="analytics.js" defer></script>

<!-- Async load non-critical CSS -->
<link
  rel="preload"
  href="non-critical.css"
  as="style"
  onload="this.onload=null;this.rel='stylesheet'"
/>

3. Optimize Images

Images are the most common LCP element:

• Use modern formats (WebP, AVIF)
• Implement responsive images with srcset
• Lazy load below-the-fold images
• Set explicit width and height
• Use a CDN for image delivery

4. Preload Critical Resources

Tell browsers to fetch important resources early:

<link rel="preload" href="hero.webp" as="image" />
<link rel="preload" href="critical-font.woff2" as="font" crossorigin />

Improving INP

1. Reduce JavaScript Execution Time

Break up long tasks into smaller chunks:

// Instead of one long task
function processAllItems(items) {
  items.forEach(item => heavyProcessing(item))
}

// Break into smaller tasks
async function processAllItems(items) {
  for (const item of items) {
    heavyProcessing(item)
    await yieldToMain()
  }
}

2. Minimize Main Thread Work

• Defer non-critical JavaScript
• Remove unused JavaScript
• Use web workers for heavy computations
• Audit and reduce third-party scripts

3. Reduce DOM Size

Large DOMs slow down interactions:

• Keep DOM nodes under 1,500 if possible
• Virtualize long lists (only render visible items)
• Remove hidden elements instead of hiding with CSS

Improving CLS

1. Set Explicit Dimensions for Media

Always specify width and height:

<!-- Images -->
<img src="photo.jpg" width="800" height="600" alt="Photo" />

<!-- Videos -->
<video width="640" height="360"></video>

With CSS aspect-ratio:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

2. Reserve Space for Ads and Embeds

.ad-container {
  min-height: 250px; /* Reserve expected ad height */
}

3. Avoid Inserting Content Above Existing Content

• Don't inject banners at the top after load
• If dynamic content must appear, reserve space in advance
• Use transforms instead of properties that trigger layout

4. Handle Font Loading

Prevent font swap from causing layout shifts:

@font-face {
  font-family: "CustomFont";
  src: url("font.woff2") format("woff2");
  font-display: optional;
}

Core Web Vitals and GEO

For AI-powered search, user experience signals likely remain important:

Why it matters for GEO:

• AI systems may factor in page experience when selecting sources
• Sites with poor UX may be deprioritized as unreliable
• Fast, accessible content is easier for AI to process and cite

Best practice: Optimize Core Web Vitals for users first—this benefits both traditional SEO and emerging GEO.

Frequently Asked Questions

How much do Core Web Vitals affect rankings?

They're one of many factors, not the dominant one. Great content with poor Core Web Vitals can still rank well, but improving scores may provide an edge over competitors with similar content quality.

Should I prioritize desktop or mobile scores?

Mobile. Google uses mobile-first indexing, meaning mobile Core Web Vitals are what matter for rankings. However, don't ignore desktop—many B2B users primarily browse on desktop.

How long does it take for improvements to affect rankings?

Google's field data updates over 28 days. After fixing issues, wait at least a month for field data to reflect changes, then potentially longer for ranking impact.

What if my CMS or theme causes poor scores?

Consider: optimizing within the platform's constraints, using a better theme, implementing a caching/CDN solution, or switching platforms for critical pages.

Are there penalties for poor Core Web Vitals?

There's no specific penalty. Poor scores mean you're missing a positive ranking signal, but won't trigger a manual action or algorithmic penalty.

Related Terms

• Page Speed - Overall loading performance
• Search Engine Optimization - Optimizing for search rankings
• Mobile-First Indexing - Google's mobile-primary approach
• Technical SEO - Technical website optimization

Why this matters

Core Web Vitals influences how search engines and users interpret your pages. When core web vitals is handled consistently, it reduces ambiguity and improves performance over time.

Common mistakes

• Applying core web vitals inconsistently across templates
• Ignoring how core web vitals interacts with canonical or index rules
• Failing to validate core web vitals after releases
• Over-optimizing core web vitals without checking intent
• Leaving outdated core web vitals rules in production

How to check or improve Core Web Vitals (quick checklist)

1. Review your current core web vitals implementation on key templates.
2. Validate core web vitals using Search Console and a crawl.
3. Document standards for core web vitals to keep changes consistent.
4. Monitor performance and update core web vitals as intent shifts.

Examples

Example 1: A site standardizes core web vitals and sees more stable indexing. Example 2: A team audits core web vitals and resolves hidden conflicts.

FAQs

What is Core Web Vitals?

Core Web Vitals is a core concept that affects how pages are evaluated.

Why does Core Web Vitals matter?

Because it shapes visibility, relevance, and user expectations.

How do I improve core web vitals?

Use the checklist and verify changes across templates.

How often should I review core web vitals?

After major releases and at least quarterly for critical pages.

Related resources

• Guide: /resources/guides/robots-txt-for-ai-crawlers
• Template: /templates/definitive-guide
• Use case: /use-cases/saas-companies
• Glossary:
  • /glossary/canonical-url
  • /glossary/indexability