10 Core Web Vitals Fixes That Actually Work (2026 Guide)

These 10 fixes address the most common Core Web Vitals issues. For LCP: optimize images, use CDN, preload critical resources. For INP: reduce JavaScript, break up long tasks. For CLS: set dimensions on media, avoid inserting content above existing content.

Core Web Vitals Targets (2026)

Metric	Target	Description
LCP	≤ 2.5s	Time until main content appears
INP	≤ 200ms	Response time to user interactions
CLS	≤ 0.1	Visual stability during load

LCP Fixes (Largest Contentful Paint)

LCP measures how quickly the main content loads—usually the largest image or text block above the fold.

1. Optimize and Compress Images

Images are the LCP element on most pages. Unoptimized images are the #1 cause of poor LCP scores.

Action Steps:

• Use WebP or AVIF formats (30-50% smaller than JPEG)
• Resize images to display dimensions
• Compress with tools like Squoosh, ImageOptim, or ShortPixel
• Use responsive images with srcset

Expected Impact: 0.5-2 second LCP improvement for image-heavy pages

2. Preload Critical Resources

The browser discovers critical resources (hero images, fonts) late in loading. Preloading tells the browser to fetch them immediately.

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

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

Expected Impact: 0.3-1 second LCP improvement

3. Use a CDN

Content Delivery Networks serve assets from servers geographically close to users, reducing latency.

Recommended CDNs:

• Cloudflare (free tier available)
• Fastly (performance-focused)
• CloudFront (AWS integration)
• Vercel Edge Network

4. Reduce Server Response Time (TTFB)

Time to First Byte directly impacts LCP. Target under 200ms TTFB.

Action Steps:

• Implement server-side caching (Redis, Memcached)
• Use static site generation where possible
• Optimize database queries
• Upgrade hosting if underpowered

INP Fixes (Interaction to Next Paint)

INP measures how quickly the page responds to user interactions (clicks, taps, key presses). Replaced FID in 2024.

5. Reduce JavaScript Bundle Size

Large JavaScript files block the main thread, making the page unresponsive.

Action Steps:

• Code split—load only what’s needed for each page
• Remove unused dependencies
• Use tree shaking to eliminate dead code
• Consider lighter alternatives (date-fns vs moment, preact vs react)

6. Break Up Long Tasks

JavaScript tasks over 50ms block the main thread, preventing response to user input.

// Instead of one long operation that blocks for 200ms:
// processAllItems(items);

// Break into smaller tasks with yielding:
async function processItemsAsync(items) {
  for (const item of items) {
    processItem(item);
    // Yield to main thread every 10 items
    if (index % 10 === 0) {
      await scheduler.yield(); // or setTimeout(0)
    }
  }
}

7. Defer Non-Critical JavaScript

Scripts not needed for initial interaction should load after the page is interactive.

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

<!-- Or load after interaction -->
<script>
  document.addEventListener('scroll', () => {
    import('/heavy-feature.js');
  }, { once: true });
</script>

CLS Fixes (Cumulative Layout Shift)

CLS measures visual stability—how much the layout shifts while loading.

8. Set Explicit Dimensions on Images and Videos

Without width/height attributes, browsers can’t reserve space for images until they load.

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

<!-- For responsive images, use aspect-ratio CSS -->
<style>
  .responsive-img {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
  }
</style>

Expected Impact: Often fixes CLS entirely for image-caused shifts

9. Reserve Space for Ads and Embeds

Ads, iframes, and embeds that load late push content down. Reserve their space.

/* Reserve space for ad slot */
.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

/* Reserve space for video embed */
.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

10. Avoid Inserting Content Above Existing Content

Cookie banners, notification bars, and dynamically loaded content that appears above existing content causes CLS.

Solutions:

• Place banners at the bottom of the viewport
• If top placement needed, reserve space before page load
• Use transforms instead of height/margin changes for animations
• Avoid layout-triggering CSS properties (width, height, top, left)

Check Your Core Web Vitals

Rankture checks LCP, INP, and CLS on your pages and provides specific fix recommendations.

Check Your CWV

Other Tools

• PageSpeed Insights: Lab + field data from Google
• Google Search Console: Field data for all your pages
• Chrome DevTools: Performance panel for debugging
• Web Vitals Extension: Real-time CWV in browser

Frequently Asked Questions

What are Core Web Vitals?

Core Web Vitals are three metrics Google uses to measure page experience: LCP measures loading speed, INP measures interactivity, and CLS measures visual stability. They are confirmed ranking factors.

What are good Core Web Vitals scores?

Good scores: LCP under 2.5 seconds, INP under 200 milliseconds, CLS under 0.1. Pages passing all three get a ranking boost.

How long does it take to see ranking improvements after fixing CWV?

After fixing Core Web Vitals, expect 2-4 weeks for lab data changes and 28 days for field data to update. Ranking changes may follow within 1-2 weeks after field data improves.

Which Core Web Vital is most important?

All three matter, but LCP often has the biggest impact and is typically hardest to fix. Poor LCP causes users to abandon pages.

Why are my lab scores good but field data poor?

Lab data tests from fast connections in controlled conditions. Field data reflects real users with varying devices and connections. Optimize for the 75th percentile of real users.

Related Articles

• LCP Optimization Guide
• INP Optimization Guide
• CWV Monitoring
• Site Speed Guide