GETTING STARTED WITH
SPEED INSIGHTS

MISSION BRIEFING OPERATIONAL

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

📋 NOTE: To view framework-specific instructions, use the Choose a framework dropdown on the right (at the bottom in mobile view).

PREREQUISITES
REQUIREMENTS CHECK CRITICAL

MANDATORY SYSTEMS:

  • Vercel Account: Required for deployment. Sign up for free.
  • Vercel Project: Required for configuration. Create a new project.
  • Vercel CLI: Required for local operations. Install using your package manager of choice:
pnpm:
pnpm i vercel

yarn:
yarn i vercel

npm:
npm i vercel

bun:
bun i vercel
ENABLE SPEED INSIGHTS
DASHBOARD CONFIGURATION ACTIVE

ACTIVATION SEQUENCE:

  1. Navigate to your Vercel dashboard
  2. Select your Project
  3. Click the Speed Insights tab
  4. Select Enable from the dialog
💡 NOTE: Enabling Speed Insights will add new routes (scoped at /_vercel/speed-insights/*) after your next deployment.
INSTALL PACKAGE
ADD @VERCEL/SPEED-INSIGHTS

PACKAGE INJECTION:

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

pnpm:
pnpm i @vercel/speed-insights

yarn:
yarn i @vercel/speed-insights

npm:
npm i @vercel/speed-insights

bun:
bun i @vercel/speed-insights
💡 HTML USERS: When using the HTML implementation, there is no need to install the @vercel/speed-insights package.
CONFIGURE INTEGRATION
FRAMEWORK-SPECIFIC SETUP FRAMEWORK_DEPENDENT

◆ NEXT.JS (PAGES ROUTER)

Add the SpeedInsights component to your main app file:

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;

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

◆ NEXT.JS (APP ROUTER)

Add the component to your root layout:

import { SpeedInsights } from "@vercel/speed-insights/next";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

◆ CREATE-REACT-APP

Add the component to the main app file:

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

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

◆ REMIX

Add the component to your root file:

import { SpeedInsights } from '@vercel/speed-insights/remix';

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

◆ SVELTEKIT

Call the injection function in your layout:

import { injectSpeedInsights } from "@vercel/speed-insights/sveltekit";

injectSpeedInsights();

◆ VUE / NUXT

Add the component to your template:

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

<template>
  <SpeedInsights />
</template>

◆ OTHER FRAMEWORKS

Import and call the injection function in your main app file:

import { injectSpeedInsights } from "@vercel/speed-insights";

injectSpeedInsights();

◆ HTML

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

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

◆ ASTRO

Declare the component in one of your layout components:

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

<SpeedInsights />

📝 OPTIONAL (Astro): Remove sensitive information from URLs by adding a speedInsightsBeforeSend function to the global window object. Learn more about beforeSend in the package documentation.

DEPLOYMENT
LAUNCH SEQUENCE CRITICAL

DEPLOYMENT METHODS:

Option 1: Direct Deployment

Deploy your app to Vercel's global CDN by running:

vercel deploy

Option 2: Git Repository Integration

Connect your project's git repository to enable automatic deployments on push and merge to main.

✓ READY FOR TRACKING: Once deployed, your app is ready to begin tracking performance metrics. The /_vercel/speed-insights/script.js script should be visible in the body tag of your page.
MONITORING
VIEW DASHBOARD DATA OPERATIONAL

DATA COLLECTION:

  1. Navigate to your Vercel dashboard
  2. Select your project
  3. Click the Speed Insights tab
  4. After a few days of visitors, explore your performance metrics

For detailed information on using Speed Insights, see the full documentation in the next steps.

> STATUS: DATA_COLLECTION_ACTIVE
> FREQUENCY: REAL_TIME
> METRICS_AVAILABLE: YES
NEXT STEPS
ADVANCED OPERATIONS

LEARNING RESOURCES:

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

< RETURN_TO_BASE BACK_TO_INTEL_LOG HOME_SEQUENCE > RETURN_TO_NEURAL_LINK