Core Web Vitals Explained: LCP, CLS, INP and How to Improve Them

In May 2021, Google introduced Core Web Vitals as an official ranking factor. They're a real influence on search rankings, but more importantly they directly measure whether real visitors have a good experience on your site.

This guide walks through what each metric means in plain English — and what you can actually do about each one.

The three Core Web Vitals

Three specific performance measurements that Google considers most important:

1. LCP — Largest Contentful Paint (loading speed)
2. CLS — Cumulative Layout Shift (visual stability)
3. INP — Interaction to Next Paint (responsiveness)

These replaced FID (First Input Delay) with INP as of March 2024.

LCP: Largest Contentful Paint

LCP measures how long it takes for the largest visible element on the page to finish loading. This is usually a hero image, a large video poster, or a large block of text.

Target: Under 2.5 seconds Needs improvement: 2.5s – 4s Poor: Over 4s

What affects LCP most?

• Slow server response — High Time to First Byte (TTFB) delays everything downstream
• Render-blocking resources — CSS and JavaScript that block the browser from rendering
• Unoptimized images — Large, uncompressed hero images are the most common LCP offender
• Client-side rendering — SPAs that render everything in JavaScript have slower LCP

How to improve LCP

1. Compress your hero image — Use WebP format, max 1920px wide, quality 75–80%. Compress images here
2. Add loading="eager" and fetchpriority="high" to your hero image
3. Use a CDN — Content Delivery Networks serve assets from servers close to the user
4. Preload critical resources — Use <link rel="preload"> for your LCP image
5. Remove render-blocking CSS — Inline critical CSS and defer non-critical stylesheets

CLS: Cumulative Layout Shift

CLS measures how much the page layout unexpectedly shifts while loading. Have you ever tried to click a button only for something to pop in above it and your click lands on the wrong element? That's a layout shift.

Target: Under 0.1 Needs improvement: 0.1 – 0.25 Poor: Over 0.25

Common causes of CLS

• Images without dimensions — If the browser doesn't know an image's size, it can't reserve space and the layout shifts when the image loads
• Ads without reserved space — Ad slots that inject content push everything else down
• Web fonts causing FOUT — Flash of Unstyled Text when a web font loads and changes text size
• Dynamically injected content — Banners, cookie notices, and "back to top" buttons that appear without reserved space

How to improve CLS

1. Always specify width and height on <img> elements
2. Reserve space for ads — Use CSS to set a fixed height for ad slots
3. Use font-display: optional or font-display: swap for web fonts
4. Avoid inserting content above existing content — Place banners and notices at the bottom or off-canvas

INP: Interaction to Next Paint

INP replaced FID (First Input Delay) in March 2024. It measures the responsiveness of your page to user interactions (clicks, taps, keyboard input). Specifically, it measures the time from when a user interacts to when the browser updates the display in response.

Target: Under 200ms Needs improvement: 200ms – 500ms Poor: Over 500ms

What affects INP?

• Long JavaScript tasks — Heavy computations that block the main thread
• Excessive DOM size — Large HTML documents take longer to update
• Third-party scripts — Analytics, ads, and chat widgets running JS on user interactions
• Unoptimized event handlers — Inefficient code running in click/input handlers

How to improve INP

1. Break up long tasks — Use setTimeout, requestIdleCallback, or scheduler.postTask()
2. Minimize third-party scripts — Audit every third-party script; remove anything non-essential
3. Debounce input handlers — Don't run expensive operations on every keystroke
4. Use content-visibility: auto — Defers rendering off-screen content

How to Measure Core Web Vitals

Google PageSpeed Insights (Free)

The easiest option — paste your URL at pagespeed.web.dev and get both lab and field data with specific recommendations.

Chrome DevTools

Open DevTools → Performance tab → run a recording. The Performance panel shows LCP, CLS, and INP events.

Google Search Console

The "Core Web Vitals" report shows real-user data for your site across all URLs. This is field data, which is what Google actually uses for ranking.

Lighthouse (in Chrome DevTools)

Open DevTools → Lighthouse tab → run an audit. Provides a score and specific opportunities to improve.

Prioritizing Improvements

Not all improvements are equal. Focus first on:

1. Image compression — The biggest single win for most sites. Use our image compressor
2. Adding image dimensions — Prevents CLS, takes 5 minutes
3. Removing unnecessary third-party scripts — Often doubles performance
4. Using a CDN — Dramatically improves TTFB globally

The best tools and good hosting take you most of the way. Use our free Meta Tag Generator to also make sure your metadata is optimized for search rankings.