Google grades your website on three numbers, and those grades influence where you rank. The official documentation is written for developers; this version is written for people who own websites. Three metrics, what breaks each one, and what fixes each one.
Core Web Vitals aren’t a technical test. They’re Google measuring whether your site annoys people.
LCP — how long until the main thing shows up
Largest Contentful Paint measures when the biggest element on the screen — usually your hero image or headline — finishes loading. Google wants this under 2.5 seconds. It’s the metric that most closely matches how “fast” a site feels, and the one Google weighs heaviest.
What breaks it
Almost always the hero image: too large, wrong format, or lazy-loaded (a surprisingly common self-inflicted wound — lazy-loading tells the browser to wait on the exact image it should rush). Slow server response time is the other culprit: if the server takes 1.5 seconds to even respond, a 2.5-second LCP is nearly impossible.
What fixes it
Compress the hero to WebP, preload it, never lazy-load it, and get server response under ~600ms with proper caching. That combination fixes LCP on most sites.
INP — how fast the page reacts when tapped
Interaction to Next Paint replaced the old FID metric in 2024. It measures the delay between a user tapping something — a menu, a button, a form field — and the screen visibly responding. Target: under 200 milliseconds. Slow INP is that maddening moment where you tap a menu and nothing happens, so you tap again.
What breaks it
JavaScript. Heavy scripts — page builders, chat widgets, tracking tags, animation libraries — occupy the browser’s attention, and taps queue up behind them. Sites drowning in third-party scripts almost always have INP problems.
What fixes it
Less JavaScript, loaded later. Remove scripts that aren’t earning their place, defer the rest so they load after the page is interactive, and be ruthless about “just one more widget.” On builder-heavy sites, the honest fix is sometimes a leaner rebuild — you can’t defer your way out of five megabytes.
CLS — does the page jump around while loading
Cumulative Layout Shift measures visual stability: you start reading, an image loads above, and the text you were reading jumps down. Or worse — you’re about to tap a button and an ad shoves it as you tap. Target: under 0.1.
What breaks it
Anything that loads late without reserved space: images without width/height attributes, web fonts swapping in and changing text size, banners and embeds injecting themselves above existing content.
What fixes it
Give everything a reserved seat. Dimensions on every image, font-display: swap with a preloaded primary font, and fixed-height containers for anything that loads late. CLS is the most mechanical of the three to fix — it’s a checklist, not a rebuild.
Where to check your scores
PageSpeed Insights shows both lab scores and — more importantly — real-visitor data from the Chrome UX Report when your site has enough traffic. The real-visitor numbers are what Google actually uses. Google’s official Web Vitals guide goes deeper on each metric when you want the full technical detail.
The honest summary
Green vitals won’t outrank better content — but red vitals quietly tax everything: rankings, bounce rate, ad costs, conversions. Most sites can reach green with an image pass, a script cleanup, and proper caching. That’s exactly what a speed optimization project does, measured before and after so you can verify the result yourself.