Google Core Web Vitals directly impact your search rankings. In 2026, the metrics have evolved, and achieving perfect scores requires modern optimization techniques.

The Three Core Web Vitals

• LCP (Largest Contentful Paint): Should be under 2.5 seconds
• INP (Interaction to Next Paint): Should be under 200ms
• CLS (Cumulative Layout Shift): Should be under 0.1

Optimizing LCP

Preload Critical Resources

<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>

Use Modern Image Formats

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

Optimizing INP

INP replaced FID in 2024. It measures the delay of all interactions, not just the first.

// Break up long tasks
function processLargeDataset(data) {
  const chunks = splitIntoChunks(data, 100);
  chunks.forEach((chunk, i) => {
    setTimeout(() => processChunk(chunk), i * 0);
  });
}

// Or use the Scheduler API
scheduler.yield().then(() => {
  // Continue after yielding to the browser
});

Optimizing CLS

/* Always set dimensions on images and videos */
img, video {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Reserve space for dynamic content */
.ad-slot {
  min-height: 250px;
  contain: layout;
}

Performance Budget

// package.json
{
  "performance": {
    "maxAssetSize": 100000,
    "maxEntrypointSize": 250000
  }
}

Measuring in Production

// Use the web-vitals library
import { onLCP, onINP, onCLS } from "web-vitals";

onLCP(console.log);
onINP(console.log);
onCLS(console.log);

Quick Wins Checklist

• Enable Brotli compression
• Use a CDN for static assets
• Implement resource hints (preconnect, prefetch)
• Lazy load below-the-fold images
• Minimize third-party scripts
• Use font-display: swap

Conclusion

Core Web Vitals optimization is an ongoing process. Monitor your metrics with tools like PageSpeed Insights, Chrome UX Report, and web-vitals library. Small improvements compound into significant ranking boosts.