Speed Insights Configuration with @vercel/speed-insights

With the @vercel/speed-insights npm package, you're able to configure your application to capture and send web performance metrics to Vercel.

To get started with Speed Insights, refer to our Quickstart guide which will walk you through the process of setting up Speed Insights for your project.

• @vercel/speed-insights is now distributed under the MIT license.
• It can use Vercel's randomized URLs for script loading and data collection.
• For Nuxt applications: install with the new module system.

This parameter determines the percentage of events that are sent to the server. By default, all events are sent. Lowering this parameter allows for cost savings but may result in a decrease in the overall accuracy of the data being sent. For example, a sampleRate of 0.5 would mean that only 50% of the events will be sent to the server.

To learn more about how to configure the sampleRate option, see the Sending a sample of events to Speed Insights recipe.

With the beforeSend function, you can modify or filter out the event data before it's sent to Vercel. You can use this to redact sensitive data or to avoid sending certain events.

For instance, if you wish to ignore events from a specific URL or modify them, you can do so with this option.

// Example usage of beforeSend
beforeSend: (data) => {
  if (data.url.includes('/sensitive-path')) {
    return null; // this will ignore the event
  }
  return data; // this will send the event as is
};

With the debug mode, you can view all Speed Insights events in the browser's console. This option is especially useful during development.

This option is automatically enabled if the NODE_ENV environment variable is available and either development or test.

You can manually disable it to prevent debug messages in your browsers console.

Use the route option to specify the current dynamic route (such as /blog/[slug]). This is particularly beneficial when you need to aggregate performance metrics for similar routes.

This option is automatically set when using a framework specific import such as for Next.js, Nuxt, SvelteKit and Remix.

Use the endpoint option to report the collected metrics to a different URL than the default.

This is useful when deploying several projects under the same domain, as it allows you to keep each application isolated.

For example, when yourdomain.com is managed outside of Vercel:

1. "alice-app" is deployed under yourdomain.com/alice/* and the vercel alias is alice-app.vercel.sh
2. "bob-app" is deployed under yourdomain.com/bob/* and the vercel alias is bob-app.vercel.sh
3. You route yourdomain.com/_vercel/* to alice-app.vercel.sh

Both applications send their metrics to alice-app.vercel.sh. To restore the isolation, "bob-app" should use:

<SpeedInsights endpoint="https://bob-app.vercel.sh/<unique-path>/vitals" />

The scriptSrc option allows you to load the Speed Insights script from a different URL than the default one.

<SpeedInsights scriptSrc="https://bob-app.vercel.sh/<unique-path>/script.js" />

In version 2, Vercel passes default client options at build time with a JSON string under a speedInsights key:

{
  "speedInsights": {
    "scriptSrc": "/<unique-path>/script.js",
    "endpoint": "/<unique-path>/vitals"
  }
}

Vercel configures this for you so you don't need to pass this dynamic configuration.

To change configured values, you can:

• Pass individual properties (for example, scriptSrc, endpoint) to your React or Vue <SpeedInsights /> component.
• Pass individual properties to the injectSpeedInsights() function.
• Provide your own value for the VERCEL_OBSERVABILITY_CLIENT_CONFIG build configuration variable.