What Are Core Web Vitals?
Core Web Vitals are a set of real-world performance metrics defined by Google that measure the quality of a user's experience on a web page. They directly influence Google Search rankings and, more importantly, how fast and pleasant your site actually feels to visitors. Every web developer should understand them.
The three core metrics are:
- LCP (Largest Contentful Paint) — loading performance
- INP (Interaction to Next Paint) — interactivity and responsiveness
- CLS (Cumulative Layout Shift) — visual stability
Metric 1: Largest Contentful Paint (LCP)
LCP measures how long it takes for the largest visible element on the page — usually a hero image, a heading, or a large block of text — to render fully.
| Score | LCP Time |
|---|---|
| ✅ Good | ≤ 2.5 seconds |
| ⚠️ Needs Improvement | 2.5s – 4.0s |
| ❌ Poor | > 4.0 seconds |
How to Improve LCP
- Use a CDN to serve assets from servers close to your users.
- Preload your LCP image using
<link rel="preload" as="image">. - Eliminate render-blocking resources — defer non-critical CSS and JS.
- Compress and serve images in next-gen formats like WebP or AVIF.
- Minimize server response time (TTFB) with caching and efficient back-end code.
Metric 2: Interaction to Next Paint (INP)
INP replaced FID (First Input Delay) in March 2024. It measures the latency of all user interactions (clicks, taps, keyboard input) throughout the page's lifecycle, not just the first one. The reported INP is the worst interaction observed.
| Score | INP Time |
|---|---|
| ✅ Good | ≤ 200 ms |
| ⚠️ Needs Improvement | 200ms – 500ms |
| ❌ Poor | > 500 ms |
How to Improve INP
- Break up long tasks — any JavaScript task over 50ms can block the main thread. Use
scheduler.yield()orsetTimeoutto yield control. - Avoid heavy event handlers — move expensive work off the main thread with Web Workers.
- Minimize DOM size — large DOMs slow down rendering and input processing.
- Use
content-visibility: autoto skip rendering off-screen content.
Metric 3: Cumulative Layout Shift (CLS)
CLS measures how much page content unexpectedly shifts during loading. A page that jumps around as images load or ads appear is frustrating and can cause misclicks.
| Score | CLS Value |
|---|---|
| ✅ Good | ≤ 0.1 |
| ⚠️ Needs Improvement | 0.1 – 0.25 |
| ❌ Poor | > 0.25 |
How to Improve CLS
- Always set width and height on images and videos so the browser reserves space before they load.
- Avoid inserting content above existing content unless triggered by user interaction.
- Use CSS
aspect-ratiofor responsive media containers. - Load web fonts with
font-display: swapand preload critical fonts.
Tools for Measuring Core Web Vitals
- PageSpeed Insights — Google's free tool using real-world Chrome data (CrUX) plus lab data.
- Chrome DevTools → Performance tab — record and analyze page load, long tasks, and layout shifts.
- Lighthouse — available in DevTools or via CLI; gives a full audit with actionable recommendations.
- Google Search Console → Core Web Vitals report — shows field data for all your pages at scale.
- web-vitals JS library — measure Core Web Vitals in production from real user sessions.
Key Takeaway
Core Web Vitals aren't just an SEO checkbox — they're a proxy for user experience quality. Improving them means faster, more stable, more responsive pages that users actually enjoy. Start by running PageSpeed Insights on your most important pages, tackle the biggest LCP and CLS issues first (they're often the quickest wins), and then profile INP bottlenecks using DevTools.