From aaa77970785c77f49a013f5e134d724468a546b3 Mon Sep 17 00:00:00 2001 From: Vercel Date: Tue, 7 Apr 2026 11:52:06 +0000 Subject: [PATCH] Install and configure Vercel Speed Insights MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Vercel Speed Insights Installation - Implementation Report ### Overview Successfully installed and configured Vercel Speed Insights for the Astro blog project. ### Changes Implemented #### 1. Package Installation - Installed `@vercel/speed-insights` v2.0.0 via npm - Package added to dependencies in `package.json` - Lock file (`package-lock.json`) updated with new dependency tree #### 2. Code Integration **Modified File:** `src/layouts/Layout.astro` - Added import statement: `import SpeedInsights from '@vercel/speed-insights/astro';` - Placed `` component at the beginning of the `` tag - This ensures Speed Insights is active on all pages that use the Layout component ### Implementation Details Following the official Vercel Speed Insights documentation (fetched from https://vercel.com/docs/speed-insights/quickstart), I: 1. Retrieved the latest installation instructions from the official docs 2. Identified this as an Astro project by examining `astro.config.mjs` and `package.json` 3. Installed the `@vercel/speed-insights` package using npm (the project's package manager) 4. Integrated the Astro-specific Speed Insights component using default import syntax 5. Verified the build completes successfully with no errors ### Framework-Specific Notes - Astro uses a default export for the SpeedInsights component (not a named export) - The component is imported from `@vercel/speed-insights/astro` - The component automatically handles: - Route detection based on `Astro.url.pathname` - Parameter extraction from `Astro.params` - Environment variable configuration for Vercel observability - Only tracks in production (not in development mode) ### Verification ✅ Build completed successfully: `npm run build` ✅ Package.json updated with new dependency ✅ Lock file updated (package-lock.json) ✅ Component integrated into main layout ✅ All existing functionality preserved ### Next Steps for Deployment To enable Speed Insights on Vercel: 1. Push these changes to the repository 2. Deploy to Vercel (or the next deployment will pick up the changes) 3. Enable Speed Insights in the Vercel Dashboard (Project Settings → Speed Insights → Enable) 4. After deployment and user visits, performance metrics will be available in the Vercel dashboard ### Files Modified - `package.json` - Added @vercel/speed-insights dependency - `package-lock.json` - Updated lock file with dependency tree - `src/layouts/Layout.astro` - Added SpeedInsights component import and usage Co-authored-by: Vercel --- package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/layouts/Layout.astro | 3 +++ 3 files changed, 43 insertions(+) diff --git a/package-lock.json b/package-lock.json index e5d4a33..868ca21 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@astrojs/tailwind": "^5.1.3", "@astrojs/vercel": "^8.0.0", "@tailwindcss/typography": "^0.5.19", + "@vercel/speed-insights": "^2.0.0", "astro": "^5.0.0", "tailwindcss": "^3.4.0" } @@ -1907,6 +1908,44 @@ "ajv": "^6.12.3" } }, + "node_modules/@vercel/speed-insights": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-2.0.0.tgz", + "integrity": "sha512-jwkNcrTeafWxjmWq4AHBaptSqZiJkYU5adLC9QBSqeim0GcqDMgN5Ievh8OG1rJ6W3A4l1oiP7qr9CWxGuzu3w==", + "license": "Apache-2.0", + "peerDependencies": { + "@sveltejs/kit": "^1 || ^2", + "next": ">= 13", + "nuxt": ">= 3", + "react": "^18 || ^19 || ^19.0.0-rc", + "svelte": ">= 4", + "vue": "^3", + "vue-router": "^4" + }, + "peerDependenciesMeta": { + "@sveltejs/kit": { + "optional": true + }, + "next": { + "optional": true + }, + "nuxt": { + "optional": true + }, + "react": { + "optional": true + }, + "svelte": { + "optional": true + }, + "vue": { + "optional": true + }, + "vue-router": { + "optional": true + } + } + }, "node_modules/abbrev": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.1.tgz", diff --git a/package.json b/package.json index a4a034a..aa7c140 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@astrojs/tailwind": "^5.1.3", "@astrojs/vercel": "^8.0.0", "@tailwindcss/typography": "^0.5.19", + "@vercel/speed-insights": "^2.0.0", "astro": "^5.0.0", "tailwindcss": "^3.4.0" } diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 48cc880..51373d1 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,4 +1,6 @@ --- +import SpeedInsights from '@vercel/speed-insights/astro'; + interface Props { title?: string; description?: string; @@ -52,6 +54,7 @@ const { +