Add Vercel Speed Insights integration

[vercel]

Vercel Speed Insights Implementation

Successfully implemented Vercel Speed Insights for this FastAPI Python project.

Changes Made

Created Files:

1. package.json - Added npm package configuration to install @vercel/speed-insights

   • Installed version 1.1.0 of @vercel/speed-insights
   • Required for the Speed Insights JavaScript library

2. package-lock.json - Auto-generated lockfile for npm dependencies

   • Ensures consistent dependency versions across environments

Modified Files:

1. main.py - Added Speed Insights initialization scripts to the HTML response

   • Added initialization queue script: window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
   • Added Speed Insights script tag: <script defer src="/_vercel/speed-insights/script.js"></script>
   • Scripts are injected before the closing </body> tag for optimal loading
   • Follows the official Vercel documentation pattern for HTML/vanilla JavaScript applications

2. .gitignore - Updated to exclude node_modules directory

   • Added node_modules/ to prevent committing dependencies

Implementation Details

Since this is a FastAPI Python project that serves HTML (not a JavaScript framework like React or Next.js), I followed the HTML/vanilla JavaScript integration approach from the official Vercel Speed Insights documentation:

1. Fetched Latest Documentation: Retrieved the most up-to-date installation instructions from https://vercel.com/docs/speed-insights/quickstart

2. Framework-Specific Approach: Identified that for HTML-based applications, Speed Insights requires:

   • The initialization queue function to prepare for tracking
   • A deferred script tag that loads from /_vercel/speed-insights/script.js

3. Vercel Integration: When deployed on Vercel, the Speed Insights script is automatically made available at the /_vercel/speed-insights/script.js path, so no additional configuration is needed

Testing

• ✅ Verified Python syntax is valid (no syntax errors)
• ✅ Confirmed Speed Insights scripts are present in HTML output
• ✅ Tested all API endpoints still work correctly (/api/data, /api/items/{id}, /docs)
• ✅ Verified HTML structure remains valid (DOCTYPE, proper closing tags)
• ✅ Confirmed HTTP 200 responses for all routes

Next Steps

After deployment to Vercel:

1. Enable Speed Insights in the Vercel Dashboard for this project
2. Deploy the application using vercel deploy
3. After users visit the site, performance metrics will appear in the Speed Insights dashboard
4. Speed Insights automatically tracks Core Web Vitals and other performance metrics

Notes

• Speed Insights does NOT track data in development mode
• The tracking only activates when deployed on Vercel
• No additional environment variables or configuration required
• The integration follows best practices from the official Vercel documentation

---

View Project · Speed Insights

Created by zedrickriggins174-glitch with Vercel Agent

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
fastapi-python-boilerplate	Ready	Preview, Comment	Mar 31, 2026 11:46am