Core Web Vitals
What are Core Web Vitals?
Introduced in 2020, Core Web Vitals (CWV) became a direct ranking factor in 2021. They shifted the focus of SEO from just "content" to "user experience." Google basically said: "If your site is annoying to use, we won't rank it."
They consist of three specific metrics:
- LCP (Largest Contentful Paint): Loading performance.
- INP (Interaction to Next Paint): Responsiveness (replaced FID in 2024).
- CLS (Cumulative Layout Shift): Visual stability.
The Three Pillars
1. Largest Contentful Paint (LCP) - Speed
Measures how long it takes for the main content (hero image, H1, video) to appear.
- Good: < 2.5 sec
- Poor: > 4.0 sec
- Fix: Optimize images (WebP), use CDNs, improve server response time (TTFB).
2. Interaction to Next Paint (INP) - Interactivity
Measures how quickly the page reacts when you click a button. Does it freeze? Does it lag?
- Good: < 200 ms
- Poor: > 500 ms
- Fix: Break up long JavaScript tasks, remove unused JS, optimize event handlers.
3. Cumulative Layout Shift (CLS) - Stability
Measures how much the page "jumps" around while loading. We've all tried to click a news article and accidentally clicked an ad because the layout shifted. That's poor CLS.
- Good: < 0.1
- Poor: > 0.25
- Fix: Always define
widthandheightattributes for images/videos. Reserve space for ads.
Why it Matters for SEO
It is a tie-breaker. If two sites have equally good content, the one with better Core Web Vitals will rank higher. Additionally, failing CWV often means users leave your site (high bounce rate), which hurts rankings indirectly.
Common Pitfalls
- Lazy Loading Above the Fold: Don't lazy load your hero image (LCP). It delays the most important visual.
- Font Flashing (FOIT/FOUT): Web fonts loading late can cause text to shift, hurting CLS. Use
font-display: swap. - Third-Party Bloat: Chat widgets, tracking pixels, and ads are the #1 killer of INP scores.
How to Audit
You cannot audit this with a simple HTML scraper. You need:
- Google PageSpeed Insights: For lab data.
- Google Search Console: For real-world user data (CrUX report).
- Chrome DevTools: For local debugging.