Vercel Speed Insights: setup, tiers and what it measures

The short version

1. Install @vercel/speed-insights and add its component (or one line of setup) to your app.
2. Deploy to Vercel. Deployments include the routes the script loads from and reports to.
3. Open the project’s Speed Insights tab once visitors have come in.

Speed Insights measures real visitors’ Core Web Vitals: how fast the main content appears, how quickly the page responds, and how much it shifts. It’s separate from Web Analytics, which counts visitors (see how to set up Vercel Web Analytics). Vercel’s quickstart has the same steps per framework.

1. Install the package

npm i @vercel/speed-insights
# or: pnpm i @vercel/speed-insights · yarn add @vercel/speed-insights · bun add @vercel/speed-insights

Version 2 is current and MIT licensed. On Vercel it needs no configuration: the build passes it the script and endpoint paths. If the project’s Speed Insights tab shows an Enable button, click it too.

2. Add it to your app

Add the component once, in the layout every page shares. The framework versions (Next.js, Nuxt, SvelteKit, Remix) report each page under its route, so /blog/a and /blog/b are read together as /blog/[slug].

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

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

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

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

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

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

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

injectSpeedInsights();

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

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

<template>
  <SpeedInsights />
</template>

---
import SpeedInsights from '@vercel/speed-insights/astro';
---

<SpeedInsights />

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

// In the root component's <body>:
<SpeedInsights />

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

injectSpeedInsights();

On Next.js older than 13.5, import from @vercel/speed-insights/react instead and pass the route yourself, as the quickstart shows.

Plain HTML

No package needed: add the snippet before </body>, where <unique-path> is your project’s path from Vercel’s quickstart.

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

3. Deploy and check that it works

Deploy, open the site, and view the page source or the Elements panel: a script.js from your project’s Speed Insights path should be in the page. As you use the page, the browser sends its measurements to the matching /vitals endpoint (Network tab). In development the package runs in debug mode and logs each event to the browser console.

What you see on each tier

• Speed Insights (free, every plan): the Real Experience Score, path and route counts with great and needs-improvement entries, over 24 hours or 7 days.
• Speed Insights Plus (Pro and Enterprise): every Core Web Vital (LCP, INP, CLS, FCP, TTFB), all breakdowns including poor entries, countries and element selectors, a 30-day range on Pro, and Drains.

What the metrics mean, and their good and poor thresholds: Core Web Vitals on Vercel.

What it costs

The free tier allows 10,000 events over a rolling 30 days, shared by the team; past that, Vercel pauses collection for those projects for at least 14 days and charges nothing. Plus is priced per project: $10 a month on Pro, plus $0.65 per 10,000 events (Speed Insights pricing). Both next to Web Analytics: what Vercel Analytics costs.

Sending fewer events

On a busy site, sampleRate sends a share of the events (by default, all of them), and beforeSend drops or rewrites one before it’s sent, for example to leave out admin pages or strip a token from the URL (package options). A lower sample rate costs accuracy on quiet pages.

<SpeedInsights
  sampleRate={0.5} // send half the events
  beforeSend={(data) => (data.url.includes('/admin') ? null : data)}
/>

No data? The usual causes

• Not deployed yet. The collection routes come with a deployment; a local run only logs to the console.
• No script on the page. Check that the component is in the shared layout, not in one page.
• Too few visits. A page needs real visitors before it has figures; give it a few days.
• Free tier paused. Over 10,000 events in 30 days, collection stops for at least 14 days.
• A proxy in front of Vercel has to forward /_vercel/speed-insights/* and your /<unique-path>/* to Vercel.

Every project at once

Vercel shows Speed Insights one project at a time. Lookout’s Speed Insights view puts every project’s Core Web Vitals on one board next to its traffic, per device, with a plain-language verdict. See it with sample data in the live demo.