Core Web Vitals 2026: How to Score 100 on Google PageSpeed

What Core Web Vitals Actually Measure

Core Web Vitals are Google's real-world user experience metrics — confirmed Search ranking signals. Three metrics: Largest Contentful Paint (loading), Interaction to Next Paint (responsiveness), and Cumulative Layout Shift (visual stability). Green scores require understanding exactly what each metric measures and applying targeted fixes.

LCP — Largest Contentful Paint

LCP measures time until the largest visible element renders. It's almost always a hero image. Good is under 2.5 seconds. The highest-impact fixes:

Preload the LCP image — tells the browser to fetch it immediately, before parsing CSS that may also reference it:

<link rel="preload" as="image"
      href="/images/hero.webp"
      fetchpriority="high"
      type="image/webp">

Serve WebP or AVIF — WebP is 25–35% smaller than JPEG at equivalent quality:

<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" fetchpriority="high">
</picture>

Eliminate render-blocking resources — inline critical CSS in a <style> tag, defer all non-critical stylesheets and scripts.

Use a CDN — geographically close edge nodes alone can reduce LCP by 200–600ms.

INP — Interaction to Next Paint

INP replaced FID in March 2024. It measures visual response time of all interactions, reporting the 98th percentile worst case. Good is under 200ms. INP failures are caused by JavaScript blocking the main thread:

// Bad: heavy sync work blocks paint
searchInput.addEventListener('input', (e) => {
  const results = expensiveFilter(e.target.value); // 80ms block
  renderResults(results);
});

// Good: yield for immediate visual feedback
searchInput.addEventListener('input', async (e) => {
  const query = e.target.value;
  showSpinner();
  await scheduler.yield(); // let browser paint
  const results = expensiveFilter(query);
  hideSpinner(); renderResults(results);
});

CLS — Cumulative Layout Shift

CLS measures unexpected visual shifts. Good is under 0.1.

Images without dimensions cause the most CLS. Always set width/height attributes:

<img src="product.webp" alt="..." width="600" height="400">
img { max-width: 100%; height: auto; }

Web fonts causing reflow — use font-display: optional or preload critical fonts. The CSS size-adjust and ascent-override descriptors match fallback metrics to your font, dramatically reducing shift on swap.

Dynamically injected content — cookie banners, ads, and notification bars inserted above existing content must have their space reserved in the initial layout, or use overlay positioning.

Infrastructure Wins

Enable HTTP/2 or HTTP/3. Switch from gzip to Brotli (15–20% better ratios on text assets). Implement content-hashed filenames with long-lived cache headers for static assets. Target TTFB under 200ms — every millisecond of server response delay increases LCP directly.

Core Web Vitals improvement is not a one-time sprint. Build automated Lighthouse testing into your CI pipeline and review field data in Search Console monthly to catch regressions before Google does.