Vercel Speed Insights

Performance insights for your website

Website · Documentation · Twitter

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:

Framework	Package
Next.js	@vercel/speed-insights/next
Nuxt	@vercel/speed-insights/nuxt
Sveltekit	@vercel/speed-insights/sveltekit
Remix	@vercel/speed-insights/remix
React	@vercel/speed-insights/react
Astro	@vercel/speed-insights/astro
Vue	@vercel/speed-insights/vue

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, you can use the injectSpeedInsights() function @vercel/speed-insights/sveltekit in your top-level +layout.js/ts file.
   • 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.

Documentation

Find more details about this package in our documentation.