Core Web Vitals Failing: How to Fix LCP, CLS, and INP in 2026

Core Web Vitals (CWV) are Google's set of real-world performance metrics that measure loading speed, visual stability, and interactivity. A 'Needs Improvement' or 'Poor' rating in the CWV report in Google Search Console directly impacts your ranking eligibility for the Page Experience signal. As of 2026, INP (Interaction to Next Paint) has fully replaced FID as the interactivity metric.

Understanding the three metrics

LCP (Largest Contentful Paint) — time until the largest visible element (usually a hero image or H1) is rendered. Target: under 2.5 seconds.
CLS (Cumulative Layout Shift) — total unexpected movement of page elements during load. Target: under 0.1.
INP (Interaction to Next Paint) — latency between a user interaction (click, tap, key press) and the browser's next visual response. Target: under 200ms.

✦ Insight

CWV scores in GSC are based on real Chrome User Experience Report (CrUX) data — actual visits from Chrome users. PageSpeed Insights shows both lab data (simulated) and field data (real users). Always prioritise fixing field data failures, not just lab test numbers.

Fixing LCP (Largest Contentful Paint)

Poor LCP is almost always caused by a slow-loading hero image or render-blocking resources. The fix checklist:

Serve the LCP image from the same origin (not a third-party CDN with a long DNS lookup)
Add fetchpriority="high" to the <img> tag for your LCP element — this is the single highest-impact LCP fix
Preload the LCP image in <head>: <link rel="preload" as="image" href="/hero.webp">
Convert images to WebP or AVIF — typically 30–50% smaller than PNG/JPEG
Ensure the server responds in under 600ms (TTFB). A slow server delays everything downstream
Remove render-blocking CSS and JS from <head> — defer non-critical scripts

<!-- Correct LCP image markup -->
<img
  src="/hero.webp"
  alt="Hero image"
  width="1200"
  height="630"
  fetchpriority="high"
  loading="eager"
/>

<!-- Preload in <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

Fixing CLS (Cumulative Layout Shift)

CLS spikes are caused by elements that don't have reserved space before they load. The most common culprits: images and videos without explicit width/height attributes, ads injected above content, and web fonts causing text to reflow (FOUT).

Always set explicit width and height on every <img> and <video> element — even if CSS overrides the visual size, the browser uses these to reserve layout space
Reserve fixed height for ad slots and third-party embeds before they load
Use font-display: optional or font-display: swap with size-adjust to minimise font-swap layout shift
Avoid inserting content above existing content after the page loads (common with cookie banners and notification bars)

Fixing INP (Interaction to Next Paint)

Poor INP means the browser is too busy to respond visually within 200ms of a user interaction. This is usually caused by long JavaScript tasks blocking the main thread. Diagnosing INP requires the Chrome DevTools Performance panel or Web Vitals extension — lab tools won't catch it reliably.

Use Chrome DevTools → Performance tab → record an interaction and look for long tasks (red bars > 50ms)
Break up long synchronous JS tasks using scheduler.postTask() or yielding with setTimeout(fn, 0)
Defer or lazy-load third-party scripts (analytics, chat widgets, A/B test tools) — these are the most common INP culprits
Avoid heavy DOM manipulation on every user interaction — batch DOM reads/writes with requestAnimationFrame
Audit your React/Vue/Angular render cycles — unnecessary re-renders cause cascading main-thread work

⚠️ Warning

Third-party scripts are responsible for more than 60% of INP failures on content sites. A single tag manager container loading 15 third-party tags can routinely push INP past 500ms. Run a coverage report in Chrome DevTools to identify which scripts are blocking interactions.

Verifying the fix

After deploying fixes, CWV field data in GSC lags by 28 days — Google uses a rolling 28-day window. Use the Chrome Web Vitals extension or PageSpeed Insights field data to get a faster read. Once your field data consistently shows green, the GSC report will update within 4–5 weeks.

💡 Tip

Core Web Vitals failures are one of the crisis types in SEOdisaster's Technical SEO chapter. The game puts you under time pressure to triage which metric is tanking your ranking position and make the right call between quick wins and structural fixes.