SEO & Content

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

KF
Khalid Farhan
··11 min read

Google's page experience signals are more important than ever. Here's the complete practical guide to understanding and improving your Core Web Vitals.

Core Web Vitals are Google's set of specific page experience metrics that form part of the ranking algorithm. They measure real-world user experience: how fast does the main content load, how responsive is the page to user input, and how visually stable is it while loading? Understanding these metrics, what causes problems, and how to fix them is essential technical SEO knowledge in 2026.

Why Core Web Vitals Matter for SEO

Google has used page experience signals as ranking factors since 2021. Core Web Vitals are the most specific and measurable of these signals. Sites that perform well on Core Web Vitals have a ranking advantage over sites with poor performance, particularly for competitive queries where other signals are similar between competitors.

The honest assessment of the ranking impact: Core Web Vitals are a tiebreaker, not a primary determinant. A page with excellent content, strong backlinks, and good E-E-A-T signals but mediocre Core Web Vitals will outrank a technically perfect page with weak content. But in competitive niches where the content and authority signals between competitors are close, CWV performance can and does make a meaningful difference.

There's also a direct conversion argument that's separate from SEO. Faster, more stable pages convert better. Google's own research shows clear correlations between poor Core Web Vitals and higher bounce rates and lower conversion rates. Fixing CWV is good for both search ranking and business performance.

LCP: Largest Contentful Paint

LCP measures how long it takes from when the page starts loading until the largest visible content element (usually a hero image, a large heading, or a video thumbnail) finishes rendering.

Target: Under 2.5 seconds. Between 2.5 and 4 seconds needs improvement. Over 4 seconds is poor.

What causes poor LCP

  • Large, unoptimised images: The most common cause. A 3MB hero image that loads slowly will produce a terrible LCP score.
  • Slow server response (TTFB): If the server takes 1.5 seconds to respond, you're already most of the way to a poor LCP before any content has loaded.
  • Render-blocking resources: CSS or JavaScript files that load before the main content and block rendering.
  • No preloading of the LCP image: If the browser doesn't know about your hero image until it's halfway through parsing the page, it loads late.

How to improve LCP

  • Compress and convert images to WebP or AVIF format. A 3MB PNG can often be a 200KB WebP with no visible quality difference.
  • Add loading="eager" and a <link rel="preload"> tag for your LCP image so the browser discovers and fetches it immediately.
  • Improve server response time: upgrade hosting, add a CDN, enable server-side caching.
  • Defer non-critical JavaScript and CSS that isn't needed for initial rendering.

INP: Interaction to Next Paint

INP replaced First Input Delay (FID) in March 2024. While FID only measured the delay before the browser could start processing the first interaction, INP measures the full responsiveness of the page to all interactions throughout the page visit. It captures the worst-case interaction latency.

Target: Under 200ms. Between 200ms and 500ms needs improvement. Over 500ms is poor.

What causes poor INP

  • Heavy JavaScript on the main thread: If JavaScript is running complex operations, it blocks the browser from responding to user input. Long tasks (tasks that take over 50ms) are the primary cause.
  • Third-party scripts: Chat widgets, analytics scripts, ad tags, and tracking pixels all execute JavaScript that can block the main thread. Sites with many third-party scripts often have poor INP.
  • Inefficient event listeners: Poorly optimised click or scroll handlers that do too much work can produce slow INP.

How to improve INP

  • Audit and reduce third-party scripts. Every chat widget, every analytics tool, every ad pixel has a cost. Evaluate which are genuinely necessary.
  • Break up long JavaScript tasks. Use techniques like scheduler.postTask() or setTimeout() to yield to the browser between tasks.
  • Defer non-critical JavaScript until after the page is interactive.
  • Use web workers for computationally intensive tasks to move them off the main thread.

INP is the most technically complex of the three CWV metrics to fix. For most Irish SME sites built on standard CMS platforms (WordPress, Shopify, Squarespace), the biggest INP wins usually come from reducing third-party scripts and choosing a well-coded, performance-optimised theme.

CLS: Cumulative Layout Shift

CLS measures visual stability. If elements on your page move while it's loading, causing you to accidentally click the wrong thing or lose your reading position, that's a layout shift. CLS quantifies how much this happens.

Target: Under 0.1. Between 0.1 and 0.25 needs improvement. Over 0.25 is poor.

What causes poor CLS

  • Images without specified dimensions: If your HTML doesn't declare the width and height of an image, the browser doesn't reserve space for it while loading. When the image loads, it pushes content down.
  • Ads and embeds without size declarations: Ad slots that don't have reserved space cause content to shift when ads load.
  • Dynamically injected content: Cookie consent banners, newsletter popups, and notification bars that load late and push content down.
  • Web fonts causing FOUT: When a fallback system font is replaced by a web font with different dimensions, text can reflow and cause layout shifts.

How to fix CLS

  • Always specify width and height attributes on all <img> elements. This alone fixes the most common CLS cause.
  • Reserve space for ad slots with fixed dimensions.
  • Use font-display: optional or font-display: swap with careful fallback font sizing to minimise font-related layout shifts.
  • Load cookie banners and popups in a way that doesn't push other content around (overlays rather than pushing content down).

Tools to Measure Core Web Vitals

  • Google PageSpeed Insights: Provides both lab data (simulated) and field data (real user data from the Chrome UX Report). Check both. Lab data tells you what to fix. Field data tells you what real users experience.
  • Google Search Console: The Core Web Vitals report shows field data for all pages on your site grouped by status (Good, Needs Improvement, Poor). This is the most actionable overview for identifying which pages need the most attention.
  • Chrome UX Report (CrUX): The underlying dataset for field data. If your site is too new or has insufficient traffic, CrUX may not have data for your site yet.
  • Chrome DevTools Performance panel: The most detailed tool for diagnosing specific causes of CWV issues. Requires technical knowledge to use effectively.
  • WebPageTest.org: Excellent for detailed waterfall analysis and testing from different locations and devices.

Quick Wins vs Bigger Technical Fixes

Quick wins (high impact, relatively easy):

  • Compress all images and convert to WebP
  • Add width/height attributes to all images
  • Enable browser caching and GZIP compression
  • Remove unused third-party scripts
  • Preload the LCP image

Bigger fixes (higher effort, potentially higher impact):

  • Move to better hosting or add a CDN
  • Refactor or replace heavy JavaScript
  • Switch to a performance-optimised theme if on WordPress or Shopify
  • Implement server-side rendering for JavaScript-heavy applications

For most Irish SME websites, addressing the quick wins will move you from Poor to Needs Improvement or from Needs Improvement to Good on most metrics. The bigger technical fixes are worth doing, but start with the quick wins to understand the impact before committing to more significant development work.

Tags

Core Web VitalsTechnical SEOLCPINP
KF

Khalid Farhan

Founder of khalidfarhan.com. Agency owner, content creator, and host of the 2026 Challenge. Based in Ireland.

Want help growing your business?

Book a Free Audit