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.

!FID, CLP and Layout shift values is displaying in console. The value can be displayed as warning when exceeding 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.

!Specific element for LCP is displaying in console

Usage

$3

This script can load via JavaScript module.

``html

`

$3

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

`JavaScript
import('https://unpkg.com/@herablog/web-vitals.log@0.2.0/web-vitals.log.js');
``

!Load script with "import('https://unpkg.com/@herablog/web-vitals.log@0.2.0/web-vitals.log.js');" in Custom JavaScript for websites