Core Web Vitals. The three little metrics that Google uses to judge whether your site is fast or trash. Every SEO article makes them sound like quantum physics. They're not. Let me translate from Google-speak to human.
The Three Vitals (In Human Language)
LCP — Largest Contentful Paint
Human translation: "How long until the main thing on the page shows up?"
The "main thing" is usually a hero image, a headline, or a large block of text. Google measures how many seconds it takes for this to appear on screen.
| Score | What It Means |
|---|---|
| Under 2.5s | Good ✅ |
| 2.5s - 4.0s | Needs improvement ⚠️ |
| Over 4.0s | Poor ❌ |
How to fix it:
- Compress and resize your hero image
- Preload the largest image:
<link rel="preload" as="image" href="hero.webp"> - Remove render-blocking CSS/JS from the head
- Use a CDN (or static hosting like Cloudflare Pages)
INP — Interaction to Next Paint
Human translation: "When I click something, how long until the page responds?"
INP replaced FID (First Input Delay) in 2024. It measures the delay between user interactions (clicks, taps, key presses) and the browser's visual response.
| Score | What It Means |
|---|---|
| Under 200ms | Good ✅ |
| 200ms - 500ms | Needs improvement ⚠️ |
| Over 500ms | Poor ❌ |
How to fix it:
- Break up long JavaScript tasks (anything over 50ms blocks the main thread)
- Use
requestAnimationFramefor visual updates - Avoid synchronous DOM manipulation in event handlers
- Or just... don't use heavy JavaScript frameworks for simple sites
CLS — Cumulative Layout Shift
Human translation: "Does stuff jump around while the page is loading?"
You know that experience where you're about to click a button and suddenly an ad loads above it and pushes everything down? That's layout shift. Google hates it. Users hate it. Everyone hates it.
| Score | What It Means |
|---|---|
| Under 0.1 | Good ✅ |
| 0.1 - 0.25 | Needs improvement ⚠️ |
| Over 0.25 | Poor ❌ |
How to fix it:
- Always set
widthandheighton images and videos - Use
font-display: swapfor custom fonts - Don't inject content above existing content dynamically
- Reserve space for ads, embeds, and iframes with CSS
The Cheat Code: Just Build Static Sites
Here's the dirty secret: static HTML sites naturally ace all three metrics:
- LCP: HTML loads from CDN in ~100ms. Hero text renders instantly.
- INP: No JavaScript blocking the main thread. Interactions are instant.
- CLS: No dynamic content loading. Nothing shifts.
This blog scores 99-100 on PageSpeed Insights. Not because I optimized anything — because there's nothing TO optimize. It's just HTML and CSS.
Do Core Web Vitals Actually Affect Rankings?
Honestly? They're a tiebreaker, not a primary ranking factor. Content quality and relevance still matter 10x more. But if two articles are equally good, the faster one wins. And fast sites have lower bounce rates, which IS a major ranking signal.
Think of Core Web Vitals as table stakes, not a competitive advantage. You won't win by having great vitals, but you'll definitely lose by having terrible ones.