@astrojs/web-vitals

Introduction

This Astro integration enables tracking real-world website performance and storing the data in Astro DB. That data will be used in the StudioCMS dashboard to show the performance metrics of your website from the real world over time.

Installation

Astro Method

1. Install the package and add to your astro config using the following command:

   npm

   npx astro add @astrojs/web-vitals

   yarn

   yarn astro add @astrojs/web-vitals

   pnpm

   pnpm astro add @astrojs/web-vitals

2. Push the new configuration to your remote database:

   npm

   npx astro db push

   yarn

   yarn astro db push

   pnpm

   pnpm astro db push

Manual Method

1. Install the package using the following command:

   npm

   npm i @astrojs/web-vitals

   yarn

   yarn add @astrojs/web-vitals

   pnpm

   pnpm add @astrojs/web-vitals

2. Add @astrojs/web-vitals to your astro config file:

   astro.config.mjs

   import node from '@astrojs/node';
   import studioCMS from 'studiocms';
   import webVitals from '@astrojs/web-vitals';
   import { defineConfig } from 'astro/config';
   
   export default defineConfig({
      site: 'https://demo.astro-studiocms.xyz/',
      output: 'server',
      adapter: node({ mode: "standalone" }),
      integrations: [
          db(),
          webVitals(),
          studioCMS({
              dbStartPage: true, // After the first time running the dev server and following the instructions at http://localhost:4321/start this will be set to false.
          }),
      ],
   });

   npm

   npm i @astrojs/web-vitals

   yarn

   yarn add @astrojs/web-vitals

   pnpm

   pnpm add @astrojs/web-vitals

3. Push the new configuration to your remote database:

   npm

   npx astro db push

   yarn

   yarn astro db push

   pnpm

   pnpm astro db push

Gallery Demo