Skip to content
Make your site fast & easy to find

Lesson 4 of 6

Passing Core Web Vitals

9 min read

The three Core Web Vitals

  • LCP (Largest Contentful Paint) — load speed. How fast the main content appears. Target < 2.5s.
  • INP (Interaction to Next Paint) — responsiveness. How quickly the page reacts to taps/clicks. Target < 200ms.
  • CLS (Cumulative Layout Shift) — visual stability. How much the layout jumps around. Target < 0.1.

They're measured on real users ("field data") — that's what counts, not just lab scores.

How to fix LCP

Optimize and properly size images — use modern formats, and lazy-load images lower down the page (load them only as the visitor scrolls near) but never the main top image. Use a CDN (a network of servers that delivers your files from a location near each visitor), trim render-blocking CSS/JS (code the browser must finish loading before it can show anything), and serve fast server responses.

How to fix INP

Break up long JavaScript tasks, ship less JS, defer non-critical scripts, and avoid heavy work during interactions — the browser can only do one thing at a time on its main thread, so long tasks make taps feel dead.

How to fix CLS

Always set width/height (or aspect-ratio) on images and embeds, reserve space for ads/banners, and avoid inserting content above existing content.

A concrete example: an image with no dimensions. The browser doesn't know how tall it will be, so it reserves no space — and when the image finally loads, everything below it jumps down. That jump is your CLS. Reserving the space fixes it:

<!-- Causes CLS: no size, so text jumps when the image loads -->
<img src="/hero.jpg" alt="Team photo">

<!-- Fixed: the browser reserves the space up front -->
<img src="/hero.jpg" alt="Team photo" width="1200" height="600">

Measure both ways

To read your own scores: open PageSpeed Insights (Google's free speed checker), enter your URL, and click Analyze. The top panel ("Discover what your real users are experiencing") is field data from CrUX (Chrome's collected real-user measurements) for LCP, INP, and CLS; scroll to Diagnostics to see which elements to fix. Use PageSpeed Insights / CrUX for field data and Lighthouse for lab debugging. Speed is a ranking factor, lowers ad costs, and lifts conversions — it pays back three ways. GrowMyWebsite's PageSpeed checker tracks all three vitals on mobile and desktop.

You can read every lesson for free — no account needed. To save your progress and earn a certificate, you'll need a free account. Create one or sign in whenever you're ready — you won't lose your place.

Saving your progress needs a free account — we'll ask you to sign in.