Core Web Vitals Explained: LCP, INP and CLS in Plain English

The three metrics and their targets

• LCP, Largest Contentful Paint: how long until the biggest visible element, usually the main image or headline, has rendered. Good is 2.5 seconds or less.
• INP, Interaction to Next Paint: how long the page takes to visibly respond after a click, tap or key press. Good is 200 milliseconds or less. It replaced the older FID metric in 2024.
• CLS, Cumulative Layout Shift: how much the content moves around unexpectedly. Good is 0.1 or less.

Google judges each one at the 75th percentile of real visits, so a page passes when at least three quarters of visits are within the target. A fast result on your own fast laptop does not mean much if most visitors are on mid-range phones.

Improving LCP

LCP is usually an image, and it is usually slow for one of four reasons: the server is slow to send the page, the image is discovered late, the image is far too large, or something blocks rendering.

• Serve the image at the size it is displayed, in WebP or AVIF, with srcset so phones get a smaller file.
• Do not lazy-load the main image at the top of the page. Lazy loading makes the browser wait.
• Tell the browser early that the image matters, with fetchpriority="high" on the image, or a preload in the head when the image is set from CSS.
• Connect early to other domains you depend on, such as a font or image CDN, with preconnect.
• Keep render-blocking CSS and scripts in the head to a minimum, and defer scripts that are not needed for the first view.

<link rel="preconnect" href="https://images.example-cdn.com">
<img src="hero.webp" fetchpriority="high" width="1200" height="600" alt="...">

Improving INP

A slow INP means the main thread was busy when the visitor interacted, so the browser could not respond. JavaScript is almost always the cause.

• Ship less JavaScript. Every third-party widget, tracker and chat script competes for the same thread.
• Break long tasks up so the browser can respond between pieces, instead of one job that runs for hundreds of milliseconds.
• In an event handler, update what the user sees first and do the heavy work after.
• Avoid re-rendering large parts of the page for small changes.

Improving CLS

Layout shift happens when something appears or changes size after the content around it has been drawn, pushing that content aside. The visitor goes to tap a link and taps an ad instead.

• Give every image and video width and height attributes, or a CSS aspect-ratio, so space is reserved before it loads.
• Reserve space for ads and embeds with a minimum height, even when they are empty.
• Do not insert banners above existing content after the page has loaded. Overlay them or reserve their space.
• Use font loading that avoids a large jump when the web font replaces the fallback, for example by choosing a fallback font with similar size.