Core Web Vitals in plain language, and how to actually fix them

Core Web Vitals are Google's attempt to measure whether a page feels good to use. Three metrics, each measuring a different kind of frustration.

They affect ranking. They affect conversion rate more.

LCP — Largest Contentful Paint

What it measures: how long until the main content appears. Usually your hero image or headline.

Target: under 2.5 seconds.

What it feels like when it fails: you tap a link, get a blank or half-built page, and wait.

Usual causes and fixes:

• Oversized images. The single most common cause. Serve appropriately sized images in modern formats. A 3MB hero image that displays at 800px wide is wasting most of that download.
• Slow server response. Cheap shared hosting under load. Sometimes the only real fix is better hosting.
• Render-blocking CSS and JavaScript. Defer anything not needed for the first screen.
• No caching. Set proper cache headers so repeat visitors aren't re-downloading everything.

INP — Interaction to Next Paint

What it measures: how quickly the page responds when you interact with it. Replaced First Input Delay in 2024.

Target: under 200 milliseconds.

What it feels like when it fails: you tap a button and nothing happens, so you tap again, and then two things happen.

Usual causes and fixes:

• Too much JavaScript. The dominant cause. Every script competes for the main thread.
• Heavy third-party scripts. Chat widgets, tracking pixels, popup tools, review widgets. Audit what's actually loading. Most sites carry several scripts nobody remembers adding.
• Unoptimised event handlers. Work happening on every scroll or input rather than being throttled.

If you fix one thing for INP, it's usually removing a third-party script.

CLS — Cumulative Layout Shift

What it measures: how much the page jumps around while loading.

Target: under 0.1.

What it feels like when it fails: you go to tap something, an ad loads above it, and you tap the wrong thing.

Usual causes and fixes:

• Images without dimensions. Set explicit width and height so the browser reserves space.
• Ads and embeds without reserved space. Give the container a fixed minimum height.
• Web fonts swapping. Use font-display: swap with a size-matched fallback.
• Content injected above existing content. Cookie banners and promo bars are frequent offenders.

CLS is usually the easiest of the three to fix and often the most visibly annoying to users.

How to measure honestly

PageSpeed Insights gives you both lab data (simulated) and field data (real users, from the Chrome UX Report). Field data is what counts. Lab data is a diagnostic.

A page can score 95 in the lab and fail in the field, because real users are on real devices and real networks.

Test on mobile. Mobile scores are what matter for most sites, and they're always worse than desktop.

The realistic priority

1. Compress and correctly size images. Fixes most LCP failures and takes an afternoon.
2. Audit third-party scripts. Remove what isn't earning its place. Usually fixes INP.
3. Set image dimensions. Fixes most CLS.
4. Then worry about server response times and code splitting.

The first three resolve the majority of failures on the majority of sites, and none of them require a developer for most platforms.

Why this matters beyond ranking

The ranking benefit is real but modest. The conversion benefit is larger and more direct: slower pages lose people before they see anything you wrote.

Treat Core Web Vitals as a conversion project that happens to help SEO, and it's much easier to justify the time.