Skip to main content

Getting started with Speed Insights

This guide shows how to enable Vercel Speed Insights, add it to an application, deploy the change, and read the resulting data.

Speed Insights tracks real-time application performance, including Core Web Vitals, so you can identify user-facing performance problems.

Prerequisites​

You need:

pnpm i vercel

Setup​

Step 1: enable Speed Insights in Vercel​

On the Vercel dashboard, select your project, click the Speed Insights tab, and then click Enable in the dialog.

info

Enabling Speed Insights adds 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

If you're using the HTML implementation, you don't need to install the @vercel/speed-insights package. Skip to the HTML integration section later in this guide.

Step 3: integrate Speed Insights into your application​

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

Framework-specific integration​

Next.js (Pages Router)​

The SpeedInsights component wraps the tracking script for 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

Call this function only once in your app. It 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 lets Vercel deploy your latest pushes and merges to main.

After your app is deployed, it starts tracking performance metrics.

Verification

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

Step 5: view your data in the dashboard​

After 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 can start exploring your metrics.

Privacy and compliance​

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

Next steps​

To go further with Speed Insights:

Summary​

Setup takes four steps: enable Speed Insights in the Vercel dashboard, install the package, integrate the component for your framework, and deploy. The tracking script runs client side and reports Core Web Vitals to Vercel. Data appears in the dashboard after users visit your deployed site.

Related documentation: