Core Web Vitals in Plain English (and How to Fix Each One)

Largest Contentful Paint — the big one

LCP is when the largest visible element finishes rendering, usually the hero image or headline. Under 2.5 seconds passes. It fails when a 2MB image is served where 150KB would do, when the image isn't in a modern format, or when it's loaded lazily despite being the first thing on screen.

Fixing LCP

Resize images to the largest size they actually display at, convert to WebP or AVIF, set explicit width and height, add `fetchpriority="high"` to the hero image, and never lazy-load anything above the fold. On the sites we rebuild, image work alone usually fixes LCP.

Interaction to Next Paint

INP replaced First Input Delay in 2024 and measures how quickly the page responds when someone taps. Under 200ms passes. It fails when heavy JavaScript blocks the main thread — usually a chat widget, a slider library, or four tracking scripts loading synchronously.

Fixing INP

Defer non-critical JavaScript, load third-party scripts through a tag manager rather than individually, and audit whether you need every widget. A chat bubble nobody uses is a real cost paid on every page load.

Cumulative Layout Shift

CLS measures content jumping while the page loads. Under 0.1 passes. It's caused by images without dimensions, ads or embeds inserted above existing content, and web fonts that reflow text when they swap in.

Fixing CLS

Set width and height on every image and iframe, reserve space for anything injected, and use `font-display: swap` with a metrically similar fallback. Explicit dimensions on images fix most of it.

Measure the field data, not the lab score

PageSpeed Insights shows both a lab test and real Chrome user data. Google ranks on the field data. A perfect lab score with failing field data means your test conditions don't match your visitors' — usually because they're on mobile networks and you tested on a desktop. Speed is part of every web design build for this reason.