web-vitals.log (alpha)

Wrapper of GoogleChrome/web-vitals.

This script measures Core Web Vitals and outputs the result to console while you are using sites.

In Core Web Vitals, runtime values are important, so developers need to use sites in a natural way. They should scroll down to collect "cumulative" layout shifts, and sometimes should tap an element below the fold for FID.

The values can be displayed as warning when exceeding its thresholds.

You can also see the specific element name with the value. This can be helpful for developers to inspect the reason of the result.

Usage

Development

This script can load via JavaScript module.

<script type="module" src="https://unpkg.com/@herablog/[email protected]/web-vitals.log.js"></script>

Production

Browser extension like Custom JavaScript for websites may be useful when you track the metrics in production.

import('https://unpkg.com/@herablog/[email protected]/web-vitals.log.js');