Skip to main content

Getting Started with Speed Insights

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

Speed Insights provides real-time performance monitoring for your web applications, tracking key metrics like Core Web Vitals to help you understand and optimize your site's user experience.

Prerequisites​

Before you begin, ensure you have the following:

  • 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 one of the following commands:
pnpm i vercel

Setup Steps​

Step 1: Enable Speed Insights in Vercel​

On the Vercel dashboard, select your Project followed by the Speed Insights tab. Then, select Enable from the dialog.

info

Enabling Speed Insights will add new routes (scoped at /_vercel/speed-insights/*) after your next deployment.

Step 2: Add @vercel/speed-insights to Your Project​

Framework-Specific Installation

The installation process varies by framework. HTML projects do not require package installation.

For most frameworks (Next.js, React, Remix, SvelteKit, Vue, Nuxt, Astro), install the package using your preferred package manager:

pnpm i @vercel/speed-insights
HTML Implementation

When using the HTML implementation, there is no need to install the @vercel/speed-insights package. Skip to the HTML integration section below.

Step 3: Integrate Speed Insights into Your Application​

The integration method depends on your framework. Choose the appropriate section below:

Framework-Specific Integration​

Next.js (Pages Router)​

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

Add the component to your pages/_app.tsx or pages/_app.jsx file:

pages/_app.tsx
import type { AppProps } from 'next/app';
import { SpeedInsights } from '@vercel/speed-insights/next';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <SpeedInsights />
    </>
  );
}

export default MyApp;
Older Next.js Versions (< 13.5)

For versions of Next.js older than 13.5, import from @vercel/speed-insights/react and pass the pathname:

pages/example-component.tsx
import { SpeedInsights } from '@vercel/speed-insights/react';
import { useRouter } from 'next/router';

export default function Layout() {
  const router = useRouter();
  return <SpeedInsights route={router.pathname} />;
}

Next.js (App Router)​

Add the SpeedInsights component to your root layout:

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>
  );
}
Older Next.js Versions (< 13.5)

Create a dedicated client component to avoid opting out from SSR on the layout:

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} />;
}

Then import 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>
  );
}

Create React App​

Add the SpeedInsights component to your main app file:

App.tsx
import { SpeedInsights } from '@vercel/speed-insights/react';

export default function App() {
  return (
    <div>
      {/* Your app content */}
      <SpeedInsights />
    </div>
  );
}

Remix​

Add the SpeedInsights component to your root file:

app/root.tsx
import { SpeedInsights } from '@vercel/speed-insights/remix';

export default function App() {
  return (
    <html lang="en">
      <body>
        {/* Your app content */}
        <SpeedInsights />
      </body>
    </html>
  );
}

SvelteKit​

Call the injectSpeedInsights function in your root layout:

src/routes/+layout.ts
import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';

injectSpeedInsights();

Vue​

Add the SpeedInsights component to your main app template:

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

<template>
  <SpeedInsights />
  <!-- Your app content -->
</template>

Nuxt​

Add the SpeedInsights component to your default layout:

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

<template>
  <SpeedInsights />
  <!-- Your app content -->
</template>

Astro​

Speed Insights is available for both static and SSR Astro apps. Declare the <SpeedInsights /> component near the bottom of a layout component:

BaseHead.astro
---
import SpeedInsights from '@vercel/speed-insights/astro';
const { title, description } = Astro.props;
---
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />

<SpeedInsights />

Optional: Remove Sensitive Information​

You can remove sensitive information from URLs by adding a speedInsightsBeforeSend function:

BaseHead.astro
---
import SpeedInsights from '@vercel/speed-insights/astro';
const { title, description } = Astro.props;
---
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />

<script is:inline>
  function speedInsightsBeforeSend(data) {
    console.log('Speed Insights before send', data);
    return data;
  }
</script>
<SpeedInsights />

HTML (Vanilla JavaScript)​

Add the following scripts before the closing </body> tag:

index.html
<script>
  window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
</script>
<script defer src="/_vercel/speed-insights/script.js"></script>

Other Frameworks​

For frameworks not explicitly listed, use the generic integration:

main.ts
import { injectSpeedInsights } from '@vercel/speed-insights';

injectSpeedInsights();
caution

This should only be called once in your app and must run in the client.

Step 4: Deploy Your App to Vercel​

Deploy your app to Vercel's global CDN by running the following command from your 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.

Verification

If everything is set up correctly, you should be able to find the /_vercel/speed-insights/script.js script inside the body tag of your page.

Step 5: 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:

  1. Go to your Vercel dashboard
  2. Select your project
  3. Click the Speed Insights tab

After a few days of visitors, you'll be able to start exploring your metrics.

Privacy and Compliance​

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

Next Steps​

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

Key Takeaways​

  • Speed Insights provides real-time performance monitoring for web applications
  • Integration is framework-specific but follows similar patterns across platforms
  • The tracking script runs client-side and reports Core Web Vitals to Vercel
  • Setup requires enabling in the Vercel dashboard, installing the package, integrating the component, and deploying
  • Data becomes available in the dashboard after users visit your deployed site

Related Documentation: