Web Vitals Extension

Chrome Extension | Public Project

JavaScript Chrome APIs Web Vitals

View on Chrome Web Store View on GitHub Report an Issue

Project Overview

The 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.

Key Features

✅ Official standards compliant
✅ Zero configuration
✅ Perfect for quick audits
✅ Based on Real User Monitoring (RUM)

Purpose

To provide a fast, visual, and non-intrusive method for measuring user experience metrics with actual browser data.

Target Users

Digital marketing specialists
SEO consultants
Frontend developers
Performance optimization agencies

Measured Metrics

Metric	Description	Recommended Threshold
LCP	Largest Contentful Paint	< 2.5s
INP	Interaction to Next Paint	< 200ms
CLS	Cumulative Layout Shift	< 0.1

Technical Stack

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);

Metrics Status (Google)

Metric	Status
LCP	Stable
CLS	Stable
INP	Stable (replaces FID)

Core Web Vitals

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:

LCP (Largest Contentful Paint): Measures load performance. A good LCP score is achieved when the largest content loads within 2.5 seconds.
INP (Interaction to Next Paint): Measures responsiveness. A good score is under 200 milliseconds.
CLS (Cumulative Layout Shift): Measures visual stability. A good score is less than 0.1.

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.

Metric Lifecycle

Core Web Vitals follow a lifecycle consisting of three phases: Experimental, Pending, and Stable.

Experimental: Early-stage metrics under active testing. Subject to change based on community feedback.
Pending: Metrics confirmed for future adoption with a defined stabilization timeline.
Stable: Fully validated and recommended metrics considered essential by Chrome for quality UX.

Tools to Monitor and Report Core Web Vitals

Google highlights Core Web Vitals across its ecosystem to emphasize their importance. The following tools support these metrics and enable performance benchmarking:

Field Tools

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.