From 4f1cecd78b8c3c238950a5734e1532b5b1654d7f Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Sat, 3 Jan 2026 05:31:22 +0000
Subject: [PATCH] Set up Vercel Speed Insights for your project
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Vade Implementation Report

## Summary
Successfully implemented comprehensive documentation for Vercel Speed Insights integration guide.

## What was implemented

Created a complete getting-started guide for Vercel Speed Insights with framework-specific instructions and best practices.

## Files Created

- **docs/speed-insights/getting-started.md** - Comprehensive guide covering:
  - Prerequisites for using Speed Insights
  - How to enable Speed Insights in Vercel dashboard
  - Installation instructions for the `@vercel/speed-insights` package
  - Framework-specific implementation examples for:
    - Next.js (Pages Router and App Router)
    - Create React App
    - Remix
    - SvelteKit
    - HTML
    - Vue
    - Nuxt
    - Astro
    - Other frameworks
  - Deployment instructions to Vercel
  - How to view metrics in the dashboard
  - Next steps and additional resources

## Implementation Details

The documentation was structured to:
1. Provide clear prerequisites and setup requirements
2. Include step-by-step installation and configuration instructions
3. Cover multiple frameworks with both TypeScript and JavaScript examples
4. Provide best practices and notes for each framework variant
5. Include information on advanced features like the `speedInsightsBeforeSend` function for Astro
6. Link to related documentation and resources

## File Structure

```
docs/
└── speed-insights/
    └── getting-started.md
```

## Notes

- The documentation is well-formatted markdown that's easy to read and maintain
- All code examples include both TypeScript and JavaScript variants where applicable
- Framework-specific instructions are clearly organized with headers for easy navigation
- The guide follows Vercel's documentation style and includes helpful tips and notes
- Deployment instructions and dashboard guidance are included for a complete getting-started experience

## Next Steps (Optional)

Consider creating additional documentation files such as:
- Configuration guide for advanced options
- Troubleshooting guide for common issues
- Metrics and analytics guide
- Privacy and compliance guide

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
---
 docs/speed-insights/getting-started.md | 532 +++++++++++++++++++++++++
 1 file changed, 532 insertions(+)
 create mode 100644 docs/speed-insights/getting-started.md

diff --git a/docs/speed-insights/getting-started.md b/docs/speed-insights/getting-started.md
new file mode 100644
index 0000000..7f87240
--- /dev/null
+++ b/docs/speed-insights/getting-started.md
@@ -0,0 +1,532 @@
+# Getting started with Speed Insights
+
+This guide will help you get started with using Vercel Speed Insights on your project, showing you how to enable it, add the package to your project, deploy your app to Vercel, and view your data in the dashboard.
+
+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).
+
+## Prerequisites
+
+- A Vercel account. If you don't have one, you can [sign up for free](https://vercel.com/signup).
+- A Vercel project. If you don't have one, you can [create a new project](https://vercel.com/new).
+- The Vercel CLI installed. If you don't have it, you can install it using the following command:
+
+```bash
+# Using pnpm
+pnpm i vercel
+
+# Using yarn
+yarn i vercel
+
+# Using npm
+npm i vercel
+
+# Using bun
+bun i vercel
+```
+
+## Enable Speed Insights in Vercel
+
+On the [Vercel dashboard](/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.
+
+> **💡 Note:** Enabling Speed Insights will add new routes (scoped at `/_vercel/speed-insights/*`) after your next deployment.
+
+## Add `@vercel/speed-insights` to your project
+
+### For most frameworks (Next.js, SvelteKit, Remix, Create React App, Nuxt, Vue, Astro)
+
+Using the package manager of your choice, add the `@vercel/speed-insights` package to your project:
+
+```bash
+# Using pnpm
+pnpm i @vercel/speed-insights
+
+# Using yarn
+yarn i @vercel/speed-insights
+
+# Using npm
+npm i @vercel/speed-insights
+
+# Using bun
+bun i @vercel/speed-insights
+```
+
+### For HTML projects
+
+> **💡 Note:** When using the HTML implementation, there is no need to install the `@vercel/speed-insights` package.
+
+## Add the SpeedInsights component to your app
+
+### For Next.js (Pages Router)
+
+The `SpeedInsights` component is a wrapper around the tracking script, offering more seamless integration with Next.js.
+
+Add the following component to your main app file:
+
+**TypeScript version (pages/_app.tsx):**
+```tsx
+import type { AppProps } from 'next/app';
+import { SpeedInsights } from '@vercel/speed-insights/next';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <SpeedInsights />
+    </>
+  );
+}
+
+export default MyApp;
+```
+
+**JavaScript version (pages/_app.jsx):**
+```jsx
+import { SpeedInsights } from "@vercel/speed-insights/next";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <SpeedInsights />
+    </>
+  );
+}
+
+export default MyApp;
+```
+
+#### For Next.js versions older than 13.5
+
+Import the `<SpeedInsights>` component from `@vercel/speed-insights/react`. Then pass it the pathname of the route:
+
+**TypeScript version (pages/example-component.tsx):**
+```tsx
+import { SpeedInsights } from "@vercel/speed-insights/react";
+import { useRouter } from "next/router";
+
+export default function Layout() {
+  const router = useRouter();
+
+  return <SpeedInsights route={router.pathname} />;
+}
+```
+
+**JavaScript version (pages/example-component.jsx):**
+```jsx
+import { SpeedInsights } from "@vercel/speed-insights/react";
+import { useRouter } from "next/router";
+
+export default function Layout() {
+  const router = useRouter();
+
+  return <SpeedInsights route={router.pathname} />;
+}
+```
+
+### For Next.js (App Router)
+
+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:
+
+**TypeScript version (app/layout.tsx):**
+```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>
+  );
+}
+```
+
+**JavaScript version (app/layout.jsx):**
+```jsx
+import { SpeedInsights } from "@vercel/speed-insights/next";
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <title>Next.js</title>
+      </head>
+      <body>
+        {children}
+        <SpeedInsights />
+      </body>
+    </html>
+  );
+}
+```
+
+#### For Next.js versions older than 13.5
+
+Create a dedicated component to avoid opting out from SSR on the layout and pass the pathname of the route to the `SpeedInsights` component:
+
+**TypeScript version (app/insights.tsx):**
+```tsx
+"use client";
+
+import { SpeedInsights } from "@vercel/speed-insights/react";
+import { usePathname } from "next/navigation";
+
+export function Insights() {
+  const pathname = usePathname();
+
+  return <SpeedInsights route={pathname} />;
+}
+```
+
+**JavaScript version (app/insights.jsx):**
+```jsx
+"use client";
+
+import { SpeedInsights } from "@vercel/speed-insights/react";
+import { usePathname } from "next/navigation";
+
+export function Insights() {
+  const pathname = usePathname();
+
+  return <SpeedInsights route={pathname} />;
+}
+```
+
+Then, import the `Insights` component in your layout:
+
+**TypeScript version (app/layout.tsx):**
+```tsx
+import type { ReactNode } from "react";
+import { Insights } from "./insights";
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <title>Next.js</title>
+      </head>
+      <body>
+        {children}
+        <Insights />
+      </body>
+    </html>
+  );
+}
+```
+
+**JavaScript version (app/layout.jsx):**
+```jsx
+import { Insights } from "./insights";
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <title>Next.js</title>
+      </head>
+      <body>
+        {children}
+        <Insights />
+      </body>
+    </html>
+  );
+}
+```
+
+### For Create React App
+
+The `SpeedInsights` component is a wrapper around the tracking script, offering more seamless integration with React.
+
+Add the following component to the main app file.
+
+**TypeScript version (App.tsx):**
+```tsx
+import { SpeedInsights } from '@vercel/speed-insights/react';
+
+export default function App() {
+  return (
+    <div>
+      {/* ... */}
+      <SpeedInsights />
+    </div>
+  );
+}
+```
+
+**JavaScript version (App.jsx):**
+```jsx
+import { SpeedInsights } from "@vercel/speed-insights/react";
+
+export default function App() {
+  return (
+    <div>
+      {/* ... */}
+      <SpeedInsights />
+    </div>
+  );
+}
+```
+
+### For Remix
+
+The `SpeedInsights` component is a wrapper around the tracking script, offering a seamless integration with Remix.
+
+Add the following component to your root file:
+
+**TypeScript version (app/root.tsx):**
+```tsx
+import { SpeedInsights } from '@vercel/speed-insights/remix';
+
+export default function App() {
+  return (
+    <html lang="en">
+      <body>
+        {/* ... */}
+        <SpeedInsights />
+      </body>
+    </html>
+  );
+}
+```
+
+**JavaScript version (app/root.jsx):**
+```jsx
+import { SpeedInsights } from "@vercel/speed-insights/remix";
+
+export default function App() {
+  return (
+    <html lang="en">
+      <body>
+        {/* ... */}
+        <SpeedInsights />
+      </body>
+    </html>
+  );
+}
+```
+
+### For SvelteKit
+
+Add the following component to your root file:
+
+**TypeScript version (src/routes/+layout.ts):**
+```ts
+import { injectSpeedInsights } from "@vercel/speed-insights/sveltekit";
+
+injectSpeedInsights();
+```
+
+**JavaScript version (src/routes/+layout.js):**
+```js
+import { injectSpeedInsights } from "@vercel/speed-insights/sveltekit";
+
+injectSpeedInsights();
+```
+
+### For HTML
+
+Add the following scripts before the closing tag of the `<body>`:
+
+```html
+<script>
+  window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
+</script>
+<script defer src="/_vercel/speed-insights/script.js"></script>
+```
+
+### For Vue
+
+The `SpeedInsights` component is a wrapper around the tracking script, offering more seamless integration with Vue.
+
+Add the following component to the main app template.
+
+**TypeScript version (src/App.vue):**
+```vue
+<script setup lang="ts">
+import { SpeedInsights } from '@vercel/speed-insights/vue';
+</script>
+
+<template>
+  <SpeedInsights />
+</template>
+```
+
+**JavaScript version (src/App.vue):**
+```vue
+<script setup>
+import { SpeedInsights } from '@vercel/speed-insights/vue';
+</script>
+
+<template>
+  <SpeedInsights />
+</template>
+```
+
+### For Nuxt
+
+The `SpeedInsights` component is a wrapper around the tracking script, offering more seamless integration with Nuxt.
+
+Add the following component to the default layout.
+
+**TypeScript version (layouts/default.vue):**
+```vue
+<script setup lang="ts">
+import { SpeedInsights } from '@vercel/speed-insights/vue';
+</script>
+
+<template>
+  <SpeedInsights />
+</template>
+```
+
+**JavaScript version (layouts/default.vue):**
+```vue
+<script setup>
+import { SpeedInsights } from '@vercel/speed-insights/vue';
+</script>
+
+<template>
+  <SpeedInsights />
+</template>
+```
+
+### For Other Frameworks
+
+Import the `injectSpeedInsights` function from the package, which will add the tracking script to your app. **This should only be called once in your app, and must run in the client**.
+
+Add the following code to your main app file:
+
+**TypeScript version (main.ts):**
+```ts
+import { injectSpeedInsights } from "@vercel/speed-insights";
+
+injectSpeedInsights();
+```
+
+**JavaScript version (main.js):**
+```js
+import { injectSpeedInsights } from "@vercel/speed-insights";
+
+injectSpeedInsights();
+```
+
+### For Astro
+
+Speed Insights is available for both static and SSR Astro apps.
+
+To enable this feature, declare the `<SpeedInsights />` component from `@vercel/speed-insights/astro` near the bottom of one of your layout components, such as `BaseHead.astro`:
+
+**TypeScript/JSX version (BaseHead.astro):**
+```astro
+---
+import SpeedInsights from '@vercel/speed-insights/astro';
+const { title, description } = Astro.props;
+---
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<SpeedInsights />
+```
+
+**JavaScript/JSX version (BaseHead.astro):**
+```astro
+---
+import SpeedInsights from '@vercel/speed-insights/astro';
+const { title, description } = Astro.props;
+---
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<SpeedInsights />
+```
+
+#### Optional: Remove sensitive information from URLs
+
+Optionally, you can remove sensitive information from the URL by adding a `speedInsightsBeforeSend` function to the global `window` object. The `<SpeedInsights />` component will call this method before sending any data to Vercel:
+
+**TypeScript/JSX version (BaseHead.astro):**
+```astro
+---
+import SpeedInsights from '@vercel/speed-insights/astro';
+const { title, description } = Astro.props;
+---
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<script is:inline>
+  function speedInsightsBeforeSend(data){
+    console.log("Speed Insights before send", data)
+    return data;
+  }
+</script>
+<SpeedInsights />
+```
+
+**JavaScript/JSX version (BaseHead.astro):**
+```astro
+---
+import SpeedInsights from '@vercel/speed-insights/astro';
+const { title, description } = Astro.props;
+---
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<script is:inline>
+  function speedInsightsBeforeSend(data){
+    console.log("Speed Insights before send", data)
+    return data;
+  }
+</script>
+<SpeedInsights />
+```
+
+Learn more about [`beforeSend`](/docs/speed-insights/package#beforesend).
+
+## Deploy your app to Vercel
+
+You can deploy your app to Vercel's global [CDN](/docs/cdn) by running the following command from your terminal:
+
+```bash
+vercel deploy
+```
+
+Alternatively, you can [connect your project's git repository](/docs/git#deploying-a-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.
+
+> **💡 Note:** 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.
+
+## 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](/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](/docs/speed-insights/using-speed-insights).
+
+Learn more about how Vercel supports [privacy and data compliance standards](/docs/speed-insights/privacy-policy) with Vercel Speed Insights.
+
+## Next steps
+
+Now that you have Vercel Speed Insights set up, you can explore the following topics to learn more:
+
+- [Learn how to use the `@vercel/speed-insights` package](/docs/speed-insights/package)
+- [Learn about metrics](/docs/speed-insights/metrics)
+- [Read about privacy and compliance](/docs/speed-insights/privacy-policy)
+- [Explore pricing](/docs/speed-insights/limits-and-pricing)
+- [Troubleshooting](/docs/speed-insights/troubleshooting)