vercel-logotype Logovercel-logotype Logo
Quickstart
Tutorial

Vercel Speed Insights Quickstart

Vercel Speed Insights provides you detailed insights into your website's performance. This quickstart guide will help you get started with using Speed Insights on Vercel.
Table of Contents

Speed Insights is available on all plans

To view instructions on using the Vercel Speed Insights in your project for your framework, use the Choose a framework dropdown on the right (at the bottom in mobile view).

To start tracking performance metrics with Speed Insights, use the following steps:

Quickstart steps

  1. Enable Speed Insights in Vercel

    On the Vercel dashboard, select your Project followed by the Speed Insights tab. You can also select the button below to be taken there. Then, select Enable from the dialog.

    Enabling Speed Insights will add new routes (scoped at /_vercel/speed-insights/*) after your next deployment.

  2. Add @vercel/speed-insights to your project

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

    pnpm
    yarn
    npm
    pnpm i @vercel/speed-insights

  3. Add the SpeedInsights component to your app

    The SpeedInsights component is a wrapper around the tracking script, offering more seamless integration with Next.js.

    Add the following component to the root layout:

    Add the following component to your main app file:

    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>
  );
}

  4. Deploy your app to Vercel

    You can deploy your app to Vercel's global Edge Network by running the following command from your terminal:

    terminal
    vercel deploy

    Alternatively, you can connect your project's git repository, which will enable Vercel to deploy your latest pushes and merges to main.

    Once your app is deployed, it's ready to begin tracking performance metrics.

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

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

Troubleshooting

No data visible in Speed Insights dashboard

If you are experiencing a situation where data is not visible in the Speed Insights dashboard, it could be due to a couple of reasons.

How to fix:

  1. Double check if you followed the quickstart instructions correctly
  2. Check if your adblocker is interfering with the Speed Insights script. If so, consider disabling it

Requests not getting called

If /_vercel/speed-insights/script.js is correctly loading but not sending any data (e.g. no vitals request), ensure that you're checking for the request after navigating to a different page, or switching tabs. Speed Insights data is only sent on window blur or unload events.

Not working with proxy

Speed Insights may not function when using a proxy, such as Cloudflare.

How to fix:

  1. Check your proxy configuration to make sure that all desired pages are correctly proxied to the deployment
  2. Additionally, forward all requests to /_vercel/speed-insights/* to the deployments to ensure proper functioning of Speed Insights through the proxy
Last updated on October 31, 2024
Previous
Speed Insights
Next
Metrics