Core Web Vitals: A Beginner-Friendly Walkthrough
Learn what Core Web Vitals are, why they affect Google rankings, and how to read your scores in PageSpeed Insights and Search Console.
What you will learn in this guide
- What LCP, INP and CLS measure and their thresholds
- How Google calculates "passing" Core Web Vitals
- The difference between page-level and origin-level CWV
- How to read the CrUX report in Search Console
- Realistic timelines for improving your scores
1 What are Core Web Vitals?
Core Web Vitals are three specific page-experience metrics Google uses as a ranking signal: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Each has a "good", "needs improvement", and "poor" threshold.
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP (loading) | < 2.5s | 2.5s-4.0s | > 4.0s |
| INP (responsiveness) | < 200ms | 200-500ms | > 500ms |
| CLS (visual stability) | < 0.1 | 0.1-0.25 | > 0.25 |
2 LCP — the loading metric
LCP measures when the biggest above-the-fold element finishes loading. Usually this is the hero image, a large heading, or a video poster.
Common causes of poor LCP:
- Hero image not preloaded and over 200KB
- Web fonts blocking text rendering
- Slow server TTFB (over 800ms)
- Render-blocking CSS or JavaScript above the fold
3 INP — the responsiveness metric
INP replaced FID in March 2024. It measures the longest interaction delay during a user session: how long from clicking a button to the page visibly responding.
Common causes of poor INP:
- Heavy JavaScript on click handlers (especially React/Vue re-renders)
- Third-party scripts taking over the main thread
- Synchronous code in event handlers
- Too many DOM nodes (over 1500 on a single page)
4 CLS — the visual stability metric
CLS measures how much content jumps around as it loads. A button that moves just as you click it has high CLS.
- 1Add explicit width and height to all imagesTells the browser to reserve space before the image loads.
- 2Reserve space for ads and embedsUse CSS aspect-ratio or fixed heights for ad slots, video iframes, and dynamic content.
- 3Avoid injecting content above existing contentCookie banners, alerts, and newsletter popups should appear in the same position every time, not push content down.
- 4Use font-display: swapWeb fonts that swap in late can cause text reflow. Use font-display: swap with similar fallback metrics.