Core Web Vitals 2026 – Fix LCP, INP & CLS to Rank Higher

What Are Core Web Vitals and Why Do They Affect Rankings?#

Core Web Vitals (CWV) are a set of specific, quantifiable metrics Google uses to measure real-world user experience on web pages. They became an official ranking factor as part of the Page Experience update and Google uses real Chrome user data (the Chrome UX Report / CrUX dataset) to classify each page's performance. Pages scoring "Good" on all three Core Web Vitals have a confirmed ranking advantage in competitive SERPs where content quality is otherwise comparable. More practically, pages with poor CWV scores have higher bounce rates and lower conversion rates — fixing them improves both rankings and commercial performance simultaneously.

LCP — Largest Contentful Paint#

LCP measures how long it takes for the largest visible element on a page to fully load and render from the user's perspective. This is typically a hero image, a large heading, or a video thumbnail — whatever is the biggest element visible in the initial viewport. LCP is widely considered the most important Core Web Vital because it most directly represents perceived loading speed.

Good: Under 2.5 seconds • Needs Improvement: 2.5–4.0 seconds • Poor: Over 4.0 seconds

How to Fix Poor LCP

INP — Interaction to Next Paint#

INP measures how responsive a page is to user interactions — clicks, taps, and keyboard inputs. Specifically, it measures the time from when a user interacts with the page to when the browser renders the next visual update in response. INP replaced FID (First Input Delay) as an official Core Web Vital in March 2024 because it captures the full interaction experience rather than just the first interaction.

Good: Under 200ms • Needs Improvement: 200–500ms • Poor: Over 500ms

How to Fix Poor INP

Poor INP is almost always caused by excessive JavaScript execution on the main thread. The main thread is where the browser handles both JavaScript execution and rendering — when JavaScript monopolises it, user interactions must wait. Fixes: break up long tasks (>50ms) into smaller asynchronous chunks using requestIdleCallback or setTimeout, remove or defer unnecessary third-party scripts (chat widgets, analytics, ad networks are frequent offenders), reduce the total amount of JavaScript your site loads, and avoid synchronous DOM updates triggered by user interactions. In React and similar frameworks, use code splitting and lazy component loading to reduce initial JavaScript bundle sizes.

CLS — Cumulative Layout Shift#

CLS measures visual stability — how much the page content shifts unexpectedly during or after loading. When elements shift, users may click the wrong thing or lose their reading position, creating a frustrating experience. The CLS score is a sum of all unexpected layout shifts throughout the page's lifespan, weighted by the fraction of the viewport affected and the distance elements moved.

Good: Under 0.1 • Needs Improvement: 0.1–0.25 • Poor: Over 0.25

How to Fix Poor CLS

• Always specify width and height attributes on images and videos: Without dimensions, the browser cannot reserve space for media before it loads, causing content to jump down when images appear. Add explicit width and height to every <img> tag.
• Reserve space for ads and embeds: Ad slots that load asynchronously are a major CLS contributor. Use CSS min-height to reserve the expected space before the ad loads.
• Avoid inserting content above existing content: Dynamically injected banners, cookie notices, or sticky headers that push content down after load cause significant CLS. Use CSS transforms for animations instead of properties that affect layout.
• Use font-display: optional or preload web fonts: Web fonts that load after text is displayed cause a flash of unstyled text (FOUT) and layout shift as text reflows to the new font metrics. Preloading your font files or using font-display: optional prevents this.

Measuring Core Web Vitals: The Right Tools#