@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
-
Install the package and add to your astro config using the following command:
Terminal window npx astro add @astrojs/web-vitalsTerminal window yarn astro add @astrojs/web-vitalsTerminal window pnpm astro add @astrojs/web-vitals -
Push the new configuration to your remote database:
Terminal window npx astro db pushTerminal window yarn astro db pushTerminal window pnpm astro db push
-
Install the package using the following command:
Terminal window npm i @astrojs/web-vitalsTerminal window yarn add @astrojs/web-vitalsTerminal window pnpm add @astrojs/web-vitals -
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.}),],});Terminal window npm i @astrojs/web-vitalsTerminal window yarn add @astrojs/web-vitalsTerminal window pnpm add @astrojs/web-vitals -
Push the new configuration to your remote database:
Terminal window npx astro db pushTerminal window yarn astro db pushTerminal window pnpm astro db push
Gallery Demo















