docs

Appearance

The Reshepe Web Vitals package for vanilla JavaScript lets you monitor Core Web Vitals metrics real-time without any build steps.

Installation ​

Add the following to the <head> of your HTML:

html

<script defer
        data-api-key="YOUR-RESHEPE-PUBLIC-API-KEY"
        src="https://cdn.jsdelivr.net/npm/@reshepe-web-vitals/js/dist/index.global.js"></script>

Replace YOUR-RESHEPE-PUBLIC-API-KEY with the public key found in your project’s settings.

you can follow instructions to get your public API key here

Development mode ​

To disable data collection during development, add the data-development attribute:

html

<script defer
        data-api-key="YOUR-RESHEPE-PUBLIC-API-KEY"
        data-development
        src="https://cdn.jsdelivr.net/npm/@reshepe-web-vitals/js/dist/index.global.js"
        data-development>
</script>

Toolbar ​

The Reshepe Web Vitals toolbar provides an on-page overlay for live metric inspection.

It is shipped as a separate script to avoid inflating your main bundle.

Include it in your <head> (omit in production):

html

<script defer
        src="https://cdn.jsdelivr.net/npm/@reshepe-web-vitals/js/dist/toolbar.global.js"></script>