What Are Core Web Vitals?
Core Web Vitals are a set of real-world performance metrics defined by Google to measure the user experience of a web page. They are an official Google ranking signal, meaning poor scores can directly hurt your search visibility — not just your user experience.
As of 2024, the three Core Web Vitals are:
- LCP — Largest Contentful Paint
- INP — Interaction to Next Paint (replaced FID in 2024)
- CLS — Cumulative Layout Shift
1. Largest Contentful Paint (LCP)
LCP measures how long it takes for the largest visible element on the page to load. This is typically a hero image, a large heading, or a video thumbnail.
- Good: Under 2.5 seconds
- Needs Improvement: 2.5–4.0 seconds
- Poor: Over 4.0 seconds
How to Improve LCP
- Use a fast, reliable hosting provider
- Implement a Content Delivery Network (CDN)
- Preload your largest above-the-fold image using
<link rel="preload"> - Convert images to WebP or AVIF format and compress them
- Eliminate render-blocking JavaScript and CSS
2. Interaction to Next Paint (INP)
INP measures the responsiveness of your page to user interactions — clicks, taps, and keyboard inputs. Specifically, it tracks the time from when a user interacts to when the browser renders the visual response.
- Good: Under 200 milliseconds
- Needs Improvement: 200–500ms
- Poor: Over 500ms
How to Improve INP
- Reduce the amount of JavaScript running on the main thread
- Break up long tasks into smaller, asynchronous chunks
- Remove or defer third-party scripts (ads, chat widgets, analytics)
- Use web workers for non-UI tasks
3. Cumulative Layout Shift (CLS)
CLS measures visual stability — how much the page layout shifts unexpectedly as it loads. You've experienced bad CLS when you go to click a button and an ad loads above it, sending you to the wrong link.
- Good: Under 0.1
- Needs Improvement: 0.1–0.25
- Poor: Over 0.25
How to Improve CLS
- Always specify width and height attributes on images and video elements
- Reserve space for ad slots with a fixed min-height
- Avoid inserting content above existing content after the page loads
- Use
font-display: optionalto prevent layout shifts from web fonts
How to Measure Core Web Vitals
| Tool | Data Type | Best For |
|---|---|---|
| Google Search Console | Field (real users) | Overall site monitoring |
| PageSpeed Insights | Both lab + field | Per-page diagnosis |
| Chrome DevTools | Lab | Debugging specific issues |
| Lighthouse (CLI/Extension) | Lab | Automated auditing |
| WebPageTest | Lab | Deep waterfall analysis |
The Bigger Picture
Core Web Vitals aren't just about rankings — they directly correlate with user satisfaction and conversion rates. A faster, more stable page keeps visitors engaged and more likely to return. Treat these metrics as ongoing health indicators for your site, not a one-time fix.
Check your scores in Google Search Console → Experience → Core Web Vitals to see which URLs need the most attention first.