Install and configure Vercel Speed Insights

[vercel]

Vercel Speed Insights Implementation

Summary

Successfully installed and configured Vercel Speed Insights for this vanilla HTML/CSS/JavaScript portfolio project following the latest official documentation from https://vercel.com/docs/speed-insights/quickstart.

Changes Made

Created Files:

1. package.json - Initialized Node.js package configuration with @vercel/speed-insights dependency
2. package-lock.json - Lockfile for dependency management
3. speed-insights.js - Speed Insights initialization script that:
   • Initializes the Speed Insights queue (window.si)
   • Dynamically loads the Speed Insights script from /_vercel/speed-insights/script.js
   • Uses deferred loading for optimal performance

Modified Files:

All HTML files were updated to include the Speed Insights script before existing scripts:

1. index.html - Main portfolio page
2. datenschutz/index.html - Privacy policy page
3. drakentype/index.html - Drakentype project page
4. drakenveil/index.html - Drakenveil project page
5. impressum/index.html - Legal notice page
6. portfolio/index.html - Portfolio detail page
7. webgl/Drakentype/index.html - Unity WebGL build page

Implementation Details

Since this is a vanilla HTML/CSS/JavaScript project without a build system (no React, Next.js, Vue, etc.), I implemented Speed Insights using the recommended approach for non-framework projects:

1. Installed the package: @vercel/speed-insights@^2.0.0 via npm
2. Created inline script initialization: Following the documentation for HTML5/non-framework setups
3. Added script to all HTML pages: Ensures Speed Insights tracks performance across the entire site

The implementation uses the standard Vercel Speed Insights approach where:

• The script initializes the window.si function for queueing analytics events
• The actual Speed Insights script is loaded from /_vercel/speed-insights/script.js (created by Vercel after deployment)
• Script loading is deferred for optimal page performance

How It Works

When deployed to Vercel:

1. Vercel automatically creates the /_vercel/speed-insights/script.js endpoint
2. The speed-insights.js file loads this script dynamically
3. Speed Insights begins collecting Core Web Vitals and performance metrics
4. Data is sent to Vercel's Speed Insights dashboard

Next Steps

After deployment:

1. Speed Insights will be active on all pages
2. Performance metrics will appear in the Vercel dashboard after user traffic
3. Metrics tracked include:
   • First Contentful Paint (FCP)
   • Largest Contentful Paint (LCP)
   • First Input Delay (FID)
   • Cumulative Layout Shift (CLS)
   • Time to First Byte (TTFB)
   • Interaction to Next Paint (INP)

Notes

• The implementation follows Vercel's official documentation (fetched May 4, 2026)
• All HTML files consistently load the script before other JavaScript files
• The script uses deferred loading to avoid blocking page rendering
• Package is properly tracked in package.json with lockfile for consistent dependency resolution
• No build process changes required - the project remains a vanilla HTML/CSS/JS site

---

View Project · Speed Insights

Created by w6fsqc62z2-8935 with Vercel Agent

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
portfolio	Ready	Preview, Comment	May 4, 2026 9:10am