Web Vitals
Web Vitals are Google's metrics for measuring real-world user experience. They directly affect search ranking (Core Web Vitals).
Core Web Vitals
LCP - Largest Contentful Paint Time until the largest visible element is rendered.
Good: <= 2.5s
Needs improvement: 2.5s - 4s
Poor: > 4s
Typically: hero image, heading, or large text blockCLS - Cumulative Layout Shift How much the page layout shifts unexpectedly during load.
Good: <= 0.1
Poor: > 0.25
Causes: images without dimensions, late-loading ads, dynamic content injectionINP - Interaction to Next Paint (replaced FID in 2024) Responsiveness to user interactions - measures worst interaction delay.
Good: <= 200ms
Poor: > 500msOther important metrics
TTFB - Time to First Byte - server response speed. FCP - First Contentful Paint - first text or image rendered. TBT - Total Blocking Time - lab metric for main-thread blocking, the closest proxy for INP in Lighthouse (TTI was removed from Lighthouse in 2023).
How to measure
import { onLCP, onCLS, onINP } from 'web-vitals';
onLCP(({ value, rating }) => {
analytics.send({ metric: 'LCP', value, rating }); // 'good' | 'needs-improvement' | 'poor'
});
onCLS(({ value }) => analytics.send({ metric: 'CLS', value }));
onINP(({ value }) => analytics.send({ metric: 'INP', value }));Common fixes
| Metric | Common cause | Fix |
|---|---|---|
| LCP | Large unoptimized image | <img loading="eager">, WebP, CDN, fetchpriority="high" |
| CLS | Images without size | Always set width + height on images |
| INP | Heavy JS on interaction | Code split, move work to web worker, debounce |
Core Web Vitals are measured by real Chrome users in the field and reported in Google Search Console. Poor scores directly impact SEO ranking.
updated