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

  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.

  5. View your data in the dashboard

    Once your app is deployed, and users have visited your site, you can view the data in the dashboard.

    To do so, go to your dashboard, select your project, and click the Speed Insights tab.

    After a few days of visitors, you'll be able to start exploring your metrics. For more information on how to use Speed Insights, see Using Speed Insights.

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

Last updated on November 7, 2024
Previous
Speed Insights
Next
Using Speed Insights