What Are Core Web Vitals?
Core Web Vitals are a set of real-world performance metrics that Google uses as part of its page experience signal. They measure how fast, responsive, and visually stable a page feels to real users. Poor scores can hurt your rankings; strong scores give you a competitive edge.
As of 2024, the three Core Web Vitals are:
- Largest Contentful Paint (LCP) — loading performance
- Interaction to Next Paint (INP) — interactivity (replaced FID in March 2024)
- Cumulative Layout Shift (CLS) — visual stability
1. Largest Contentful Paint (LCP)
LCP measures how long it takes for the largest visible element on the page (usually a hero image or headline) to fully render. Google's target: under 2.5 seconds.
How to Improve LCP:
- Optimize and compress hero images; use WebP or AVIF formats.
- Use a Content Delivery Network (CDN) to serve assets from locations closer to the user.
- Remove render-blocking JavaScript and CSS that delay page paint.
- Enable browser caching and use efficient cache policies.
- Preload critical resources using
<link rel="preload">.
2. Interaction to Next Paint (INP)
INP replaced First Input Delay (FID) in 2024. It measures the latency of all user interactions (clicks, taps, keyboard inputs) throughout a session, not just the first one. Google's target: under 200 milliseconds.
How to Improve INP:
- Minimize long JavaScript tasks that block the main thread.
- Break up heavy JS execution using techniques like code splitting and lazy loading.
- Defer non-critical third-party scripts (ads, chat widgets, analytics).
- Use a web worker for computationally intensive tasks.
3. Cumulative Layout Shift (CLS)
CLS measures how much the page layout unexpectedly shifts during loading. A high CLS score means elements are moving around as the page loads — a frustrating experience for users. Google's target: under 0.1.
How to Improve CLS:
- Always specify width and height attributes on images and video elements.
- Reserve space for ads, embeds, and iframes before they load.
- Avoid inserting content above existing content dynamically.
- Use CSS
aspect-ratioto maintain media dimensions during load.
How to Measure Your Core Web Vitals
| Tool | Type | Best For |
|---|---|---|
| Google Search Console | Field data (real users) | Site-wide CWV overview |
| PageSpeed Insights | Lab + Field data | Per-page diagnostics |
| Chrome DevTools | Lab data | Deep debugging |
| Lighthouse | Lab data | Automated audits |
| CrUX Dashboard | Field data | Historical trend tracking |
The Bottom Line
Core Web Vitals aren't just a ranking checkbox — they're a direct measure of user experience. A fast, stable, responsive site keeps visitors engaged and sends positive signals to Google. Start by checking your scores in Google Search Console, prioritize your worst-performing pages, and work through fixes systematically.