Core Web Vitals Explained: LCP, INP, and CLS

A practical guide to understanding Core Web Vitals — what LCP, INP, and CLS measure, what the thresholds are, and what causes each metric to fail.

What are Core Web Vitals?

Core Web Vitals are a set of metrics Google uses to measure real user experience on web pages. They focus on loading performance, interactivity, and visual stability — the three dimensions that most affect whether visitors stay or leave.

As of 2024, there are three Core Web Vitals:

|--------|-----------------|----------------|

Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element in the viewport to finish rendering. This is usually a hero image, a large heading, or a video poster.

What causes poor LCP:

Large, uncompressed images in the hero section

Render-blocking CSS and JavaScript that delay image discovery

Slow Time to First Byte (TTFB) from the server

Late-loading web fonts applied to large text

How to improve LCP:

Compress and serve hero images in WebP or AVIF format

Add fetchpriority="high" to the LCP image element

Enable full-page caching and use a CDN

Preload critical fonts

Interaction to Next Paint (INP)

INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. It measures the delay between a user interaction — a click, tap, or keypress — and the next visual response from the page.

Unlike FID, which only measured the first interaction, INP captures the worst interaction across the entire page visit. This makes it a more accurate reflection of how responsive a page feels.

What causes poor INP:

Long JavaScript tasks blocking the main thread

Heavy event listeners running on every scroll or click

Third-party scripts (ads, widgets, analytics) occupying the main thread

Synchronous DOM updates triggered by interactions

How to improve INP:

Break long JavaScript tasks into smaller chunks with setTimeout or scheduler.postTask

Audit and remove or defer heavy third-party scripts

Use requestAnimationFrame for visual updates

Profile interactions in Chrome DevTools' Performance tab to find the bottleneck

Cumulative Layout Shift (CLS)

CLS measures unexpected visual movement during page load. It captures the total amount of layout shift that occurs from when the page starts loading until the user leaves.

A layout shift happens when an element moves from one position to another without user input — for example, a button jumping down because an image above it loaded late.

What causes poor CLS:

Images and videos without explicit width and height attributes

Advertisements injecting content without reserved space

Web fonts causing text reflow (FOIT/FOUT)

Dynamically injected content (banners, cookie notices, chat widgets) appearing above existing content

How to improve CLS:

Always set width and height on and elements

Reserve space for ads with a min-height placeholder

Use font-display: swap and preload fonts to minimize text reflow

Ensure injected UI (cookie bars, chat widgets) appears at the bottom of the page or in reserved space

Why Core Web Vitals matter for SEO

Google confirmed Core Web Vitals as a ranking signal as part of the Page Experience update. Passing all three metrics does not guarantee rankings, but failing them can suppress pages in competitive SERPs where content quality is otherwise similar between competitors.

More immediately, failing Core Web Vitals means real users are having a poor experience. Pages that feel slow or unstable have higher bounce rates, lower time on site, and weaker conversion rates — all independent of any SEO signal.

How to check your Core Web Vitals

Google Search Console shows field data (real user measurements) under Core Web Vitals in the Experience section

PageSpeed Insights shows both lab data (Lighthouse) and field data from the Chrome User Experience Report

Loadzen runs a speed check and surfaces your LCP, INP, and CLS with a prioritized fix plan for your specific platform

Run a free check on your most important page to see where you stand.