From 26c2366e278cc3701fcf6ab4f80ac0778dfc0f9a Mon Sep 17 00:00:00 2001 From: Vercel Date: Sun, 24 May 2026 20:59:14 +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 the AnimeTV project. ### Changes Made: #### 1. Package Installation - **File**: `package.json` - **Change**: Added `@vercel/speed-insights` version 2.0.0 as a dependency - **Method**: Used pnpm (the project's package manager) #### 2. Speed Insights Script - **File**: `speed-insights.js` (NEW) - **Purpose**: Browser-compatible script that initializes Vercel Speed Insights - **Implementation**: - Creates the Speed Insights queue (window.si) - Dynamically loads the Vercel Speed Insights script from `/_vercel/speed-insights/script.js` - Handles errors gracefully for local development (Vercel endpoints are only available in production) - Adds SDK metadata (name and version) to the script tag - Defers script loading for optimal performance #### 3. HTML Integration - **File**: `index.html` - **Change**: Added `` before closing body tag - **Position**: Placed after app.js to ensure Speed Insights loads after the main application #### 4. Lock File Update - **File**: `pnpm-lock.yaml` - **Change**: Updated to reflect the new @vercel/speed-insights dependency ### Implementation Details: The project is a vanilla JavaScript/HTML application without a build system. Following the official Vercel Speed Insights documentation (fetched from https://vercel.com/docs/speed-insights/quickstart), I implemented the script tag approach suitable for vanilla JS projects. The Speed Insights script will: - Automatically track page load performance metrics - Send data to Vercel's analytics endpoint when deployed on Vercel - Gracefully handle errors in local development (where Vercel endpoints aren't available) ### Testing Performed: 1. ✅ Verified syntax with `node --check` on server.js, app.js, and speed-insights.js 2. ✅ Ran `npm run check` script successfully 3. ✅ Started the server to ensure no runtime errors 4. ✅ Confirmed package.json and pnpm-lock.yaml were properly updated ### Next Steps: 1. Deploy the application to Vercel 2. Enable Speed Insights in the Vercel dashboard (if not already enabled) 3. Navigate to the Speed Insights tab to view performance metrics after deployment ### Notes: - The Speed Insights script will only collect data when deployed to Vercel's infrastructure - In local development, you may see a console warning about the script failing to load, which is expected - No additional configuration is needed; the default settings will work out of the box - Performance metrics will be visible in the Vercel dashboard under the Speed Insights section Co-authored-by: Vercel --- index.html | 1 + package.json | 3 +++ pnpm-lock.yaml | 38 ++++++++++++++++++++++++++++++++++- speed-insights.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 speed-insights.js diff --git a/index.html b/index.html index 896ef48..6f178f0 100644 --- a/index.html +++ b/index.html @@ -249,5 +249,6 @@

Title

+ diff --git a/package.json b/package.json index 3a5bfd0..91d44df 100644 --- a/package.json +++ b/package.json @@ -21,5 +21,8 @@ "license": "MIT", "engines": { "node": ">=18.0.0" + }, + "dependencies": { + "@vercel/speed-insights": "^2.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9b60ae1..78fcc3c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,4 +6,40 @@ settings: importers: - .: {} + .: + dependencies: + '@vercel/speed-insights': + specifier: ^2.0.0 + version: 2.0.0 + +packages: + + '@vercel/speed-insights@2.0.0': + resolution: {integrity: sha512-jwkNcrTeafWxjmWq4AHBaptSqZiJkYU5adLC9QBSqeim0GcqDMgN5Ievh8OG1rJ6W3A4l1oiP7qr9CWxGuzu3w==} + 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 + +snapshots: + + '@vercel/speed-insights@2.0.0': {} diff --git a/speed-insights.js b/speed-insights.js new file mode 100644 index 0000000..5ae9592 --- /dev/null +++ b/speed-insights.js @@ -0,0 +1,50 @@ +/** + * Vercel Speed Insights Integration + * + * Initializes Vercel Speed Insights for performance monitoring. + * This script is loaded after the main app initialization. + */ + +(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 script is already loaded + const existingScript = document.querySelector('script[src*="speed-insights"]'); + if (existingScript) { + return; + } + + // Create script element + const script = document.createElement('script'); + + // Use the Vercel-hosted script + script.src = '/_vercel/speed-insights/script.js'; + script.defer = true; + + // Add SDK information + script.dataset.sdkn = '@vercel/speed-insights'; + script.dataset.sdkv = '2.0.0'; + + // Handle load errors + script.onerror = function() { + console.warn('[Vercel Speed Insights] Failed to load script. This is expected in local development.'); + }; + + // Append to document head + document.head.appendChild(script); + } + + // Load when DOM is ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', loadSpeedInsights); + } else { + loadSpeedInsights(); + } +})();