Chrome Extension | Public Project
JavaScript Chrome APIs Web Vitals
View on Chrome Web Store View on GitHub Report an IssueThe Web Vitals Extension is designed for digital marketers, SEO professionals, and developers who need to measure user experience (UX) performance directly from the browser. It visualizes real-time Core Web Vitals metrics such as LCP, INP, and CLS.
This project is an official fork of Google's original extension, maintaining complete technical alignment and ensuring future-proof updates.
To provide a fast, visual, and non-intrusive method for measuring user experience metrics with actual browser data.
Metric | Description | Recommended Threshold |
---|---|---|
LCP | Largest Contentful Paint | < 2.5s |
INP | Interaction to Next Paint | < 200ms |
CLS | Cumulative Layout Shift | < 0.1 |
This extension uses the web-vitals
library to collect real-time UX metrics directly from the browser, fully aligned with Google standards.
import { onCLS, onINP, onLCP } from 'web-vitals';
onCLS(console.log);
onINP(console.log);
onLCP(console.log);
Metric | Status |
---|---|
LCP | Stable |
CLS | Stable |
INP | Stable (replaces FID) |
Core Web Vitals are a subset of Web Vitals applicable to all web pages. They represent the critical aspects of user experience that Google surfaces across all its tools. Each metric reflects a real-world UX outcome measurable in the field.
Over time, these metrics evolve. The current set focuses on loading performance, interactivity, and visual stability:
To meet performance targets, it is recommended to track the 75th percentile across both mobile and desktop users.
A page is considered passing if it meets the thresholds for all three metrics at the 75th percentile level.
Core Web Vitals follow a lifecycle consisting of three phases: Experimental, Pending, and Stable.
Google highlights Core Web Vitals across its ecosystem to emphasize their importance. The following tools support these metrics and enable performance benchmarking:
The Chrome User Experience Report (CrUX) collects anonymized real-user data for each metric. These insights power tools like Chrome DevTools, PageSpeed Insights, and Search Console’s Core Web Vitals report.