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.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:
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.
Using the package manager of your choice, add the @vercel/speed-insights package to your project:
pnpm i @vercel/speed-insightsThe 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:
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>
);
}You can deploy your app to Vercel's global Edge Network by running the following command from your terminal:
vercel deployAlternatively, 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.
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:
- Double check if you followed the quickstart instructions correctly
- Check if your adblocker is interfering with the Speed Insights script. If so, consider disabling it
Speed Insights may not function when using a proxy, such as Cloudflare.
How to fix:
- Check your proxy configuration to make sure that all desired pages are correctly proxied to the deployment
- Additionally, forward all requests to
/_vercel/speed-insights/*to the deployments to ensure proper functioning of Speed Insights through the proxy
Was this helpful?