web-vitals
- From npm
- From a CDN
- Basic usage
- Report the value on every change
- Report only the delta of changes
- Report metrics for soft navigations
- Send the results to an analytics endpoint
- Send the results to Google Analytics
- Send the results to Google Tag Manager
- Send attribution data
- Batch multiple reports together
- Which build is right for you?
- Types
- Functions
- Rating Thresholds
- Attribution
Overview
The web-vitals library is a tiny (~3K, brotli'd), modular library for measuring all the Web Vitals metrics on real users, in a way that accurately matches how they're measured by Chrome and reported to other Google tools (e.g. Chrome User Experience Report, Page Speed Insights, Search Console's Speed Report).
The library supports all of the Core Web Vitals as well as a number of other metrics that are useful in diagnosing real-user performance issues.
Core Web Vitals
Other metrics
Install and load the library
The web-vitals library uses the buffered flag for PerformanceObserver, allowing it to access performance entries that occurred before the library was loaded.
This means you do not need to load this library early in order to get accurate performance data. In general, this library should be deferred until after other user-impacting code has loaded.
From npm
You can install this library from npm by running:
npm install web-vitals[!NOTE]
If you're not using npm, you can still loadweb-vitalsviaChat with me