Core Web Vitals audit in five steps

Core Web Vitals directly impact your search rankings and user experience. With Google using these metrics as ranking signals, a systematic audit approach helps you identify and fix performance issues that hurt both users and SEO.

Here's your five-step process to audit and optimize Core Web Vitals effectively.

Understanding Core Web Vitals in 2025

Current metrics and thresholds

Google measures three key performance indicators:

Largest Contentful Paint (LCP)

Measures loading performance - when the main content becomes visible:

• Good: ≤2.5 seconds
• Needs Improvement: 2.5-4.0 seconds
• Poor: >4.0 seconds

Interaction to Next Paint (INP)

Measures interactivity - page responsiveness to user input (replaced FID in March 2024):

• Good: ≤200 milliseconds
• Needs Improvement: 200-500 milliseconds
• Poor: >500 milliseconds

Cumulative Layout Shift (CLS)

Measures visual stability - unexpected layout shifts during page load:

• Good: ≤0.1
• Needs Improvement: 0.1-0.25
• Poor: >0.25

Why Core Web Vitals matter

Beyond their role as ranking factors, these metrics reflect real user experience:

Business impact

• Pages meeting CWV thresholds see 24% lower abandonment rates
• 1-second delay in page response can result in 7% reduction in conversions
• Mobile users are especially sensitive to performance issues
• Competitive advantage when competitors have poor scores

SEO implications

• Direct ranking factor since June 2021
• Page experience signals combined with other factors
• Mobile-first indexing makes mobile scores critical
• SERP features like Top Stories require good CWV

Step 1: Define goals and gather stakeholder requirements

Set clear objectives

Start your audit with specific goals:

Performance targets

• Achieve "Good" scores for all three metrics
• Prioritize mobile performance (Google's focus)
• Focus on key pages that drive business value
• Set realistic timelines for improvements

Business alignment

Key stakeholder questions:
- Which pages are most critical for revenue?
- What's the current conversion baseline?
- Are there upcoming launches/campaigns?
- What resources are available for fixes?

Identify priority pages

Not all pages need equal attention:

High-priority pages

1. Homepage: First impression and navigation hub
2. Top landing pages: High-traffic entry points
3. Conversion pages: Product, checkout, contact
4. Core content: Most-linked or shared pages

Create an audit inventory

Page Priority Matrix:
Page URL | Monthly Traffic | Conversion Value | Current CWV Score | Priority
---------|-----------------|------------------|-------------------|----------
/        | 100,000         | High             | Needs Work        | Critical
/products| 75,000          | High             | Poor              | Critical
/blog    | 50,000          | Medium           | Good              | Monitor

Step 2: Check Google Search Console Core Web Vitals report

Access field data insights

Google Search Console provides real-user metrics:

Navigation path

1. Open Google Search Console
2. Navigate to "Experience" → "Core Web Vitals"
3. Review both Mobile and Desktop reports
4. Click into specific issues for URL lists

Understanding the data

• Field data: Based on real Chrome users (CrUX data)
• 28-day rolling average: Not real-time
• 75th percentile: Focus on slower experiences
• URL grouping: Similar pages grouped together

Analyze report findings

Interpret the CWV report effectively:

Status categories

• Good URLs: Meeting all three thresholds
• Needs improvement: Failing one or more metrics
• Poor URLs: Significantly failing thresholds
• Not enough data: Insufficient traffic for measurement

Drill down into issues

For each problematic URL group:
1. Click "LCP issue" to see affected URLs
2. Note the failing metric value
3. Identify patterns (template, page type)
4. Export URL list for detailed analysis

Document baseline performance

Create a performance baseline:

Metric	Good URLs	Needs Improvement	Poor URLs	No Data
Mobile	45%	30%	20%	5%
Desktop	70%	20%	8%	2%

Step 3: Run lab tests for detailed diagnostics

Use PageSpeed Insights

Google's official testing tool provides detailed analysis:

Testing process

1. Enter URL at pagespeed.web.dev
2. Wait for analysis (30-60 seconds)
3. Review both mobile and desktop results
4. Focus on "Diagnose performance issues" section

Key sections to analyze

• Field Data: Real-user metrics (if available)
• Lab Data: Simulated test results
• Opportunities: Specific optimization suggestions
• Diagnostics: Additional performance insights

Leverage Chrome DevTools

For deeper technical analysis:

Performance panel workflow

1. Open DevTools (F12)
2. Navigate to Performance tab
3. Enable CPU throttling (4x slowdown)
4. Record page load
5. Analyze the timeline

LCP debugging

In Performance timeline:
- Look for "LCP" marker
- Identify what element triggers LCP
- Check resource loading waterfall
- Find render-blocking resources

INP investigation

Interaction testing:
1. Start Performance recording
2. Interact with page elements
3. Stop recording
4. Look for long tasks (>50ms)
5. Identify JavaScript bottlenecks

CLS detection

Layout shift debugging:
1. Enable "Layout Shift Regions" in Rendering tab
2. Reload page to see shifting elements
3. Use "Experience" section in Performance
4. Calculate cumulative shift score

Additional testing tools

Complement Google tools with alternatives:

WebPageTest

• Real device testing from multiple locations
• Filmstrip view shows visual loading
• Repeat view testing for cached performance
• Advanced metrics beyond Core Web Vitals

Lighthouse CI

• Automated testing in CI/CD pipelines
• Performance budgets enforcement
• Historical tracking of scores
• Custom audit configurations

Step 4: Identify and prioritize issues

Common LCP issues and fixes

Largest Contentful Paint typically fails due to:

Slow server response times

Problem indicators:

• TTFB (Time to First Byte) over 600ms
• Long server processing times
• Database query delays

Priority fixes:

1. Implement server-side caching
2. Optimize database queries
3. Use a CDN for global delivery
4. Upgrade hosting if needed

Render-blocking resources

Problem indicators:

• CSS files blocking initial render
• JavaScript loading before content
• Web fonts delaying text display

Priority fixes:

<!-- Inline critical CSS -->
<style>
  /* Critical above-fold styles */
</style>

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

<!-- Defer JavaScript -->
<script src="app.js" defer></script>

Slow resource load times

Problem indicators:

• Large images without optimization
• Missing image dimensions
• No lazy loading implementation

Priority fixes:

1. Compress images (WebP format)
2. Implement responsive images
3. Add width/height attributes
4. Use native lazy loading

Common INP issues and fixes

Interaction to Next Paint problems typically involve:

Heavy JavaScript execution

Problem indicators:

• Long tasks blocking main thread
• Complex event handlers
• Inefficient DOM manipulation

Priority fixes:

// Break up long tasks
function processData(items) {
  let index = 0;
  
  function processChunk() {
    const chunkEnd = Math.min(index + 100, items.length);
    
    for (; index < chunkEnd; index++) {
      // Process item
    }
    
    if (index < items.length) {
      requestIdleCallback(processChunk);
    }
  }
  
  processChunk();
}

Excessive DOM size

Problem indicators:

• Pages with 1,500+ DOM nodes
• Deep nesting (32+ levels)
• Large node counts per parent

Priority fixes:

1. Implement virtual scrolling
2. Paginate long lists
3. Remove unnecessary wrappers
4. Lazy-load below-fold content

Common CLS issues and fixes

Cumulative Layout Shift typically results from:

Images without dimensions

Problem: Browser doesn't reserve space

Fix:

<!-- Always include dimensions -->
<img src="hero.jpg" width="1200" height="600" alt="Hero image">

<!-- Or use aspect-ratio CSS -->
<style>
  img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
  }
</style>

Dynamic content injection

Problem: Content appears after initial render

Fix:

/* Reserve space for dynamic content */
.ad-container {
  min-height: 250px; /* Expected ad height */
}

.cookie-banner {
  position: fixed; /* Avoid layout shift */
  bottom: 0;
}

Web fonts causing FOUT/FOIT

Problem: Text shifts when fonts load

Fix:

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

/* Preload critical fonts */
<link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin>

Step 5: Implement fixes and monitor results

Create an implementation roadmap

Organize fixes by impact and effort:

Quick wins (implement immediately)

1. Add image dimensions
2. Implement font-display: swap
3. Enable text compression
4. Remove unused CSS/JS

Medium-term fixes (1-2 weeks)

1. Optimize images and implement lazy loading
2. Implement critical CSS inlining
3. Set up CDN for static assets
4. Reduce JavaScript bundle sizes

Long-term improvements (1-3 months)

1. Refactor JavaScript architecture
2. Implement server-side rendering
3. Redesign problematic page layouts
4. Upgrade hosting infrastructure

Testing and validation

Verify improvements after each change:

Local testing workflow

1. Make changes in development
2. Test with Lighthouse locally
3. Use Chrome DevTools for debugging
4. Validate across device types

Staging validation

Pre-deployment checklist:
□ Run PageSpeed Insights on staging
□ Test all interactive elements
□ Verify mobile experience
□ Check for visual regressions
□ Load test for performance

Continuous monitoring

Set up ongoing performance tracking:

Automated monitoring tools

• Google Search Console: Weekly review schedule
• PageSpeed Insights API: Daily automated tests
• Real User Monitoring (RUM): Continuous field data
• Lighthouse CI: Build pipeline integration

Performance budgets

{
  "budgets": [{
    "resourceSizes": [{
      "resourceType": "script",
      "budget": 300
    }, {
      "resourceType": "image",
      "budget": 500
    }],
    "metrics": [{
      "metric": "largest-contentful-paint",
      "budget": 2500
    }, {
      "metric": "cumulative-layout-shift",
      "budget": 0.1
    }]
  }]
}

Measuring success and iterating

Track improvements

Monitor progress over time:

Week 1-2 post-implementation

• Lab data improvements visible
• Initial field data changes
• User feedback collection

Month 1-2

• Field data fully updated
• Search Console reflects changes
• Ranking impacts observable

Ongoing optimization

• Monthly performance reviews
• Quarterly deep audits
• Continuous iteration based on data

Success metrics

Define what success looks like:

Metric	Baseline	Target	Actual	Status
LCP (mobile)	3.8s	<2.5s	2.2s	✓
INP (mobile)	350ms	<200ms	180ms	✓
CLS (mobile)	0.18	<0.1	0.08	✓
Good URL %	45%	>75%	78%	✓

Best practices for sustained performance

Development guidelines

Implement processes to maintain good scores:

Code review checklist

• Images have dimensions specified
• New JavaScript is non-blocking
• CSS changes don't increase bundle size
• Layout shifts are tested and prevented

Performance culture

• Include CWV in sprint planning
• Share performance wins with team
• Create performance champions
• Regular training on best practices

Tools and automation

Build performance into your workflow:

• Pre-commit hooks: Catch issues early
• CI/CD integration: Automated testing
• Monitoring alerts: Regression detection
• Performance dashboards: Team visibility

Remember: Core Web Vitals optimization is an ongoing process, not a one-time fix. Regular audits, continuous monitoring, and a performance-focused culture ensure your site maintains excellent user experience and search visibility.

The sites that win in search are those that prioritize user experience through fast, responsive, and stable page performance. Use this five-step audit process to systematically improve your Core Web Vitals and deliver the experience users and search engines reward.

Ready to optimize your Core Web Vitals? Use our performance analysis tool to get specific recommendations for your site.