Vercel Speed Insights
Performance insights for your website
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
-
Enable Vercel Speed Insights for a project in the Vercel Dashboard.
-
Add the
@vercel/speed-insightspackage to your project -
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/sveltekitin your top-level+layout.js/tsfile. - For other frameworks, you can use the
injectfunction 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.
- If you are using Next.js, React, Nuxt or Vue you can use the framework-specific
-
Deploy your app to Vercel and see data flowing in.
Documentation
Find more details about this package in our documentation.