Getting started with Speed Insights

This guide will help you get started with using Vercel Speed Insights on your project, add the package to your project, deploy your app to Vercel, and view your data in the dashboard.

To view instructions on using the Vercel Speed Insights in your project for your framework, use the Choose a framework dropdown on the right (at the bottom in mobile view).

• A Vercel account. If you don't have one, you can sign up for free.
• A Vercel project. If you don't have one, you can create a new project.
• The Vercel CLI installed. If you don't have it, you can install it using the following command:

pnpm i -g vercel

yarn global add vercel

npm i -g vercel

bun add -g vercel

1. Add @vercel/speed-insights to your project

   Using the package manager of your choice, add the @vercel/speed-insights package to your project:

   pnpmyarnnpmbun

   Terminal

   pnpm i @vercel/speed-insights

   Terminal

   yarn add @vercel/speed-insights

   Terminal

   npm i @vercel/speed-insights

   Terminal

   bun add @vercel/speed-insights

2. Add the SpeedInsights component to your app

   The SpeedInsights component is a wrapper around the tracking script, offering more seamless integration with Next.js.

   Add the following component to the root layout:

   Next.js v13.5+Older Next.js versions

   Add the following component to your main app file:

   app/layout.tsx

   import { SpeedInsights } from '@vercel/speed-insights/next';
    
   export default function RootLayout({
     children,
   }: {
     children: React.ReactNode;
   }) {
     return (
       <html lang="en">
         <head>
           <title>Next.js</title>
         </head>
         <body>
           {children}
           <SpeedInsights />
         </body>
       </html>
     );
   }

   app/layout.jsx

   import { SpeedInsights } from '@vercel/speed-insights/next';
    
   export default function RootLayout({ children }) {
     return (
       <html lang="en">
         <head>
           <title>Next.js</title>
         </head>
         <body>
           {children}
           <SpeedInsights />
         </body>
       </html>
     );
   }

   For versions of Next.js older than 13.5, import the <SpeedInsights> component from @vercel/speed-insights/react.

   Create a dedicated component to avoid opting out from SSR on the layout and pass the pathname of the route to the SpeedInsights component:

   app/insights.tsx

   'use client';
    
   import { SpeedInsights } from '@vercel/speed-insights/react';
   import { usePathname } from 'next/navigation';
    
   export function Insights() {
     const pathname = usePathname();
    
     return <SpeedInsights route={pathname} />;
   }

   app/insights.jsx

   'use client';
    
   import { SpeedInsights } from '@vercel/speed-insights/react';
   import { usePathname } from 'next/navigation';
    
   export function Insights() {
     const pathname = usePathname();
    
     return <SpeedInsights route={pathname} />;
   }

   Then, import the Insights component in your layout:

   app/layout.tsx

   import type { ReactNode } from 'react';
   import { Insights } from './insights';
    
   export default function RootLayout({ children }: { children: ReactNode }) {
     return (
       <html lang="en">
         <head>
           <title>Next.js</title>
         </head>
         <body>
           {children}
           <Insights />
         </body>
       </html>
     );
   }

   app/layout.jsx

   import { Insights } from './insights';
    
   export default function RootLayout({ children }) {
     return (
       <html lang="en">
         <head>
           <title>Next.js</title>
         </head>
         <body>
           {children}
           <Insights />
         </body>
       </html>
     );
   }

   App.tsx

   import { SpeedInsights } from '@vercel/speed-insights/react';
    
   export default function App() {
     return (
       <div>
         {/* ... */}
         <SpeedInsights />
       </div>
     );
   }

   App.jsx

   import { SpeedInsights } from '@vercel/speed-insights/react';
    
   export default function App() {
     return (
       <div>
         {/* ... */}
         <SpeedInsights />
       </div>
     );
   }

   app/root.tsx

   import { SpeedInsights } from '@vercel/speed-insights/remix';
    
   export default function App() {
     return (
       <html lang="en">
         <body>
           {/* ... */}
           <SpeedInsights />
         </body>
       </html>
     );
   }

   app/root.jsx

   import { SpeedInsights } from '@vercel/speed-insights/remix';
    
   export default function App() {
     return (
       <html lang="en">
         <body>
           {/* ... */}
           <SpeedInsights />
         </body>
       </html>
     );
   }

   src/routes/+layout.ts

   import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
    
   injectSpeedInsights();

   src/routes/+layout.js

   import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
    
   injectSpeedInsights();

   index.html

   <script>
     window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
   </script>
   <script defer src="/<unique-path>/script.js"></script>

   index.html

   <script>
     window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
   </script>
   <script defer src="/<unique-path>/script.js"></script>

   src/App.vue

   <script setup lang="ts">
   import { SpeedInsights } from '@vercel/speed-insights/vue';
   </script>
    
   <template>
     <SpeedInsights />
   </template>

   src/App.vue

   <script setup>
   import { SpeedInsights } from '@vercel/speed-insights/vue';
   </script>
    
   <template>
     <SpeedInsights />
   </template>

   nuxt.config.ts

   export default defineNuxtConfig({
     modules: ['@vercel/speed-insights'],
   });

   nuxt.config.js

   export default defineNuxtConfig({
     modules: ['@vercel/speed-insights'],
   });

   main.ts

   import { injectSpeedInsights } from '@vercel/speed-insights';
    
   injectSpeedInsights();

   main.js

   import { injectSpeedInsights } from '@vercel/speed-insights';
    
   injectSpeedInsights();

3. Deploy your app to Vercel

   You can deploy your app to Vercel's global CDN by running the following command from your terminal:

   terminal

   vercel deploy

   Alternatively, you can connect your project's git repository, which will enable Vercel to deploy your latest pushes and merges to main.

   Once your app is deployed, it's ready to begin tracking performance metrics.

   Your deployments automatically include routes to collect Speed Insights events (scoped at /_vercel/speed-insights/* and /<unique-path>/*).

   If everything is set up correctly, you should be able to find the /<unique-path>/script.js script inside the head tag of your page.

4. View your data in the dashboard

   Once your app is deployed, and users have visited your site, you can view the data in the dashboard.

   To do so, go to your dashboard, select your project, and click Speed Insights in the sidebar.

   Upgrade to Speed Insights Plus to unlock all Core Web Vitals, breakdowns, and Drains.

   After a few days of visitors, you'll be able to start exploring your metrics. For more information on how to use Speed Insights, see Using Speed Insights.

Learn more about how Vercel supports privacy and data compliance standards with Vercel Speed Insights.

Now that you have Vercel Speed Insights set up, you can explore the following topics to learn more:

• Explore your Speed Insights dashboard
• Explore collected metrics
• Read about privacy and compliance
• Learn how to configure your client-side package
• Learn how to sample your events and manage your costs
• Explore pricing
• Troubleshooting