Core Web Vitals Explained: LCP, CLS, and INP

In 2021, Google made page experience a ranking factor — and at the centre of that update were Core Web Vitals: three metrics that measure how users actually experience your pages. Unlike traditional SEO signals, these aren't about content or links. They're about whether your site feels fast, stable, and responsive.

Understanding each metric is the first step to improving them.

LCP — Largest Contentful Paint

What it measures: How long it takes for the largest visible element on the page to fully render.

Good threshold: Under 2.5 seconds. Needs improvement: 2.5–4s. Poor: over 4s.

The "largest element" is usually a hero image, a large heading, or a video thumbnail — whatever takes up the most screen space above the fold.

Why LCP matters

LCP is the closest proxy for "when does the page feel usable?" A 4-second LCP means a user stares at a partially-loaded page for four seconds before seeing the main content. That kills conversions and signals to Google that your site is slow.

Common LCP causes

• Unoptimised hero images — A 3MB PNG served without compression will drag LCP. Use WebP or AVIF, and serve images at the right size.
• Render-blocking resources — CSS or JavaScript that blocks the browser from rendering the main content delays LCP. Minimise render-blocking scripts or defer them.
• Slow server response times — If your server takes 1.5 seconds to respond, you've already used most of your LCP budget before any content loads.
• No preloading for critical images — Adding <link rel="preload"> for your hero image tells the browser to fetch it immediately, before it discovers it in the CSS.

CLS — Cumulative Layout Shift

What it measures: How much the page content unexpectedly moves around during loading.

Good threshold: Under 0.1. Needs improvement: 0.1–0.25. Poor: over 0.25.

The CLS score is calculated by multiplying how much of the viewport shifted by how far it shifted. A large banner image that pushes down the page text as it loads is a classic CLS failure.

Why CLS matters

Layout shifts cause accidental clicks. A user goes to tap a button and the page shifts — they end up clicking an ad or a different link. It's one of the most frustrating experiences on the web, and Google's data shows it directly correlates with user abandonment.

Common CLS causes

• Images without dimensions — If you don't specify width and height on an <img> tag, the browser doesn't reserve space for it. When the image loads, everything shifts down.
• Ads and embeds that load late — Third-party ads are a frequent culprit. Reserve space in your layout before the ad loads.
• Web fonts causing FOUT/FOIT — When a web font loads and swaps in, text can reflow and shift content. Use font-display: swap and preload critical fonts.
• Dynamically injected content — Banners, cookie notices, and chat widgets that appear above existing content cause layout shifts. Place them below the fold or use CSS to reserve their space.

INP — Interaction to Next Paint

What it measures: The latency between a user interaction (click, tap, keyboard press) and the next visual update on screen.

Good threshold: Under 200ms. Needs improvement: 200–500ms. Poor: over 500ms.

INP replaced the older FID (First Input Delay) metric in March 2024. Where FID only measured the first interaction, INP considers the entire page lifecycle — every click and tap the user makes.

Why INP matters

A sluggish INP makes your site feel broken. Users click a button and nothing happens for half a second. That delay might seem tiny, but humans are remarkably sensitive to UI responsiveness — research consistently shows that 100ms feels "instant" while 300ms makes an interaction feel noticeably slow.

Common INP causes

• Heavy JavaScript on the main thread — Long tasks that run for 50ms or more block the browser from responding to input. Break long tasks into smaller chunks using setTimeout or the Scheduler API.
• Large React re-renders — Over-rendering can trigger expensive component trees on every interaction. Use useMemo, useCallback, and React.memo strategically to avoid unnecessary renders.
• Synchronous data fetching on click — If a button click triggers a synchronous database query before showing any feedback, INP will suffer. Show an optimistic response immediately and update when the fetch completes.
• Too many event listeners — Excessive event listeners, especially on scroll or resize, can clog the main thread. Use passive listeners and debounce handlers.

Measuring Your Core Web Vitals

There are two types of data:

Lab data (from tools like Lighthouse) simulates page loads in controlled conditions. It's useful for catching issues during development but doesn't reflect real users' varied devices and connections.

Field data (from Chrome User Experience Report / CrUX) is the real-world data Google actually uses for ranking. It's aggregated from actual Chrome users visiting your site. You can see your field data in Google Search Console under Core Web Vitals.

A common mistake is optimising for perfect Lighthouse scores without checking field data — the two often diverge because real users visit on slow 4G connections on 3-year-old Android phones.

Quick Wins by Metric

To improve LCP:

• Convert images to WebP or AVIF
• Add fetchpriority="high" to your LCP image
• Enable server-side caching and a CDN
• Remove render-blocking scripts from <head>

To improve CLS:

• Set width and height on every <img> tag
• Use aspect-ratio in CSS for responsive images
• Reserve space for ads and embeds
• Preload critical fonts with <link rel="preload">

To improve INP:

• Profile and break up long JavaScript tasks
• Defer non-critical JavaScript until after interaction
• Use web workers for heavy computation
• Audit and remove unnecessary event listeners

Related Checks

Rocket Vitals detects each performance issue individually. See the full details for each check:

• Slow Largest Contentful Paint — LCP exceeds 4 seconds
• Poor Cumulative Layout Shift — CLS exceeds 0.25
• Slow Interaction to Next Paint — INP exceeds 500ms
• Missing image dimensions — Images without width/height cause layout shift
• No modern image formats — Images not using WebP or AVIF

Rocket Vitals measures all three Core Web Vitals across every page of your site using real Chromium rendering, so you get accurate scores — not estimates. Run a free scan →