Core Web Vitals Guide 2026

Core Web Vitals are Google's three essential user-experience metrics: LCP, INP, and CLS. Passing all three is required for the Page Experience ranking signal and correlates directly with user retention and conversion rates.

The Three Core Web Vitals

Measuring Core Web Vitals

# Install web-vitals library
npm install web-vitals

# Measure and send to analytics
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

function sendToAnalytics({ name, value, rating, id }) {
  // Send to your analytics endpoint
  navigator.sendBeacon('/analytics', JSON.stringify({
    metric: name,
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    rating,   // 'good' | 'needs-improvement' | 'poor'
    id,
  }));
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);

Fixing LCP (Largest Contentful Paint)

• Preload the LCP image — <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
• Reduce TTFB — Use a CDN, enable caching headers, move server closer to users
• Avoid lazy-loading the LCP element — Set loading="eager" and fetchpriority="high" on the hero image
• Use modern image formats — Convert hero images to WebP/AVIF (40–80% smaller)
• Inline critical CSS — Unblock render by inlining above-the-fold styles
• Use HTTP/2 or HTTP/3 — Allows parallel asset loading

Fixing INP (Interaction to Next Paint)

// Break up long tasks with scheduler
async function processLargeList(items) {
  const CHUNK_SIZE = 100;
  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    processChunk(chunk);
    // Yield to browser between chunks
    await scheduler.yield();
  }
}

// Use isInputPending to avoid blocking interactions
function runWithYielding(tasks) {
  return new Promise(resolve => {
    function runTask() {
      while (tasks.length > 0) {
        if (navigator.scheduling?.isInputPending()) {
          // Yield to user input
          setTimeout(runTask, 0);
          return;
        }
        tasks.shift()();
      }
      resolve();
    }
    runTask();
  });
}

Fixing CLS (Cumulative Layout Shift)

<!-- Always include width + height on images -->
<img src="hero.webp" width="1200" height="600" alt="Hero" loading="eager">

<!-- CSS aspect-ratio for responsive media -->
<style>
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.ad-slot {
  min-height: 250px; /* Reserve space for late-loading ads */
}
</style>

<!-- Font-display to prevent FOUT layout shift -->
<style>
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: optional; /* Skip FOUT entirely */
  /* Or use 'swap' with size-adjust to reduce shift: */
  /* font-display: swap; size-adjust: 98%; */
}
</style>

Tools for Measuring Core Web Vitals

• PageSpeed Insights — pagespeed.web.dev — field + lab data per URL
• Google Search Console — Core Web Vitals report, URL groups, historical trends
• Chrome DevTools Performance panel — Record interactions, identify long tasks
• Lighthouse — Lab data audit with fix suggestions (see Lighthouse audit guide)
• web-vitals npm package — In-page measurement, send to your analytics
• CrUX API — Programmatic access to field data for any public URL