From 0143bfde71a7cdeb1f748ca88fb9181671bd82a6 Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Tue, 19 May 2026 16:32:23 +0000
Subject: [PATCH] Install Vercel Speed Insights

# Vercel Speed Insights Integration

Successfully installed and configured Vercel Speed Insights for this static HTML project.

## Changes Made

### 1. Package Installation
- **Modified**: `package.json`
  - Added `@vercel/speed-insights` version `^2.0.0` as a dependency

- **Modified**: `package-lock.json`
  - Updated with `@vercel/speed-insights` package and its dependencies

### 2. Speed Insights Integration
- **Modified**: `index.html`
  - Added Speed Insights initialization script before the closing `</body>` tag
  - Implemented the queue-based approach recommended for static sites
  - Added two script tags:
    1. Initialization script that sets up the `window.si` function and queue
    2. Deferred loading of the Speed Insights script from `/_vercel/speed-insights/script.js`

## Implementation Details

This project is a vanilla HTML/CSS/JavaScript static site without a build process. Following the official Vercel documentation for static sites, I implemented the queue-based initialization pattern:

```html
<!-- Vercel Speed Insights -->
<script>
  window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
</script>
<script defer src="/_vercel/speed-insights/script.js"></script>
```

This approach:
- Works seamlessly when deployed to Vercel
- Uses the `defer` attribute for optimal performance
- Queues events before the script loads to prevent data loss
- Automatically starts tracking web vitals and performance metrics

## Next Steps

To complete the setup:
1. Deploy the project to Vercel (the Speed Insights script will be automatically served)
2. Enable Speed Insights in the Vercel dashboard for this project
3. After deployment and user visits, view performance data in the Speed Insights dashboard

## Notes

- The Speed Insights integration follows Vercel's official quickstart documentation
- The `/_vercel/speed-insights/script.js` path is automatically handled by Vercel's platform
- No additional configuration is required for basic functionality
- The integration preserves all existing code structure and functionality

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
---
 index.html        |  7 +++++++
 package-lock.json | 43 +++++++++++++++++++++++++++++++++++++++++--
 package.json      |  3 ++-
 3 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index b15dd56..777fda9 100644
--- a/index.html
+++ b/index.html
@@ -1725,5 +1725,12 @@ <h3 class="admin-form-title" id="admin-form-title">Add New Portrait</h3>
   }
 });
 </script>
+
+<!-- Vercel Speed Insights -->
+<script>
+  window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
+</script>
+<script defer src="/_vercel/speed-insights/script.js"></script>
+
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index 4c4d43b..f54032d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,12 @@
 {
-  "name": "Dee Portraits",
+  "name": "primary",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "dependencies": {
-        "@vercel/analytics": "^2.0.1"
+        "@vercel/analytics": "^2.0.1",
+        "@vercel/speed-insights": "^2.0.0"
       }
     },
     "node_modules/@vercel/analytics": {
@@ -49,6 +50,44 @@
           "optional": true
         }
       }
+    },
+    "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
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 8d740e3..2d03dfe 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "@vercel/analytics": "^2.0.1"
+    "@vercel/analytics": "^2.0.1",
+    "@vercel/speed-insights": "^2.0.0"
   }
 }