What are the three Core Web Vitals metrics?

LCP (Largest Contentful Paint) measures how fast the main content appears, targeting under 2.5 seconds. INP (Interaction to Next Paint) measures click responsiveness, targeting under 200 milliseconds. CLS (Cumulative Layout Shift) measures unexpected layout movement, targeting under 0.1.

Do Core Web Vitals actually affect Google rankings?

Yes. Core Web Vitals are a confirmed Google ranking signal. More importantly, they map directly to bounce rate and conversion — a page that loads faster and responds more quickly generates more revenue, making the metrics valuable beyond just rankings.

How do I fix a poor CLS score?

Reserve space for images, ads, and dynamic content before they load by setting explicit width and height attributes. Avoid inserting content above existing elements after the page renders. Most CLS problems are caused by media that shifts page layout as it arrives.

SEO & GEO · By Arav Sahni · FutureSource

March 20, 2026

Core Web Vitals: The Technical SEO That Moves Rankings

TL;DR : LCP, INP, and CLS are real ranking inputs and the first thing users feel. A practical checklist to get every page into the green.

Core Web Vitals turn the vague complaint "the site feels slow" into three numbers you can actually fix. They are a confirmed Google ranking signal, but more importantly they map directly to bounce rate and conversion — a faster page simply makes more money.

What the Three Metrics Mean

There are three to watch. LCP (Largest Contentful Paint) measures how fast the main content appears, with a target under 2.5 seconds. INP (Interaction to Next Paint) measures how quickly the page responds to taps and clicks, with a target under 200 milliseconds. CLS (Cumulative Layout Shift) measures unexpected movement of elements as the page loads, with a target under 0.1.

Fixing LCP

Most LCP problems come from a slow server response or a heavy hero element. Serve from an edge CDN, compress and properly size images, preload the hero asset, and cut render-blocking JavaScript so the largest element ships in the initial HTML instead of being assembled by a heavy bundle.

Preload the hero image or font used above the fold.
Compress images and serve modern formats like WebP/AVIF.
Reduce and defer render-blocking scripts.

Fixing INP

INP suffers when long JavaScript tasks block the main thread, so a tap feels laggy. Break long tasks into smaller chunks, defer non-critical scripts until after interaction, and remove unused third-party code that quietly steals responsiveness from every click.

Fixing CLS

Layout shift happens when the browser does not know how much space an element needs until it loads. Reserve space ahead of time and nothing will jump under the user's finger.

Set explicit width and height on images and embeds.
Reserve space for ads, banners, and dynamic content.
Avoid inserting new content above existing content.

Measure Real Users, Not Labs

Lab tools like Lighthouse only estimate performance on one simulated device. Field data from Search Console and CrUX shows what your actual visitors experience across real phones and networks. Optimize against field data, because that is the exact signal Google uses to score your pages.

Building Your Measurement Stack

Three tools give you a complete picture. Start with Google Search Console, which groups pages by URL pattern in the Core Web Vitals report — one failing product template shows up as a cluster of hundreds of pages, making it easy to prioritize by impact rather than chasing individual URLs. Feed those flagged templates into PageSpeed Insights for the full combined view: real-user CrUX field data alongside Lighthouse lab diagnostics that name the specific LCP element and identify the scripts contributing to INP delay. Use WebPageTest when you need waterfall-level analysis to pinpoint which third-party request is blocking the critical path on a real device and a real network.

Diagnosing LCP: The Four Root Causes

Every LCP failure traces to one of four origins. A slow Time to First Byte — any TTFB above 600 milliseconds — delays everything downstream. A render-blocking stylesheet or synchronous script holds the paint sequence even when the server responds quickly. An unpreloaded hero image gets discovered by the browser late, sitting in a queue behind lower-priority resources. Oversized images arrive in the right order but take too long to transmit. Use the Lighthouse diagnostics panel to identify which applies before touching any code — the diagnosis determines the fix, and applying the wrong fix wastes the entire sprint.

Set TTFB as the first check in WebPageTest — a slow server response cannot be fixed with front-end work alone.
Add <link rel="preload" as="image"> with fetchpriority="high" for the LCP hero image.
Convert all images to WebP or AVIF and serve responsive sizes via srcset and sizes attributes.

INP: Long Tasks Are the Enemy

Interaction to Next Paint replaced First Input Delay because FID only captured the first click — a page could pass FID while every subsequent tap felt laggy. INP samples every interaction across the session and reports the worst, making it a far more accurate signal of perceived responsiveness. The root cause in nearly every case is a long JavaScript task blocking the main thread: a tag manager that fires multiple scripts on every page load, a React or Vue hydration burst during the first seconds when the user is most likely to click, or an analytics library processing queued events. Profile the main thread with Chrome DevTools, filter for tasks above 50 milliseconds, and prioritize the largest ones first.

CLS Beyond the Basics

Setting explicit width and height on images and reserving ad slot space covers most CLS problems. The less obvious sources are what drive scores back down after a team believes the issue is fixed. Late-injected cookie consent banners that push page content below them, carousel components that initialize at a default height and then expand when the first slide loads, and server-side A/B tests that swap markup variants after initial render all produce layout shift that a standard Lighthouse run will not detect. Record a real session in WebPageTest with video capture enabled, play it back frame by frame, and the exact offending element becomes visible.

Sequencing Fixes When Multiple Metrics Fail

When LCP, INP, and CLS all score in the red, prioritize by effort-to-impact ratio. LCP fixes — image compression, CDN configuration, hero preloading — are self-contained and often move scores from Poor to Needs Improvement within a single sprint without requiring application code changes. CLS fixes require setting dimensions across templates, a one-time structural change per template type. INP fixes require JavaScript profiling and refactoring, which means developer capacity dedicated to performance rather than features — plan these as a separate initiative with a longer timeline. A realistic schedule runs LCP in week one, CLS in weeks two and three, and begins the INP investigation in week four.

Presenting Results as Revenue

Every Core Web Vitals improvement is worth more when presented in business language. A one-second reduction in LCP correlates to a two to five percent lift in conversion rate on e-commerce pages, based on Google's published case studies with retail partners. A CLS fix on a mobile checkout page removes accidental button taps and wrong-field submissions — a direct reduction in abandoned orders. Pair your CrUX before-and-after report with the conversion rate or revenue metric that moved in the same three-month window. That one page of proof keeps future performance work funded and respected.

Frequently Asked Questions

What are the three Core Web Vitals metrics?: LCP (Largest Contentful Paint) measures how fast the main content appears, targeting under 2.5 seconds. INP (Interaction to Next Paint) measures click responsiveness, targeting under 200 milliseconds. CLS (Cumulative Layout Shift) measures unexpected layout movement, targeting under 0.1.
Do Core Web Vitals actually affect Google rankings?: Yes. Core Web Vitals are a confirmed Google ranking signal. More importantly, they map directly to bounce rate and conversion — a page that loads faster and responds more quickly generates more revenue, making the metrics valuable beyond just rankings.
How do I fix a poor CLS score?: Reserve space for images, ads, and dynamic content before they load by setting explicit width and height attributes. Avoid inserting content above existing elements after the page renders. Most CLS problems are caused by media that shifts page layout as it arrives.