@vercel/speed-insights

Overview

@vercel/speed-insights automatically tracks web vitals and other performance metrics for your website.

This package does not track data in development mode.

It has 1st class integration with:

It also supports other frameworks, vanilla JS and static websites.

Quickstart

1. Enable Vercel Speed Insights for a project in the Vercel Dashboard.
2. Add the @vercel/speed-insights package to your project

3. Inject Speed Insights to your app

   • If you are using Next.js, React, Nuxt or Vue you can use the framework-specific <SpeedInsights /> component to inject the script into your app.
   • If you are using SvelteKit 2, you can use the injectSpeedInsights() function from @vercel/speed-insights/sveltekit in your top-level +layout.js/ts file.
   • If you are using SvelteKit 3, import injectSpeedInsights() from @vercel/speed-insights/sveltekit-next instead.
   • For other frameworks, you can use the inject function add the tracking script to your app.
   • If you want to use Vercel Speed Insights on a static site without npm, follow the instructions in the documentation.
4. Deploy your app to Vercel and see data flowing in.

Soft navigations

To disable performance reporting for client-side navigations, set softNavs to false when you initialize Speed Insights. Hard-navigation reporting is not affected.

For React, Next.js, Remix, and Astro components:

<SpeedInsights softNavs={false} />

For Vue and Nuxt components, bind the boolean value:

<SpeedInsights :soft-navs="false" />

For injectSpeedInsights, including the SvelteKit and Nuxt runtime integrations:

injectSpeedInsights({ softNavs: false });

Documentation

Find more details about this package in our documentation.