Cookie Preferences

We use cookies to enhance your experience, analyze site traffic, and serve personalized content. By clicking "Accept All", you consent to our use of cookies.

Back to Blog
Performance

How to Improve Core Web Vitals: LCP, INP & CLS Fixes (2026)

April 18, 2026 14 min read SiteGrip Team

Core Web Vitals are Google's user experience metrics — LCP (loading), INP (interactivity), and CLS (visual stability). Since 2021 they've been direct ranking signals. In 2026, failing any of them will cost you positions to competitors who pass. Here's how to fix each one.

LCP

Largest Contentful Paint

Good: < 2.5 seconds

INP

Interaction to Next Paint

Good: < 200 ms

CLS

Cumulative Layout Shift

Good: < 0.1

Fixing LCP (Largest Contentful Paint)

LCP measures how long it takes for your page's largest visible element to load. Most commonly this is a hero image, banner, or large block of text.

Convert images to WebP or AVIF

WebP is 25–35% smaller than JPEG/PNG at the same quality. AVIF is another 20% smaller. Add <picture> elements to serve modern formats with JPEG/PNG fallbacks.

Add rel="preload" for your LCP image

Add <link rel="preload" as="image" href="/hero.webp"> in your <head>. This tells the browser to fetch the image immediately instead of waiting for CSS/JS to parse.

Reduce TTFB below 600ms

Use a CDN (Cloudflare, Fastly). Enable server-side rendering or static generation. Upgrade hosting if your server processes consistently exceed 600ms.

Fixing INP (Interaction to Next Paint)

INP replaced FID in March 2024. It measures the worst interaction latency across a user's full session — not just the first input. The target is under 200ms for every click, tap, and keyboard event.

  • Break up long JavaScript tasks: Any JS task over 50ms can block the main thread. Use setTimeout(), requestIdleCallback(), or the Scheduler API to yield between work.
  • Reduce third-party script impact: Tag managers, chat widgets, and analytics scripts often cause INP failures. Audit with Chrome DevTools → Performance → Long Tasks.
  • Defer non-critical JS: Use defer or async attributes on all scripts that don't need to run before first paint.

Fixing CLS (Cumulative Layout Shift)

CLS measures unexpected visual movement during page load. The most common causes:

  • Images without dimensions: Always set explicit width and height attributes on <img> elements. This reserves space before the image loads.
  • Late-loading ads and embeds: Reserve space with a minimum-height CSS rule on ad containers. Use aspect-ratio for video embeds.
  • Web fonts causing FOUT: Use font-display: swap with a closely matched fallback font. Or preload your font files with <link rel="preload">.

What is a good Core Web Vitals score?

All three metrics must hit "Good" on at least 75% of your real-user page loads (CrUX data). LCP < 2.5s, INP < 200ms, CLS < 0.1. Lab scores from PageSpeed Insights are useful but field data from CrUX is what Google uses for ranking.

Does improving Core Web Vitals directly increase rankings?

Yes, but only at the margin. Core Web Vitals are a "tiebreaker" signal — if your content relevance and authority are equal to a competitor, better vitals will rank you above them. For most sites, fixing failing vitals removes a disadvantage rather than creating a big jump.

Monitor Core Web Vitals Across Your Entire Site

SiteGrip tracks real CrUX field data per page and alerts you when vitals degrade after a deployment.

Start Free Trial