Installation

Requirements

• Astro 4, 5, 6 or 7 (peer dependency ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0).
• Node.js 18.17 or later.

The package ships its TypeScript source; Astro compiles it together with your project. Its only runtime dependency is web-vitals.

Install

pnpm add @casoon/astro-webvitals

npm install @casoon/astro-webvitals

Add the component

Render <WebVitals /> once, in the layout every page uses, immediately before </body>:

---
import { WebVitals } from '@casoon/astro-webvitals';
---

<html lang="en">
  <body>
    <slot />
    <WebVitals endpoint="/api/analytics/vitals" sampleRate={0.1} />
  </body>
</html>

Rendering it more than once is harmless: the client initializes only once per page.

When it renders

• In astro build output the component always renders.
• In astro dev it renders only when trackInDev, debug, consoleDock, highlightAccessibility or dashboard is set, so local development doesn’t produce reports by accident.

What it adds to the page

Two script tags: a non-executable <script type="application/json"> with the resolved configuration, and a module script that Astro bundles and serves from your own origin, web-vitals included.

It works with Astro security.csp and other hash-based Content Security Policies without 'unsafe-inline': the only executable script is the bundled module, so allowing your own origin as a script source is enough.

Next: Quickstart.