Add Vercel Speed Insights to your project

[vercel]

Implemented Vercel Speed Insights integration for the Rareness project.

Summary

Successfully integrated Vercel Speed Insights into the Rareness web application, a Vite-based vanilla JavaScript project that displays League of Legends skin collections.

Changes Made

Created/Modified Files:

1. web/package.json - Added @vercel/speed-insights dependency

   • Added @vercel/speed-insights (^1.3.1) to dependencies
   • No breaking changes to existing dependencies

2. web/src/main.js - Integrated Speed Insights initialization

   • Imported injectSpeedInsights function from '@vercel/speed-insights'
   • Called injectSpeedInsights() early in the application startup (before DOMContentLoaded)
   • This ensures performance tracking begins as early as possible in the page lifecycle

Implementation Details

The integration follows the documentation for "other" frameworks (vanilla JS/Vite). The approach used:

• Method: Client-side injection using injectSpeedInsights() function
• Timing: Injected at the top of main.js to capture performance metrics from the earliest point possible
• Placement: Called before the DOMContentLoaded event listener, ensuring Speed Insights tracks the full page load performance

Metrics Tracked

Once deployed to Vercel, Speed Insights will automatically track:

• Largest Contentful Paint (LCP) - When the largest content element is visible
• Cumulative Layout Shift (CLS) - Visual stability during page load
• First Input Delay (FID) - Responsiveness to user interactions
• Time to First Byte (TTFB) - Server response time
• First Contentful Paint (FCP) - When first content appears

Build & Testing Results

✅ Build successful: npm run build produces optimized production bundle
✅ No linting errors introduced by changes
✅ No breaking changes to existing functionality
✅ Package.json properly updated with lock file

Next Steps for Deployment

1. Enable Speed Insights in Vercel dashboard for this project
2. Deploy to Vercel (via vercel deploy or git push to connected repository)
3. After deployment, Speed Insights will automatically:
   • Inject tracking endpoint at /_vercel/speed-insights/script.js
   • Collect Web Vitals data from real user sessions
   • Display metrics in Vercel dashboard under the Speed Insights tab

Technical Notes

• The injectSpeedInsights() function is called only once in the app, as required
• It runs on the client-side and is essential for capturing real user performance data
• Works with both static and server-rendered content
• Zero performance overhead when Speed Insights is not enabled on the Vercel project
• Compatible with the existing performance monitoring code already in index.html (audit metrics for development purposes)

Files Modified

• web/package.json (added dependency)
• web/package-lock.json (updated lock file)
• web/src/main.js (added Speed Insights integration)

All changes preserve the existing code structure and follow best practices for integrating Speed Insights with vanilla JavaScript applications on Vite.

---

View Project · Speed Insights

Created by juguk with Vercel Agent

[vercel]

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

Project	Deployment	Review	Updated (UTC)
rareness	Error		Jan 13, 2026 5:49am