Stop 16 · PerformanceTopics · 10/13

Core Web Vitals

In short

Google picked three numbers to judge how a page feels to real people: how fast the main content shows, how quickly it reacts, and whether it jumps around. They also feed into search ranking.

Google's specific set of user-experience metrics — LCP (loading), INP (interactivity), CLS (visual stability) — used as real ranking signals for search.

The jaadu sits at a steady restaurant table as a waiter quickly sets down a steaming dish.

Think of it like this

Rating a restaurant visit

You judge a restaurant on three things: how fast the main dish arrived, how quickly the waiter responds when you call, and whether someone bumped your table mid-meal. LCP, INP and CLS measure the same three for a web page.

Watch it happen

The three vitals during one visit

LCP

INP

CLS

75th pct

1/4The hero image appears at 2.1s. That's your LCP, and it's under 2.5s, so it's good.

The big ideas

What you need to know

LCP: loading

Largest Contentful Paint is when the biggest image or text block shows up. Good is 2.5 seconds or less.

INP: responsiveness

Interaction to Next Paint measures the delay between a tap or click and the screen updating. Good is 200ms or less.

CLS: visual stability

Cumulative Layout Shift scores how much content jumps unexpectedly. Good is 0.1 or less.

Judged on real users

Google looks at the 75th percentile of real visits, so most users, not just the lucky ones, need a good experience.

See it in code

Walk through the code

1// See which element is your LCP, right in the console2new PerformanceObserver((list) => {3  const entries = list.getEntries();4  const last = entries[entries.length - 1];5  console.log("LCP at", Math.round(last.startTime), "ms:", last.element);6}).observe({ type: "largest-contentful-paint", buffered: true });7 8// Watch layout shifts happen9new PerformanceObserver((list) => {10  for (const shift of list.getEntries()) {11    if (!shift.hadRecentInput) console.log("Layout shift:", shift.value, shift.sources);12  }13}).observe({ type: "layout-shift", buffered: true });

1/2Watch LCP candidates. The last one reported is the current LCP element and time.

Paste this into DevTools and reload. The LCP element is usually your hero image or heading. sources shows which elements moved.

Save yourself the pain

Common mistakes

Oops

Still optimising for FID because an old blog said so.

Do this instead

INP replaced FID as the responsiveness Core Web Vital in 2024. Long JavaScript tasks are the usual cause of poor INP.

Oops

Adding a banner or ad slot that pushes content down after load.

Do this instead

Reserve its space with a fixed height or aspect-ratio so nothing shifts.

Your mission

Find and fix one vital

~35 min

Quick check

Your page loads fast, but buttons feel sluggish when tapped. Which Core Web Vital is suffering?

Go deeper

1Check your site's Core Web Vitals in Google Search Console or PageSpeed Insights.
2Learn what causes a poor score in each of the three metrics.
3Fix one concrete issue, e.g. an unsized image causing layout shift (CLS).