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 webpage. They focus on three key dimensions: loading performance, interactivity, and visual stability. Since Google incorporated these signals into its ranking algorithm, improving them has become a priority for anyone serious about SEO and site quality.
As of 2024, the three Core Web Vitals are:
- LCP — Largest Contentful Paint
- INP — Interaction to Next Paint (replaced FID in March 2024)
- CLS — Cumulative Layout Shift
LCP: Largest Contentful Paint
LCP measures how long it takes for the largest visible content element on a page to load — typically a hero image, a large heading, or a video thumbnail.
| Score | LCP Value |
|---|---|
| Good | ≤ 2.5 seconds |
| Needs Improvement | 2.5 – 4.0 seconds |
| Poor | > 4.0 seconds |
How to Improve LCP
- Use a fast hosting provider and a CDN to serve assets closer to users.
- Optimize and compress hero images (use WebP or AVIF formats).
- Add the
fetchpriority="high"attribute to your above-the-fold image. - Eliminate render-blocking CSS and JavaScript.
- Enable server-side caching and use HTTP/2 or HTTP/3.
INP: Interaction to Next Paint
INP measures the overall responsiveness of a page to user interactions — clicks, taps, and keyboard inputs. It captures the full delay from when a user interacts with an element to when the browser visually responds.
| Score | INP Value |
|---|---|
| Good | ≤ 200 milliseconds |
| Needs Improvement | 200 – 500 ms |
| Poor | > 500 ms |
How to Improve INP
- Minimize JavaScript execution time — break up long tasks with
setTimeoutorscheduler.yield(). - Remove or defer third-party scripts (ads, trackers, chat widgets) that block the main thread.
- Use web workers for heavy computation off the main thread.
- Optimize event handlers to do as little work as possible synchronously.
CLS: Cumulative Layout Shift
CLS measures how much the page's content unexpectedly moves around as it loads. A high CLS score means users may accidentally click the wrong button as elements jump around.
| Score | CLS Value |
|---|---|
| Good | ≤ 0.1 |
| Needs Improvement | 0.1 – 0.25 |
| Poor | > 0.25 |
How to Improve CLS
- Always specify
widthandheightattributes on images and videos. - Reserve space for ads and embeds so they don't push content when they load.
- Avoid injecting content above existing content unless triggered by user interaction.
- Use CSS
transformfor animations instead of properties that trigger layout changes.
How to Measure Your Core Web Vitals
Several free tools can help you assess your scores:
- Google PageSpeed Insights — Lab and field data from real users (pagespeed.web.dev)
- Google Search Console — Aggregated CWV data across all your pages
- Chrome DevTools — Real-time performance profiling in your browser
- WebPageTest.org — Detailed waterfall analysis and CWV measurement
The Takeaway
Core Web Vitals aren't just a Google checkbox — they reflect real user experience quality. Improving your LCP, INP, and CLS scores means a faster, more stable, more responsive website. And that benefits both your visitors and your search rankings.