docs

Appearance

@reshepe-web-vitals/js ​

vanilla js reshepe web vitals package

monitor real user experience (RUM) and web vitals data

installation ​

simply add script tag to your html inside <head> tag

html
<script async
        data-api-key="your-reshepe-public-api-key"
        src="https://cdn.jsdelivr.net/npm/@reshepe-web-vitals/js/dist/index.global.js"></script>

to get your reshepe public api key create project and go to settings

reshepe-settings

where you can find reshepe api keys

reshepe-api-keys

development mode ​

if you don't want to send data to reshepe while you are developing your application you can use development mode by adding data-development attribute to script tag

it will prevent data from being sent to reshepe server

html
<script async
        data-api-key="your-reshepe-public-api-key"
        src="https://cdn.jsdelivr.net/npm/@reshepe-web-vitals/js/dist/index.global.js"
        data-development></script>

toolbar ​

toolbar is a handy helper for developers to monitor web vitals data

toolbar

we keep it as a separate package to not bloat your bundle size

to enable it you need to separate script tag to your html inside <head> tag

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

just be careful to not include it in production