Core Web Vitals in 2026: what actually moves the needle

Core Web Vitals have been a ranking signal long enough to be well-understood now. The metrics haven't changed much (LCP, INP, and CLS are still the three that matter), but the common failure modes have. Here's what I see most often and what actually fixes them.

LCP: the image is almost always the problem

Largest Contentful Paint measures how long until the biggest visible element is painted. On most marketing sites, that element is a hero image. The fix is almost always the same:

<img
  src="/hero.webp"
  alt="Hero"
  width="1200"
  height="600"
  fetchpriority="high"
  decoding="sync"
/>

Three things matter here: WebP or AVIF instead of JPEG/PNG, explicit width and height so the browser reserves space, and fetchpriority="high" so the image loads before the browser works through the rest of the page. In Next.js, priority on the <Image> component handles this automatically.

A good LCP is under 2.5 seconds. Most sites I audit fail because the hero image is large, in JPEG, and gets no priority hint.

INP: the interaction that took too long

Interaction to Next Paint replaced FID in 2024. It measures how quickly the page responds to clicks, taps, and keyboard input. The failures here are usually JavaScript-heavy: a click handler that does too much synchronous work.

The fix is almost always deferring non-critical JavaScript and breaking long tasks into smaller chunks. If a third-party script is the culprit (analytics, chat widgets, tag managers), load it with defer or after the page has loaded:

// Load non-essential scripts after hydration
useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://third-party.example.com/widget.js";
  script.defer = true;
  document.body.appendChild(script);
}, []);

CLS: the layout shift no one spotted

Cumulative Layout Shift penalises elements that move after the page loads. The most common culprit is an unsized image or a font that swaps in and pushes text down.

Always set dimensions on images. For fonts, use font-display: swap with a well-matched fallback, or better, use a variable font with font-display: optional to avoid the swap entirely.

The optimisation that matters most

All of this is secondary to the most impactful choice: static output. A site that prerenders to HTML and is served from a CDN will pass Core Web Vitals without heroic optimisation. A server-rendered site with a slow origin will fail regardless of how the images are sized.

Build static where you can. Optimise images. Defer third-party scripts. That covers 90% of the wins.