Core Web Vitals in plain English: LCP, INP and CLS

Core Web Vitals are three measurements Google uses to describe how a page feels to real visitors: how fast the main content appears, how quickly the page reacts, and how stable the layout stays.

The three metrics

LCP: Largest Contentful Paint

LCP measures how long it takes for the biggest visible element, usually a hero image or headline, to render. Good: 2.5 seconds or less.

INP: Interaction to Next Paint

INP measures how quickly the page responds when someone taps, clicks or types, across the whole visit. Good: 200 milliseconds or less. It replaced First Input Delay as a Core Web Vital in March 2024.

CLS: Cumulative Layout Shift

CLS measures unexpected movement, such as a button jumping because an image loaded late. Good: 0.1 or less.

Google assesses these at the 75th percentile of real visits, so three out of four visits need to meet each threshold.

What usually makes pages slow

• Oversized or unoptimised images.
• Too much JavaScript loading up front.
• Web fonts that block rendering.
• Third-party scripts such as chat widgets and trackers.
• No caching or content delivery network (CDN).

Fixes that work

• Serve modern, correctly sized images and load the hero image with priority.
• Split code so each page loads only what it needs.
• Reserve space for images, ads and embeds so the layout never jumps.
• Delay non-essential third-party scripts until after the page is usable.
• Host on infrastructure with a CDN.

import Image from "next/image";

export function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Team reviewing a new website design"
      width={1600}
      height={900}
      priority // the hero is usually the LCP element
      sizes="(min-width: 1024px) 1200px, 100vw"
    />
  );
}

Setting width and height also reserves the space, which protects your CLS score.

A simple routine

1. 1Check real-visitor data in PageSpeed Insights or the Core Web Vitals report in Search Console.
2. 2Find the element that is your LCP, usually the hero image or headline.
3. 3Reduce the JavaScript that runs before the page is usable.
4. 4Fix anything that shifts the layout.
5. 5Re-test after every significant change, because new scripts and images bring problems back.