Core Web Vitals are Google's metrics for measuring user experience on websites. They consist of three metrics: LCP (loading speed), INP (interactivity), and CLS (visual stability). Good Core Web Vitals scores are a Google ranking factor and improve user engagement.
Core Web Vitals are Google’s metrics for measuring user experience on websites. They consist of three metrics: LCP (loading speed), INP (interactivity), and CLS (visual stability). Good Core Web Vitals scores are a Google ranking factor and directly impact user engagement.
What Are Core Web Vitals?
Core Web Vitals are a subset of Web Vitals, Google’s initiative to provide unified guidance for quality signals essential to delivering great user experience. They focus on three aspects of user experience: loading, interactivity, and visual stability.
The three Core Web Vitals:
| Metric | Measures | Good Score | Poor Score |
|---|---|---|---|
| LCP | Loading performance | < 2.5s | > 4.0s |
| INP | Interactivity | < 200ms | > 500ms |
| CLS | Visual stability | < 0.1 | > 0.25 |
Largest Contentful Paint (LCP)
LCP measures how long it takes for the largest content element to become visible in the viewport.
What LCP Measures
LCP tracks the render time of the largest image, video, or text block visible within the viewport. This represents when the main content has loaded.
Elements considered for LCP:
<img>elements<image>elements inside<svg><video>elements (poster image)- Elements with background images via
url() - Block-level elements containing text nodes
LCP Thresholds
| Score | Rating | User Experience |
|---|---|---|
| ≤ 2.5s | Good | Content loads quickly |
| 2.5s - 4.0s | Needs Improvement | Noticeable delay |
| > 4.0s | Poor | Frustrating wait time |
Common LCP Issues
Server-side issues:
- Slow server response time (TTFB)
- Server-side rendering delays
- Database query bottlenecks
Resource issues:
- Large, unoptimized images
- Render-blocking JavaScript/CSS
- Slow third-party scripts
Client-side issues:
- Client-side rendering delays
- Heavy JavaScript execution
- Font loading delays
LCP Optimization Strategies
1. Optimize server response time:
- Use a CDN for static assets
- Cache pages at the edge
- Optimize database queries
- Use HTTP/2 or HTTP/3
2. Optimize images:
- Compress images (WebP, AVIF)
- Use responsive images (srcset)
- Preload LCP image
- Lazy load below-fold images
3. Remove render-blocking resources:
- Defer non-critical JavaScript
- Inline critical CSS
- Remove unused CSS/JS
- Use async/defer attributes
4. Preload critical resources:
<link rel="preload" href="hero-image.webp" as="image">
<link rel="preload" href="critical-font.woff2" as="font" crossorigin>
Interaction to Next Paint (INP)
INP replaced First Input Delay (FID) in March 2024 as the interactivity metric. It measures responsiveness to all user interactions throughout the page lifecycle.
What INP Measures
INP observes the latency of all click, tap, and keyboard interactions during a page visit. The final INP value is the longest interaction observed (with outliers excluded for pages with many interactions).
Interaction types measured:
- Mouse clicks
- Touch taps
- Keyboard presses
Not measured:
- Hover events
- Scroll events
INP Thresholds
| Score | Rating | User Experience |
|---|---|---|
| ≤ 200ms | Good | Feels responsive |
| 200ms - 500ms | Needs Improvement | Slight delay noticed |
| > 500ms | Poor | Feels sluggish/broken |
Common INP Issues
JavaScript-related:
- Long-running JavaScript tasks
- Heavy event handlers
- Third-party script blocking
- Large JavaScript bundles
Rendering-related:
- Forced synchronous layouts
- Style recalculations
- Paint and composite delays
INP Optimization Strategies
1. Break up long tasks:
// Bad: Long blocking task
function processData(items) {
items.forEach(item => heavyOperation(item));
}
// Good: Yield to main thread
async function processData(items) {
for (const item of items) {
heavyOperation(item);
await scheduler.yield(); // Allow browser to respond
}
}
2. Optimize event handlers:
// Debounce frequent events
const debouncedHandler = debounce(handleInput, 150);
input.addEventListener('input', debouncedHandler);
3. Use web workers for heavy processing:
const worker = new Worker('heavy-task.js');
worker.postMessage(data);
worker.onmessage = (e) => updateUI(e.data);
4. Reduce JavaScript bundle size:
- Code splitting
- Tree shaking
- Lazy loading components
Cumulative Layout Shift (CLS)
CLS measures visual stability by quantifying unexpected layout shifts during the page lifecycle.
What CLS Measures
CLS calculates the sum of all individual layout shift scores for every unexpected shift that occurs during the entire lifespan of the page. A layout shift occurs when a visible element changes its position from one rendered frame to the next.
CLS formula:
Layout Shift Score = Impact Fraction × Distance Fraction
CLS Thresholds
| Score | Rating | User Experience |
|---|---|---|
| ≤ 0.1 | Good | Stable layout |
| 0.1 - 0.25 | Needs Improvement | Some shifting noticed |
| > 0.25 | Poor | Frustrating shifts |
Common CLS Issues
Images and media:
- Images without dimensions
- Ads without reserved space
- Embeds and iframes without size
Dynamic content:
- Content injected above existing content
- Web fonts causing text reflow
- Dynamically loaded components
CLS Optimization Strategies
1. Set explicit dimensions for media:
<!-- Always include width and height -->
<img src="image.jpg" width="800" height="600" alt="Description">
<!-- Or use aspect-ratio CSS -->
<style>
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
</style>
2. Reserve space for ads and embeds:
.ad-container {
min-height: 250px; /* Reserve space */
}
3. Avoid inserting content above existing content:
// Bad: Inserting at top pushes content down
container.prepend(newElement);
// Better: Insert below or use animations
container.append(newElement);
4. Optimize font loading:
/* Prevent font swap causing layout shift */
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: optional; /* or 'swap' with size-adjust */
}
Measuring Core Web Vitals
Lab Data vs Field Data
| Type | Source | Use Case |
|---|---|---|
| Lab data | Controlled testing environment | Debugging, development |
| Field data | Real user measurements (RUM) | Actual user experience, rankings |
Field data (from Chrome User Experience Report) is what Google uses for ranking signals.
Measurement Tools
Google tools:
- PageSpeed Insights - Lab + field data
- Search Console - Site-wide Core Web Vitals report
- Chrome DevTools - Performance panel for debugging
- Lighthouse - Lab-based auditing
Third-party tools:
- WebPageTest
- GTmetrix
- Calibre
- SpeedCurve
Reading PageSpeed Insights
PageSpeed Insights shows both field data (if available) and lab data:
Field data section:
- Based on real Chrome users over 28 days
- Shows pass/fail for Core Web Vitals assessment
- This data affects rankings
Lab data section:
- Simulated test from Google servers
- Useful for debugging specific issues
- Does not directly affect rankings
Core Web Vitals and SEO
Ranking Impact
Core Web Vitals became a ranking factor in June 2021 as part of the Page Experience update.
Important context:
- Core Web Vitals are one of many ranking factors
- Content relevance still matters more
- Impact is most noticeable in competitive situations
- Mobile and desktop are evaluated separately
Competitive Advantage
When two pages have similar content quality and relevance, the one with better Core Web Vitals may rank higher. This makes optimization valuable for:
- Highly competitive keywords
- Pages with similar content to competitors
- Industries where user experience matters
Core Web Vitals Optimization Checklist
LCP Checklist
- Server response time under 600ms
- LCP image preloaded
- Images compressed and properly sized
- Critical CSS inlined
- Render-blocking resources eliminated
- CDN configured for static assets
INP Checklist
- No JavaScript tasks over 50ms
- Event handlers optimized
- Third-party scripts audited
- Code splitting implemented
- Heavy processing moved to web workers
CLS Checklist
- All images have width/height
- Ad slots have reserved space
- Fonts use font-display: swap/optional
- No content injected above fold
- Embeds have explicit dimensions
Common Mistakes
- Optimizing only lab data - Field data is what matters for rankings
- Ignoring mobile - Mobile and desktop are scored separately
- Over-optimizing one metric - All three must pass
- Forgetting third-party scripts - Ads and widgets often cause issues
- Not monitoring after launch - Performance can degrade over time
Conclusion
Core Web Vitals measure the user experience aspects that matter most: loading speed (LCP), interactivity (INP), and visual stability (CLS). As a Google ranking factor, optimizing these metrics improves both search performance and user engagement.
Focus on field data from real users rather than just lab scores. Start with the metric that’s furthest from the “good” threshold. Most sites have LCP issues from unoptimized images or CLS issues from missing dimensions.
Combine Core Web Vitals optimization with solid technical SEO foundations for the best results. Regular monitoring ensures performance doesn’t regress as your site evolves.