Web Vitals

Essential metrics for a healthy site.

PerformanceDev tool
GoogleChrome/web-vitalsweb.dev/vitalsweb-vitals

README

web-vitals


- Overview
- Install and load the library
  - From npm
  - From a CDN
- Usage
  - Basic usage
  - Report the value on every change
  - Report only the delta of changes
  - 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
- Build options
  - Which build is right for you?
  - How the polyfill works
- API
  - Types
  - Functions
  - Attribution
- Browser Support
- Limitations
- Development
- Integrations
- License

Overview


The web-vitals library is a tiny (~1.5K, 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


- Cumulative Layout Shift (CLS)
- First Input Delay (FID)
- Largest Contentful Paint (LCP)

Other metrics


- Interaction to next Paint (INP) _(experimental)_
- First Contentful Paint (FCP)
- Time to First Byte (TTFB)


Install and load the library



From npm


You can install this library from npm by running:

  1. ```sh
  2. npm install web-vitals
  3. ```

_**Note:** If you're not using npm, you can still load `web-vitals` via `