Core Web Vitals failures are not just a technical inconvenience — they are a confirmed Google ranking signal. Pages in the Poor category face a ranking disadvantage against competitors with equivalent content but better performance. The good news: most Core Web Vitals failures have straightforward, well-documented fixes. Here is the step-by-step process from finding failures to resolving them.

Quick Answer: To fix Core Web Vitals failures: first identify which pages are failing and which specific metric is failing using Google Search Console. Then diagnose the root cause of that metric using PageSpeed Insights. LCP failures are most often caused by large unoptimised images — convert to WebP and add fetchpriority="high". CLS failures are most often missing image dimensions — add width and height attributes. INP failures are caused by JavaScript blocking the main thread — defer or remove unused scripts.

Step 1: Find exactly which pages are failing in Search Console

Do not guess — find the specific failing pages with data:

  1. Open Google Search Console
  2. Go to Experience → Core Web Vitals
  3. Click the Mobile tab — Google uses mobile field data for ranking
  4. Click Open Report under Poor
  5. Export the list of Poor URLs — these are your priority fixes

Focus on mobile first. Desktop scores matter but Google's ranking signals are based on mobile field data. Use our page speed tool to quickly check any specific URL.

Step 2: Identify which metric is failing for each page

Core Web Vitals has three metrics. Each has different causes and different fixes:

  • LCP (Largest Contentful Paint) — loading speed. How quickly the main visible content appears. Poor = over 4 seconds.
  • INP (Interaction to Next Paint) — responsiveness. How quickly the page responds to taps or clicks. Poor = over 500ms.
  • CLS (Cumulative Layout Shift) — visual stability. How much content unexpectedly moves during loading. Poor = over 0.25.

In Search Console, click any failing page and it shows which specific metric is Poor. Diagnose each metric separately — the fixes are completely different.

Step 3: Fix LCP (slow loading) issues

Poor LCP is the most common failure. The causes in priority order:

Cause 1: Large unoptimised hero image (fixes 70% of LCP issues)

  1. Identify your LCP element — in Chrome DevTools, open Lighthouse or Performance tab and find what element Google labels as LCP
  2. Convert that image to WebP format (free tools: Squoosh.app, CloudConvert)
  3. Compress it to the smallest size that looks acceptable at full screen width
  4. Add fetchpriority="high" to the LCP image tag so the browser prioritises loading it
  5. Remove any loading="lazy" attribute from the LCP image — lazy loading delays it

Cause 2: Slow server response time

  • Check your Time to First Byte (TTFB) in PageSpeed Insights — it should be under 600ms
  • If TTFB is high, enable caching on your server, use a CDN, or upgrade your hosting plan

Cause 3: Render-blocking CSS or JavaScript

  • Use PageSpeed Insights to identify render-blocking resources
  • Add defer attribute to non-critical JavaScript files
  • Move critical CSS inline and load non-critical CSS asynchronously

Step 4: Fix CLS (layout shift) issues

CLS is the most fixable metric — the causes are almost always one of three things:

Fix 1: Add width and height to all images (most common cause)

<!-- Wrong (causes layout shift) -->
<img src="image.webp" alt="Description">

<!-- Correct (reserves space before loading) -->
<img src="image.webp" alt="Description" width="800" height="600">

Adding explicit dimensions tells the browser how much space to reserve before the image loads, eliminating the jump.

Fix 2: Reserve space for ad slots
Add a minimum height to every ad container so content does not jump when ads load.

Fix 3: Avoid inserting content above the fold after load
Cookie banners, notification bars, and dynamic content inserted above existing content after page load all cause CLS. Position these elements so they do not push existing content down.

Step 5: Fix INP (interaction responsiveness) issues

INP failures are almost always caused by JavaScript blocking the browser's main thread. When JavaScript is running, the browser cannot respond to user interactions.

Fix 1: Identify and remove unused JavaScript

  • In Chrome DevTools → Coverage tab, load your page and see which JavaScript code is never executed
  • Remove unused third-party scripts — chat widgets, analytics, ad scripts you do not need on every page

Fix 2: Defer non-critical JavaScript

  • Add defer or async to scripts that do not need to run before the page is interactive
  • Load third-party scripts after the main content has loaded using a tag manager firing rule

Fix 3: Break up long JavaScript tasks

  • Any JavaScript task taking over 50ms blocks the main thread
  • In Chrome DevTools → Performance tab, identify long tasks and refactor them to execute in smaller chunks

Step 6: Verify your fixes in the field data

After implementing fixes, PageSpeed Insights will show improved lab scores immediately. But Search Console field data updates more slowly — it takes 28 days of real user data to refresh.

Monitor your Core Web Vitals report in Search Console monthly. Pages should move from Poor → Needs Improvement → Good over successive reporting periods as Google collects updated field data from real Chrome users.

Summary: Fixing Core Web Vitals step by step

  • Step 1: Find failing pages in Search Console → Experience → Core Web Vitals → Mobile
  • Step 2: Identify which metric (LCP, CLS, INP) is failing for each page
  • Step 3 LCP: Convert hero image to WebP, add fetchpriority="high", fix TTFB if needed
  • Step 4 CLS: Add width and height to all images, reserve space for ads, avoid injecting content above fold
  • Step 5 INP: Remove unused JavaScript, defer non-critical scripts, break up long tasks
  • Step 6: Monitor Search Console field data over 28 days to confirm improvement

Continue reading: How do I optimise an old blog post that stopped getting traffic?