Managing Usage & Costs

Use the @vercel/speed-insights package to measure and reduce your Speed Insights usage.

The Speed Insights section of Usage in your dashboard sidebar shows your Speed Insights usage over time.

Vercel bills Speed Insights usage in events only on projects that are on Speed Insights Plus. To learn more about the underlying data points and how Vercel calculates them, see Understanding data points.

To reduce the number of events collected, you can configure the @vercel/speed-insights package with the following options. First, install the package if you haven't already:

npm i @vercel/speed-insights

Then configure one or both of the following options:

The sampleRate option determines the percentage of events sent to Vercel. By default, all events are sent. Lowering this value reduces the number of events collected, which can lower costs while still providing statistically meaningful performance data.

For example, setting sampleRate to 0.5 sends performance metrics for 50% of page views:

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

import { SpeedInsights } from '@vercel/speed-insights/next';
import type { AppProps } from 'next/app';
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <SpeedInsights sampleRate={0.5} />
    </>
  );
}

import { SpeedInsights } from '@vercel/speed-insights/react';
 
function App() {
  return (
    <>
      <YourApp />
      <SpeedInsights sampleRate={0.5} />
    </>
  );
}

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

The beforeSend option lets you filter or modify events before they reach Vercel. You can use this to exclude specific pages from tracking, which reduces the total number of events collected.

Common use cases include:

• Excluding internal or admin pages that don't need performance monitoring
• Excluding pages that aren't user-facing

To exclude events from specific paths, return null from the beforeSend function:

<SpeedInsights
  beforeSend={(data) => {
    // Exclude admin pages
    if (data.url.includes('/admin')) {
      return null;
    }
    // Exclude internal tools
    if (data.url.includes('/internal')) {
      return null;
    }
    return data;
  }}
/>

If you want to track only certain pages, you can invert the logic to create an allowlist:

<SpeedInsights
  beforeSend={(data) => {
    // Only track the homepage and product pages
    const allowedPaths = ['/', '/products', '/pricing'];
    const currentPath = new URL(data.url).pathname;
 
    const isAllowed = allowedPaths.some(
      (path) => currentPath === path || currentPath.startsWith(`${path}/`),
    );
 
    if (isAllowed) {
      return data;
    }
    return null;
  }}
/>

For maximum cost control, you can combine both options. The sampleRate determines at page load whether to collect vitals, then beforeSend filters events before sending:

<SpeedInsights
  sampleRate={0.5}
  beforeSend={(data) => {
    // Exclude admin pages entirely
    if (data.url.includes('/admin')) {
      return null;
    }
    // Of the 50% of page views sampled, admin pages will be excluded
    return data;
  }}
/>

• @vercel/speed-insights configuration
• Migrating from legacy Speed Insights
• Limits and pricing
• Understanding data points