From b42debb9224b78821ceafd967b18ddcdb5b7c221 Mon Sep 17 00:00:00 2001 From: Vercel Date: Fri, 15 May 2026 09:32:11 +0000 Subject: [PATCH] Install Vercel Speed Insights MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Vercel Speed Insights Installation Successfully installed and configured Vercel Speed Insights for this project. ### What was implemented: 1. **Package Installation** - Installed `@vercel/speed-insights@2.0.0` package via npm - Updated `package.json` to include the dependency - Updated `package-lock.json` with the new package and its dependencies 2. **Code Integration** - Added Speed Insights initialization script to `index.html` - Used the vanilla JavaScript/static site approach as documented in the official Vercel Speed Insights quickstart guide - Added the tracking script reference to `/_vercel/speed-insights/script.js` which will be automatically served by Vercel when deployed ### Implementation Details: **Framework Identified:** Static HTML/Vanilla JavaScript Following the official Vercel documentation for vanilla JavaScript/static sites, I added two script tags to the `` section of `index.html`: 1. An inline script that initializes the Speed Insights queue (`window.si` and `window.siq`) 2. A deferred script tag that loads the Speed Insights tracking script from `/_vercel/speed-insights/script.js` This approach allows the Speed Insights library to track Web Vitals and other performance metrics once the site is deployed to Vercel. ### Files Modified: - `index.html` - Added Speed Insights initialization and script loading - `package.json` - Added `@vercel/speed-insights` dependency - `package-lock.json` - Updated with new dependency information ### Testing Performed: - ✅ Ran `npm run verify:files` - Passed (80 required files verified) - ✅ Ran `npm run smoke:static` - Passed (4 local asset references and 17 storefront markers verified) - ✅ Verified Speed Insights script tag is present in served HTML - ✅ Confirmed no syntax errors in JavaScript assets ### Next Steps: Once deployed to Vercel with Speed Insights enabled in the dashboard: 1. The `/_vercel/speed-insights/script.js` route will be automatically available 2. Performance metrics will start being collected from real user visits 3. Data will be visible in the Vercel Speed Insights dashboard ### Notes: - Speed Insights does not track data in development mode (when running locally) - The tracking script is loaded with `defer` to not block page rendering - No additional configuration is required for basic functionality - The implementation follows the official Vercel documentation fetched from https://vercel.com/docs/speed-insights/quickstart Co-authored-by: Vercel --- index.html | 5 +++++ package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 45 insertions(+) diff --git a/index.html b/index.html index 5244b83..8aed8c5 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,11 @@ + + +
diff --git a/package-lock.json b/package-lock.json index 66d9b08..25e218d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,48 @@ "name": "forma-storefront", "version": "1.0.0", "dependencies": { + "@vercel/speed-insights": "^2.0.0", "stripe": "^22.1.1" } }, + "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/stripe": { "version": "22.1.1", "resolved": "https://registry.npmjs.org/stripe/-/stripe-22.1.1.tgz", diff --git a/package.json b/package.json index fdf99ba..d3f5797 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ ], "packageManager": "npm@11.4.2", "dependencies": { + "@vercel/speed-insights": "^2.0.0", "stripe": "^22.1.1" } }