Leo Scanner
←All posts

How to Improve Your Website's Core Web Vitals in 2026: Complete Optimization Guide

Core Web Vitals have fundamentally changed how we approach website optimization. What started as Google's initiative to measure user experience has become one of the most important ranking factors in search algorithms. In 2026, ignoring Core Web Vitals isn't just bad for user experience—it's detrimental to your search visibility and business success.

This comprehensive guide will teach you everything you need to know about optimizing your website's Core Web Vitals. You'll learn practical strategies, implementation techniques, and monitoring approaches that deliver real results. Whether you're dealing with a slow WordPress site or a complex web application, these methods will help you achieve excellent Core Web Vitals scores.

Understanding Core Web Vitals: The Foundation

Before diving into optimization strategies, let's understand what we're optimizing. Core Web Vitals measure three critical aspects of user experience that directly impact how users interact with your website.

Largest Contentful Paint (LCP) - Loading Performance

What it measures: The time it takes for the largest content element to load and become visible to users.

Target score: Under 2.5 seconds for good performance.

Why it matters: LCP represents when users perceive your page as "loaded." A slow LCP means users are waiting longer to see your main content, leading to higher bounce rates and lower engagement.

Common LCP elements:

  • Large images or image carousels
  • Video thumbnails or hero videos
  • Large text blocks or headlines
  • Background images with significant content

Interaction to Next Paint (INP) - Responsiveness

What it measures: How quickly your page responds to user interactions throughout the entire page lifecycle.

Target score: Under 200 milliseconds for good performance.

Why it matters: INP replaced First Input Delay (FID) in March 2024 because it provides a more comprehensive measure of responsiveness. While FID only measured the first interaction, INP considers all interactions, giving a better picture of user experience.

Common interaction types measured:

  • Clicks and taps
  • Keyboard inputs
  • Mouse interactions
  • Touch gestures

Cumulative Layout Shift (CLS) - Visual Stability

What it measures: How much content moves around unexpectedly as the page loads.

Target score: Under 0.1 for good performance.

Why it matters: Nothing frustrates users more than clicking a button just as an advertisement loads and shifts the content, causing them to click the wrong element. CLS measures these unexpected layout shifts that harm user experience.

Common CLS causes:

  • Images without specified dimensions
  • Dynamic content insertion
  • Web fonts causing text reflow
  • Advertisements and embeds loading asynchronously

Optimizing Largest Contentful Paint (LCP)

Image Optimization Strategies

Images are the most common LCP elements, making image optimization your highest-impact strategy for improving LCP scores.

Implement next-generation image formats:

<picture>
  <source srcset="hero-image.avif" type="image/avif">
  <source srcset="hero-image.webp" type="image/webp">
  <img src="hero-image.jpg" alt="Hero image" width="1200" height="600">
</picture>

AVIF images can be up to 50% smaller than JPEG while maintaining the same quality. WebP provides 25-30% better compression than JPEG. Always include fallbacks for older browsers.

Use responsive images with srcset:

<img src="hero-mobile.jpg"
     srcset="hero-mobile.jpg 480w, 
             hero-tablet.jpg 768w, 
             hero-desktop.jpg 1200w"
     sizes="(max-width: 768px) 480px, 
            (max-width: 1024px) 768px, 
            1200px"
     width="1200" height="600"
     alt="Product hero image">

This ensures users download appropriately sized images for their devices, significantly reducing load times on mobile devices.

Implement aggressive image compression: Use tools like TinyPNG, ImageOptim, or Squoosh to compress images without visible quality loss. For e-commerce sites, aim for 80-85% JPEG quality as the sweet spot between file size and visual quality.

Preload critical images:

<link rel="preload" as="image" href="hero-image.webp" type="image/webp">
<link rel="preload" as="image" href="hero-image.jpg" type="image/jpeg">

Preloading tells the browser to prioritize downloading critical images, improving LCP for image-heavy pages.

Server and Hosting Optimization

Optimize Time to First Byte (TTFB): Your server response time directly impacts LCP. Target TTFB under 200 milliseconds with these strategies:

  • Use SSD storage instead of traditional hard drives
  • Implement server-side caching with Redis or Memcached
  • Optimize database queries and add proper indexing
  • Consider upgrading to faster hosting plans or dedicated servers
  • Use a Content Delivery Network (CDN) to serve content from locations closer to users

Implement effective caching strategies:

# Apache .htaccess example
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/gif "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
</IfModule>

Proper caching reduces repeat load times dramatically, especially benefiting returning visitors.

Critical Resource Optimization

Eliminate render-blocking resources: CSS and JavaScript in the <head> section can delay LCP. Use these techniques to minimize their impact:

<!-- Inline critical CSS -->
<style>
  .hero { background: url('hero.webp'); height: 100vh; }
  .header { position: fixed; top: 0; z-index: 100; }
</style>

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

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

Use resource hints effectively:

<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com">

<!-- DNS prefetch for third-party resources -->
<link rel="dns-prefetch" href="//www.google-analytics.com">

These hints help browsers establish connections to external resources early, reducing their impact on LCP.

Optimizing Interaction to Next Paint (INP)

JavaScript Performance Optimization

JavaScript is the primary culprit for poor INP scores. Heavy JavaScript execution can block the main thread, preventing the browser from responding to user interactions promptly.

Identify and fix long tasks: Use Chrome DevTools Performance tab to identify JavaScript tasks taking longer than 50 milliseconds. These "long tasks" block user interactions and hurt INP scores.

Common solutions include:

  • Breaking large JavaScript functions into smaller chunks
  • Using setTimeout or requestIdleCallback to yield control back to the browser
  • Implementing code splitting to load JavaScript on demand
  • Removing or optimizing heavy third-party scripts

Optimize event handlers:

// Bad: Heavy computation in event handler
button.addEventListener('click', () => {
  // Heavy computation that blocks the main thread
  performExpensiveCalculation();
  updateUI();
});

// Good: Use setTimeout to break up work
button.addEventListener('click', () => {
  setTimeout(() => {
    performExpensiveCalculation();
    updateUI();
  }, 0);
});

// Better: Use requestIdleCallback for non-urgent work
button.addEventListener('click', () => {
  updateUI(); // Immediate response
  requestIdleCallback(() => {
    performExpensiveCalculation(); // Background work
  });
});

Debounce frequent interactions:

// Debounce search input to prevent excessive API calls
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

const searchInput = document.getElementById('search');
const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener('input', debouncedSearch);

Third-Party Script Management

Third-party scripts are major contributors to poor INP scores. They often run expensive code that blocks the main thread, preventing timely responses to user interactions.

Audit your third-party scripts: Review all scripts loading on your pages:

  • Analytics and tracking scripts
  • Social media widgets
  • Advertisement scripts
  • Live chat tools
  • A/B testing tools

Load third-party scripts efficiently:

<!-- Load non-critical scripts after page interaction -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Load analytics after initial page load
    const script = document.createElement('script');
    script.src = 'https://analytics.example.com/tracking.js';
    document.head.appendChild(script);
  });
</script>

<!-- Use async or defer appropriately -->
<script src="analytics.js" async></script> <!-- For independent scripts -->
<script src="ui-enhancements.js" defer></script> <!-- For DOM-dependent scripts -->

Implement lazy loading for widgets:

// Load social media widgets only when users scroll to them
const observerOptions = {
  rootMargin: '50px 0px',
  threshold: 0.01
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadSocialWidget(entry.target);
      observer.unobserve(entry.target);
    }
  });
}, observerOptions);

document.querySelectorAll('.social-widget-placeholder').forEach(el => {
  observer.observe(el);
});

Server-Side Rendering and Hydration

For JavaScript-heavy applications, especially those using React, Vue, or Angular, poor hydration strategies can severely impact INP.

Optimize hydration timing:

  • Implement progressive hydration to activate components as needed
  • Use selective hydration to only hydrate interactive components
  • Consider static site generation for content-heavy pages
  • Implement streaming server-side rendering for faster initial responses

Minimize JavaScript bundle sizes:

// Use dynamic imports for code splitting
const loadChart = async () => {
  const { Chart } = await import('./chart-library.js');
  return new Chart();
};

// Only load when user requests it
document.getElementById('show-chart').addEventListener('click', async () => {
  const chart = await loadChart();
  chart.render();
});

Optimizing Cumulative Layout Shift (CLS)

Dimension Specification and Space Reservation

The most effective way to prevent layout shifts is reserving space for content before it loads.

Set explicit dimensions for all media:

<!-- Always specify width and height -->
<img src="product.jpg" width="400" height="300" alt="Product image">

<!-- Use CSS aspect ratio for responsive images -->
<style>
.responsive-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
</style>
<img src="product.jpg" class="responsive-image" alt="Product image">

<!-- Reserve space for videos -->
<video width="800" height="600" poster="video-thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

Reserve space for dynamic content:

/* Reserve minimum height for dynamic content areas */
.dynamic-content {
  min-height: 200px;
  transition: height 0.3s ease;
}

/* Use skeleton screens while loading */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

Advertisement and Embed Optimization

Advertisements and embedded content are major sources of layout shift because they often load asynchronously and don't reserve proper space.

Reserve space for advertisements:

<!-- Reserve exact ad slot dimensions -->
<div class="ad-container" style="width: 728px; height: 90px;">
  <div id="ad-slot-1"></div>
</div>

<style>
.ad-container {
  background: #f5f5f5;
  border: 1px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-container::before {
  content: "Advertisement";
  color: #999;
  font-size: 12px;
}
</style>

Optimize embedded content:

<!-- Use aspect ratio containers for responsive embeds -->
<div class="embed-container">
  <iframe src="https://www.youtube.com/embed/video-id" 
          frameborder="0" 
          allowfullscreen></iframe>
</div>

<style>
.embed-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

Font Loading Optimization

Web fonts can cause significant layout shifts when fallback fonts have different metrics than the loaded fonts.

Use font-display for better control:

@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap; /* Show fallback immediately, swap when custom font loads */
}

/* Alternative: Use fallback for initial render, no swapping */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: optional; /* Only use if cached or loads very quickly */
}

Match fallback font metrics:

/* Adjust fallback font to match custom font metrics */
body {
  font-family: 'CustomFont', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Use size-adjust to match x-height and other metrics */
@font-face {
  font-family: 'Helvetica Neue Fallback';
  src: local('Helvetica Neue');
  size-adjust: 95%; /* Adjust to match custom font */
}

Preload critical fonts:

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

Advanced Core Web Vitals Optimization

Progressive Enhancement Strategies

Build your website with progressive enhancement in mind, ensuring excellent Core Web Vitals even without JavaScript.

Start with a solid HTML foundation:

<!-- Functional without JavaScript -->
<form action="/search" method="GET">
  <input type="search" name="q" placeholder="Search products...">
  <button type="submit">Search</button>
</form>

<!-- Enhanced with JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('form');
  form.addEventListener('submit', handleAjaxSearch);
});
</script>

Layer enhancements gradually:

  1. Core functionality works with HTML only
  2. CSS adds visual polish and responsive design
  3. JavaScript adds interactive enhancements
  4. Advanced features load on demand

Service Worker Implementation

Service workers can dramatically improve Core Web Vitals for repeat visitors by caching resources strategically.

Basic service worker setup:

// sw.js
const CACHE_NAME = 'v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/js/main.js',
  '/images/hero.webp'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Register the service worker:

// main.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => console.log('SW registered'))
    .catch(error => console.log('SW registration failed'));
}

Performance Monitoring and Continuous Optimization

Implement Real User Monitoring (RUM):

// Monitor Core Web Vitals in production
import {getLCP, getFID, getCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  // Send to your analytics service
  gtag('event', metric.name, {
    value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
    event_label: metric.id,
    non_interaction: true,
  });
}

getLCP(sendToAnalytics);
getFID(sendToAnalytics);
getCLS(sendToAnalytics);

Set up automated monitoring: Use tools like Leo Scanner to automatically monitor your Core Web Vitals scores over time. Set up alerts when scores drop below acceptable thresholds so you can address issues before they impact your search rankings or user experience.

A/B test performance optimizations:

// Test different image formats
const supportsWebP = (() => {
  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = 1;
  return canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
})();

const imageFormat = supportsWebP ? 'webp' : 'jpg';
const heroImage = `hero-image.${imageFormat}`;

// Track which format performs better
analytics.track('image_format_test', {
  format: imageFormat,
  lcp_candidate: true
});

Common Core Web Vitals Mistakes to Avoid

LCP Optimization Mistakes

Loading non-critical resources too early: Don't preload resources that aren't part of the LCP element. This wastes bandwidth and can slow down the actual LCP resource.

Over-optimizing images: While compression is important, over-compressing images can hurt user experience. Find the balance between file size and visual quality.

Forgetting about mobile: LCP optimization often focuses on desktop, but mobile users typically have slower connections and less powerful devices. Always test and optimize for mobile first.

INP Optimization Mistakes

Focusing only on initial load: Unlike FID, INP measures responsiveness throughout the page lifecycle. Don't just optimize the initial page load—ensure interactions remain fast as users navigate and interact with your site.

Ignoring passive interactions: While clicks and keyboard inputs are obvious, don't forget about scroll events, hover states, and touch gestures that can impact INP scores.

Over-relying on third-party performance tools: Many third-party scripts claim to be "optimized" but still impact INP. Always test their real-world performance on your specific site.

CLS Optimization Mistakes

Using CSS transforms incorrectly: While CSS transforms don't cause layout shifts, animating from transform: scale(0) to transform: scale(1) can still cause visual instability if not handled properly.

Ignoring font fallbacks: Even with font-display: swap, poor fallback font choices can cause significant layout shifts when custom fonts load.

Not testing dynamic content: CLS can occur throughout the page lifecycle. Test how user interactions, form submissions, and dynamic content updates affect your CLS score.

Tools and Testing for Core Web Vitals

Essential Testing Tools

Google PageSpeed Insights:

  • Provides both lab and real-world Core Web Vitals data
  • Offers specific optimization recommendations
  • Shows how your site performs compared to other sites

Chrome DevTools:

  • Lighthouse panel for lab testing
  • Performance panel for detailed analysis
  • Core Web Vitals overlay for real-time monitoring

Google Search Console:

  • Shows real-user Core Web Vitals data
  • Identifies which pages need improvement
  • Tracks improvements over time

Leo Scanner: Regular automated monitoring helps you catch Core Web Vitals regressions before they impact your search rankings. It provides comprehensive reports that make it easy to identify and prioritize optimization opportunities.

Testing Strategy

Test on real devices: Emulators and simulators don't always reflect real-world performance. Test on actual mobile devices with slower connections.

Test throughout the user journey: Don't just test the homepage—measure Core Web Vitals on product pages, checkout flows, and other critical pages.

Monitor continuously: Core Web Vitals can regress quickly as you add new features or content. Set up automated monitoring to catch issues early.

Measuring Success and ROI

Setting Realistic Goals

Start with baseline measurements: Before optimizing, establish your current Core Web Vitals scores across all important pages. This gives you a benchmark to measure improvements against.

Set incremental targets: Don't aim to go from poor to excellent scores overnight. Set incremental goals:

  • Month 1: Move from poor to needs improvement
  • Month 2: Achieve good scores on critical pages
  • Month 3: Maintain good scores while adding new features

Tracking Business Impact

Monitor key business metrics:

  • Bounce rate changes after Core Web Vitals improvements
  • Conversion rate improvements on optimized pages
  • Search ranking improvements for target keywords
  • User engagement metrics like session duration and pages per session

Calculate the ROI of performance optimization: Track revenue impact from improved Core Web Vitals:

  • Increased organic traffic from better search rankings
  • Higher conversion rates from improved user experience
  • Reduced hosting costs from more efficient resource usage
  • Decreased customer support requests due to better site reliability

Conclusion

Optimizing Core Web Vitals isn't just about pleasing Google's algorithms—it's about creating better experiences for your users. Sites with excellent Core Web Vitals consistently see improvements in user engagement, conversion rates, and search rankings.

The strategies in this guide provide a comprehensive roadmap for Core Web Vitals optimization. Start with the highest-impact changes like image optimization and JavaScript performance improvements, then gradually implement more advanced techniques like service workers and progressive enhancement.

Remember that Core Web Vitals optimization is an ongoing process, not a one-time task. As you add new features and content, continuously monitor your scores and make adjustments to maintain excellent performance. The investment in Core Web Vitals optimization pays dividends through improved user experience, better search rankings, and stronger business results.

Use tools like Leo Scanner to automate your Core Web Vitals monitoring and get actionable recommendations for improvement. With consistent effort and the right tools, you can achieve and maintain excellent Core Web Vitals scores that benefit both your users and your business.

Check your website for free

Leo Scanner checks your site for broken links, SEO issues, security problems, and more — in 30 seconds.

Scan your website →