From b3b7387eb4b3c51844c337d1db041de5fc261211 Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Fri, 23 Jan 2026 21:09:18 +0000
Subject: [PATCH] Enable Vercel Speed Insights for your project

# Vade Implementation Report

## Summary

Successfully implemented the Speed Insights guide documentation as requested. The content has been added to the celltek Documentation repository as a new documentation page.

## Changes Made

### Created Files:
1. **speed_insights_guide.md** - Complete guide for getting started with Vercel Speed Insights
   - Comprehensive prerequisites section
   - Framework-specific implementation instructions for:
     - Next.js (Pages Router and App Router)
     - Create React App
     - Remix
     - SvelteKit
     - HTML (vanilla)
     - Vue
     - Nuxt
     - Other frameworks
     - Astro
   - Deployment instructions
   - Dashboard viewing instructions
   - Next steps and related documentation links

### Modified Files:
1. **_sidebar.md** - Updated sidebar navigation to include the new Speed Insights Guide
   - Added "Speed Insights Guide" link under "Getting started" section

## Implementation Details

The Speed Insights guide was converted from the provided content into standard Markdown format compatible with Docsify. Key adaptations include:

1. Removed custom `<CodeBlock>` and `<Code>` components, replacing them with standard Markdown code blocks organized by package manager
2. Converted framework-specific conditional content into clearly labeled sections
3. Maintained all technical details, code examples, and instructions
4. Preserved both TypeScript and JavaScript examples for each framework
5. Kept all important notes and links to related documentation

## Technical Notes

- This is a static Docsify-based documentation site with no build process
- No package dependencies required (no package.json)
- No compilation or build steps needed
- Changes are immediately visible when the site is served

## Testing

The documentation can be tested by:
1. Serving the site with Docsify: `docsify serve .`
2. Navigating to the "Speed Insights Guide" link in the sidebar
3. Verifying all sections and code examples render correctly

## Files Staged for Commit

- speed_insights_guide.md (new file)
- _sidebar.md (modified)
- .vade-report (this file)

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
---
 _sidebar.md             |   1 +
 speed_insights_guide.md | 563 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 564 insertions(+)
 create mode 100644 speed_insights_guide.md

diff --git a/_sidebar.md b/_sidebar.md
index a2bc911..9f83475 100644
--- a/_sidebar.md
+++ b/_sidebar.md
@@ -2,6 +2,7 @@
 
 - Getting started
   - [Quick start]()
+  - [Speed Insights Guide](speed_insights_guide.md)
 
 - Troubleshooting
   - [Extensions](ts_extensions.md)
diff --git a/speed_insights_guide.md b/speed_insights_guide.md
new file mode 100644
index 0000000..99f3eb9
--- /dev/null
+++ b/speed_insights_guide.md
@@ -0,0 +1,563 @@
+# 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:
+  
+  **pnpm:**
+  ```bash
+  pnpm i vercel
+  ```
+  
+  **yarn:**
+  ```bash
+  yarn i vercel
+  ```
+  
+  **npm:**
+  ```bash
+  npm i vercel
+  ```
+  
+  **bun:**
+  ```bash
+  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
+
+Using the package manager of your choice, add the `@vercel/speed-insights` package to your project:
+
+**pnpm:**
+```bash
+pnpm i @vercel/speed-insights
+```
+
+**yarn:**
+```bash
+yarn i @vercel/speed-insights
+```
+
+**npm:**
+```bash
+npm i @vercel/speed-insights
+```
+
+**bun:**
+```bash
+bun i @vercel/speed-insights
+```
+
+> **💡 Note:** When using the HTML implementation, there is no need to install the `@vercel/speed-insights` package.
+
+## Framework-Specific Implementation
+
+### 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:**
+```ts
+// pages/_app.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:**
+```js
+// pages/_app.jsx
+import { SpeedInsights } from "@vercel/speed-insights/next";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <Component {...pageProps} />
+      <SpeedInsights />
+    </>
+  );
+}
+
+export default MyApp;
+```
+
+For versions of Next.js older than 13.5, import the `<SpeedInsights>` component from `@vercel/speed-insights/react`. Then pass it the pathname of the route:
+
+**TypeScript:**
+```tsx
+// pages/example-component.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:**
+```jsx
+// pages/example-component.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} />;
+}
+```
+
+### 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:**
+```tsx
+// 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>
+  );
+}
+```
+
+**JavaScript:**
+```jsx
+// app/layout.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 versions of Next.js older than 13.5, import the `<SpeedInsights>` component from `@vercel/speed-insights/react`.
+
+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:**
+```tsx
+// app/insights.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:**
+```jsx
+// app/insights.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:**
+```tsx
+// app/layout.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:**
+```jsx
+// app/layout.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>
+  );
+}
+```
+
+### 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:**
+```ts
+// App.tsx
+import { SpeedInsights } from '@vercel/speed-insights/react';
+
+export default function App() {
+  return (
+    <div>
+      {/* ... */}
+      <SpeedInsights />
+    </div>
+  );
+}
+```
+
+**JavaScript:**
+```js
+// App.jsx
+import { SpeedInsights } from "@vercel/speed-insights/react";
+
+export default function App() {
+  return (
+    <div>
+      {/* ... */}
+      <SpeedInsights />
+    </div>
+  );
+}
+```
+
+### 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:**
+```ts
+// app/root.tsx
+import { SpeedInsights } from '@vercel/speed-insights/remix';
+
+export default function App() {
+  return (
+    <html lang="en">
+      <body>
+        {/* ... */}
+        <SpeedInsights />
+      </body>
+    </html>
+  );
+}
+```
+
+**JavaScript:**
+```js
+// app/root.jsx
+import { SpeedInsights } from "@vercel/speed-insights/remix";
+
+export default function App() {
+  return (
+    <html lang="en">
+      <body>
+        {/* ... */}
+        <SpeedInsights />
+      </body>
+    </html>
+  );
+}
+```
+
+### SvelteKit
+
+Add the following component to your root file:
+
+**TypeScript:**
+```ts
+// src/routes/+layout.ts
+import { injectSpeedInsights } from "@vercel/speed-insights/sveltekit";
+
+injectSpeedInsights();
+```
+
+**JavaScript:**
+```js
+// src/routes/+layout.js
+import { injectSpeedInsights } from "@vercel/speed-insights/sveltekit";
+
+injectSpeedInsights();
+```
+
+### HTML
+
+Add the following scripts before the closing tag of the `<body>`:
+
+```html
+<!-- index.html -->
+<script>
+  window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
+</script>
+<script defer src="/_vercel/speed-insights/script.js"></script>
+```
+
+### 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:**
+```vue
+<!-- src/App.vue -->
+<script setup lang="ts">
+import { SpeedInsights } from '@vercel/speed-insights/vue';
+</script>
+
+<template>
+  <SpeedInsights />
+</template>
+```
+
+**JavaScript:**
+```vue
+<!-- src/App.vue -->
+<script setup>
+import { SpeedInsights } from '@vercel/speed-insights/vue';
+</script>
+
+<template>
+  <SpeedInsights />
+</template>
+```
+
+### 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:**
+```vue
+<!-- layouts/default.vue -->
+<script setup lang="ts">
+import { SpeedInsights } from '@vercel/speed-insights/vue';
+</script>
+
+<template>
+  <SpeedInsights />
+</template>
+```
+
+**JavaScript:**
+```vue
+<!-- layouts/default.vue -->
+<script setup>
+import { SpeedInsights } from '@vercel/speed-insights/vue';
+</script>
+
+<template>
+  <SpeedInsights />
+</template>
+```
+
+### 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:**
+```ts
+// main.ts
+import { injectSpeedInsights } from "@vercel/speed-insights";
+
+injectSpeedInsights();
+```
+
+**JavaScript:**
+```js
+// main.js
+import { injectSpeedInsights } from "@vercel/speed-insights";
+
+injectSpeedInsights();
+```
+
+### Astro
+
+Speed Insights is available for both [static](/docs/frameworks/astro#static-rendering) and [SSR](/docs/frameworks/astro#server-side-rendering) 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:**
+```tsx
+---
+// BaseHead.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
+---
+// BaseHead.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 />
+```
+
+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:**
+```tsx
+---
+// BaseHead.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
+---
+// BaseHead.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)