From 2882356550ca3a0868176bd66565d13aa3b2adef Mon Sep 17 00:00:00 2001 From: Vercel Date: Thu, 3 Sep 2026 23:02:08 +0000 Subject: [PATCH] Add Vercel Speed Insights to project MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Vercel Speed Insights Implementation ## Summary Successfully installed and configured Vercel Speed Insights for the AnimeTV project following the latest official documentation from Vercel. ## What Was Implemented ### 1. Package Installation - Installed `@vercel/speed-insights` version 2.0.0 via npm - Updated `package.json` with the new dependency - Generated new `package-lock.json` with the Speed Insights package and its dependencies ### 2. Speed Insights Initialization Script Created `js/speed-insights.js` - a vanilla JavaScript initialization script that: - Initializes the Speed Insights queue (`window.si` and `window.siq`) - Dynamically loads the Vercel Speed Insights script from `/_vercel/speed-insights/script.js` - Adds proper SDK metadata (name and version) - Includes error handling for script loading failures - Runs on DOM ready to ensure proper initialization ### 3. HTML Integration Modified both web and Android HTML files to include the Speed Insights script: - Added `` to `index.html` - Added the same script tag to `android/app/src/main/assets/index.html` - Positioned the script early in the head section for optimal loading ### 4. Android Assets - Created `android/app/src/main/assets/js/` directory - Copied `speed-insights.js` to Android assets to maintain mirror sync ## Files Created - `/js/speed-insights.js` - Speed Insights initialization script - `/android/app/src/main/assets/js/speed-insights.js` - Android mirror copy ## Files Modified - `/index.html` - Added Speed Insights script tag - `/android/app/src/main/assets/index.html` - Added Speed Insights script tag - `/package.json` - Added @vercel/speed-insights dependency - `/package-lock.json` - Updated with new dependency tree ## Implementation Approach This is a vanilla JavaScript/HTML project (not React, Next.js, or other frameworks), so I used the generic Speed Insights implementation approach: 1. Created a self-contained initialization script that follows Vercel's recommended pattern 2. The script initializes the Speed Insights queue before the main script loads 3. Dynamically injects the Vercel Speed Insights script tag with proper configuration 4. Uses the default Vercel endpoint `/_vercel/speed-insights/script.js` which is automatically available on Vercel deployments ## Verification Steps Completed ✅ Package successfully installed with npm ✅ Build completed successfully (`npm run vercel-build`) ✅ All syntax checks passed (`npm run check`) ✅ All tests passed (metadata, seasons, loading tests) ✅ Mirror sync validated (Android assets match web assets) ✅ Built files contain the Speed Insights script in dist/ directory ## How It Works Once deployed to Vercel: 1. The browser loads `js/speed-insights.js` with the defer attribute 2. The script initializes the Speed Insights queue 3. The script dynamically injects the Vercel Speed Insights tracking script 4. Vercel's deployment automatically provides the tracking endpoint at `/_vercel/speed-insights/script.js` 5. Performance metrics (Core Web Vitals) are automatically collected and sent to Vercel's Speed Insights dashboard ## Notes - The Speed Insights script is loaded with `defer` to avoid blocking page rendering - The implementation follows Vercel's official documentation (fetched from https://vercel.com/docs/speed-insights/quickstart) - No configuration is needed - Speed Insights will automatically start collecting data once deployed to Vercel - The script gracefully handles errors if content blockers prevent loading - The implementation maintains compatibility with the project's existing asset versioning system (?v=645) Co-authored-by: Vercel --- android/app/src/main/assets/index.html | 1 + .../app/src/main/assets/js/speed-insights.js | 48 ++++++++++ index.html | 1 + js/speed-insights.js | 48 ++++++++++ package-lock.json | 87 +++++++++---------- package.json | 1 + 6 files changed, 138 insertions(+), 48 deletions(-) create mode 100644 android/app/src/main/assets/js/speed-insights.js create mode 100644 js/speed-insights.js diff --git a/android/app/src/main/assets/index.html b/android/app/src/main/assets/index.html index f5ae460..3b59afd 100644 --- a/android/app/src/main/assets/index.html +++ b/android/app/src/main/assets/index.html @@ -69,6 +69,7 @@ + diff --git a/android/app/src/main/assets/js/speed-insights.js b/android/app/src/main/assets/js/speed-insights.js new file mode 100644 index 0000000..66da5dc --- /dev/null +++ b/android/app/src/main/assets/js/speed-insights.js @@ -0,0 +1,48 @@ +// Vercel Speed Insights initialization +// This script loads and initializes Vercel Speed Insights for performance monitoring + +(function() { + 'use strict'; + + // Initialize the Speed Insights queue + window.si = window.si || function() { + (window.siq = window.siq || []).push(arguments); + }; + + // Load the Speed Insights script + function loadSpeedInsights() { + // Check if we're in a browser environment + if (typeof window === 'undefined') return; + + // Check if script is already loaded + const scriptSrc = '/_vercel/speed-insights/script.js'; + if (document.head.querySelector(`script[src*="${scriptSrc}"]`)) { + return; + } + + // Create and inject the script + const script = document.createElement('script'); + script.src = scriptSrc; + script.defer = true; + + // Add SDK metadata + script.dataset.sdkn = '@vercel/speed-insights'; + script.dataset.sdkv = '2.0.0'; + + script.onerror = function() { + console.log( + '[Vercel Speed Insights] Failed to load script from ' + scriptSrc + '. ' + + 'Please check if any content blockers are enabled and try again.' + ); + }; + + document.head.appendChild(script); + } + + // Load on DOM ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', loadSpeedInsights); + } else { + loadSpeedInsights(); + } +})(); diff --git a/index.html b/index.html index f5ae460..3b59afd 100644 --- a/index.html +++ b/index.html @@ -69,6 +69,7 @@ + diff --git a/js/speed-insights.js b/js/speed-insights.js new file mode 100644 index 0000000..66da5dc --- /dev/null +++ b/js/speed-insights.js @@ -0,0 +1,48 @@ +// Vercel Speed Insights initialization +// This script loads and initializes Vercel Speed Insights for performance monitoring + +(function() { + 'use strict'; + + // Initialize the Speed Insights queue + window.si = window.si || function() { + (window.siq = window.siq || []).push(arguments); + }; + + // Load the Speed Insights script + function loadSpeedInsights() { + // Check if we're in a browser environment + if (typeof window === 'undefined') return; + + // Check if script is already loaded + const scriptSrc = '/_vercel/speed-insights/script.js'; + if (document.head.querySelector(`script[src*="${scriptSrc}"]`)) { + return; + } + + // Create and inject the script + const script = document.createElement('script'); + script.src = scriptSrc; + script.defer = true; + + // Add SDK metadata + script.dataset.sdkn = '@vercel/speed-insights'; + script.dataset.sdkv = '2.0.0'; + + script.onerror = function() { + console.log( + '[Vercel Speed Insights] Failed to load script from ' + scriptSrc + '. ' + + 'Please check if any content blockers are enabled and try again.' + ); + }; + + document.head.appendChild(script); + } + + // Load on DOM ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', loadSpeedInsights); + } else { + loadSpeedInsights(); + } +})(); diff --git a/package-lock.json b/package-lock.json index 9e4c209..042a969 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@supabase/ssr": "^0.12.0", "@supabase/supabase-js": "^2.108.1", + "@vercel/speed-insights": "^2.0.0", "hls.js": "^1.6.16", "sharp": "0.35.2" }, @@ -143,9 +144,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -162,9 +160,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -181,9 +176,6 @@ "cpu": [ "ppc64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -200,9 +192,6 @@ "cpu": [ "riscv64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -219,9 +208,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -238,9 +224,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -257,9 +240,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -276,9 +256,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -295,9 +272,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -320,9 +294,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -345,9 +316,6 @@ "cpu": [ "ppc64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -370,9 +338,6 @@ "cpu": [ "riscv64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -395,9 +360,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -420,9 +382,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -445,9 +404,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -470,9 +426,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -726,6 +679,44 @@ "node": ">=20.0.0" } }, + "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/acorn": { "version": "8.17.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz", diff --git a/package.json b/package.json index b483049..a412d77 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "dependencies": { "@supabase/ssr": "^0.12.0", "@supabase/supabase-js": "^2.108.1", + "@vercel/speed-insights": "^2.0.0", "hls.js": "^1.6.16", "sharp": "0.35.2" },