Web Vitals is a Google initiative to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
Core Web Vitals vs Web Vitals
Core Web Vitals (the essential subset):
- LCP (Largest Contentful Paint)
- INP (Interaction to Next Paint)
- CLS (Cumulative Layout Shift)
Other Web Vitals:
- FCP (First Contentful Paint)
- TTFB (Time to First Byte)
- FID (First Input Delay) - deprecated
Why Web Vitals matter
- User experience quantification
- Google ranking signals
- Industry-standard metrics
- Clear optimization targets
Measuring Web Vitals
Field tools (real users)
- Chrome User Experience Report
- PageSpeed Insights (field data)
- Real User Monitoring (RUM)
Lab tools (simulated)
- Lighthouse
- Chrome DevTools
- WebPageTest
web-vitals library
Google provides a JavaScript library for measuring Web Vitals:
import {onLCP, onINP, onCLS} from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);
Related Terms
Core Web Vitals
A set of three metrics defined by Google that measure the loading performance, interactivity, and visual stability of a web page.
Cumulative Layout Shift (CLS)
A Core Web Vital that measures visual stability by quantifying how much page content unexpectedly shifts during loading.
Interaction to Next Paint (INP)
A Core Web Vital that assesses page responsiveness by measuring the latency of all user interactions throughout the page lifecycle.
Largest Contentful Paint (LCP)
A Core Web Vital that measures how long it takes for the largest content element visible in the viewport to render.