- 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

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.

- Cumulative Layout Shift (CLS)

- First Input Delay (FID)

- Largest Contentful Paint (LCP)

- Interaction to next Paint (INP) _(experimental)_

- First Contentful Paint (FCP)

- Time to First Byte (TTFB)