How to Fix Core Web Vitals: A Step-by-Step Guide (2026)

Why Fixing Core Web Vitals Is Worth Your Time

Core Web Vitals are Google's three primary page experience signals — Largest Contentful Paint (LCP), Total Blocking Time (TBT), and Cumulative Layout Shift (CLS). They directly affect two things most businesses care about: organic search rankings and Google Ads Quality Score. A site that moves from "poor" to "good" across all three can see meaningful ranking improvements within 4–6 weeks of fixes being crawled.

This guide covers the most impactful fixes for each metric, in order of effort-to-reward ratio.

How to Fix LCP (Largest Contentful Paint)

LCP measures how fast your main content loads. The target is under 2.5 seconds. The most common culprits:

1. Compress and convert your hero image

The LCP element is almost always a hero image. If it's a JPEG over 200KB, convert it to WebP and compress it to under 100KB. Tools: Squoosh (free, browser-based), ImageOptim (Mac). This single change moves LCP more than any other fix for most sites.

2. Add fetchpriority="high" to your hero image

Add fetchpriority="high" to the img tag for your LCP element. This tells the browser to prioritise loading it over other resources. Takes 30 seconds to implement, measurable impact.

3. Preconnect to your CDN and font providers

Add <link rel="preconnect"> tags in your HTML head for Google Fonts, your image CDN, and any external API domains. Eliminates DNS lookup delays for critical resources.

4. Use a CDN

If you're on shared hosting, your server response time (TTFB) is adding 1–3 seconds before any content loads. Moving to a CDN-backed host (Vercel, Netlify, Cloudflare Pages) typically cuts TTFB by 70–80%.

How to Fix TBT (Total Blocking Time)

TBT measures JavaScript blocking the main thread during load. Target: under 200ms. The fixes:

1. Audit and defer third-party scripts

Open Chrome DevTools → Performance tab → record a page load. Every long task over 50ms will show. Common offenders: Google Tag Manager loading 6+ pixels, live chat widgets, heatmap tools, social share buttons. Add defer or load them after user interaction.

2. Remove unused JavaScript

Run Chrome Lighthouse and check the "Reduce unused JavaScript" opportunity. Dead code from libraries you're no longer using still gets parsed by the browser on every load.

3. Code-split large bundles

If you're on React/Next.js, ensure route-based code splitting is active. Components not needed on initial load should be lazy-loaded with dynamic() imports.

How to Fix CLS (Cumulative Layout Shift)

CLS measures visual instability — elements jumping as the page loads. Target: under 0.1. The fixes:

1. Add explicit width and height to all images

The most common CLS cause: images without dimensions. The browser doesn't know how much space to reserve, so content shifts when the image loads. Add width and height attributes to every img element.

2. Reserve space for ads and embeds

Ad slots, cookie banners, and embedded widgets that load after page render cause large layout shifts. Set a minimum height on their containers so the space is reserved before they load.

3. Use font-display: swap for custom fonts

Text rendered in a system font that jumps to your custom font causes CLS. Adding font-display: swap eliminates the shift by using the system font until the custom one is ready.

How to Measure Your Progress

After making changes, run PageSpeed Insights on your URL and compare scores. Allow 2–3 weeks for Google to recrawl and update your Search Console data. A free 5-pillar audit will show your current scores alongside an estimated monthly revenue impact — useful for prioritising which metric to fix first.