Install Vercel Speed Insights#22
Merged
Merged
Conversation
## Vercel Speed Insights Installation Successfully installed and configured Vercel Speed Insights for this project. ### What was implemented: 1. **Package Installation** - Installed `@vercel/speed-insights@2.0.0` package via npm - Updated `package.json` to include the dependency - Updated `package-lock.json` with the new package and its dependencies 2. **Code Integration** - Added Speed Insights initialization script to `index.html` - Used the vanilla JavaScript/static site approach as documented in the official Vercel Speed Insights quickstart guide - Added the tracking script reference to `/_vercel/speed-insights/script.js` which will be automatically served by Vercel when deployed ### Implementation Details: **Framework Identified:** Static HTML/Vanilla JavaScript Following the official Vercel documentation for vanilla JavaScript/static sites, I added two script tags to the `<head>` section of `index.html`: 1. An inline script that initializes the Speed Insights queue (`window.si` and `window.siq`) 2. A deferred script tag that loads the Speed Insights tracking script from `/_vercel/speed-insights/script.js` This approach allows the Speed Insights library to track Web Vitals and other performance metrics once the site is deployed to Vercel. ### Files Modified: - `index.html` - Added Speed Insights initialization and script loading - `package.json` - Added `@vercel/speed-insights` dependency - `package-lock.json` - Updated with new dependency information ### Testing Performed: - ✅ Ran `npm run verify:files` - Passed (80 required files verified) - ✅ Ran `npm run smoke:static` - Passed (4 local asset references and 17 storefront markers verified) - ✅ Verified Speed Insights script tag is present in served HTML - ✅ Confirmed no syntax errors in JavaScript assets ### Next Steps: Once deployed to Vercel with Speed Insights enabled in the dashboard: 1. The `/_vercel/speed-insights/script.js` route will be automatically available 2. Performance metrics will start being collected from real user visits 3. Data will be visible in the Vercel Speed Insights dashboard ### Notes: - Speed Insights does not track data in development mode (when running locally) - The tracking script is loaded with `defer` to not block page rendering - No additional configuration is required for basic functionality - The implementation follows the official Vercel documentation fetched from https://vercel.com/docs/speed-insights/quickstart Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Contributor
Author
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Vercel Speed Insights Installation
Successfully installed and configured Vercel Speed Insights for this project.
What was implemented:
Package Installation
@vercel/speed-insights@2.0.0package via npmpackage.jsonto include the dependencypackage-lock.jsonwith the new package and its dependenciesCode Integration
index.html/_vercel/speed-insights/script.jswhich will be automatically served by Vercel when deployedImplementation Details:
Framework Identified: Static HTML/Vanilla JavaScript
Following the official Vercel documentation for vanilla JavaScript/static sites, I added two script tags to the
<head>section ofindex.html:window.siandwindow.siq)/_vercel/speed-insights/script.jsThis approach allows the Speed Insights library to track Web Vitals and other performance metrics once the site is deployed to Vercel.
Files Modified:
index.html- Added Speed Insights initialization and script loadingpackage.json- Added@vercel/speed-insightsdependencypackage-lock.json- Updated with new dependency informationTesting Performed:
npm run verify:files- Passed (80 required files verified)npm run smoke:static- Passed (4 local asset references and 17 storefront markers verified)Next Steps:
Once deployed to Vercel with Speed Insights enabled in the dashboard:
/_vercel/speed-insights/script.jsroute will be automatically availableNotes:
deferto not block page renderingView Project · Speed Insights
Created by geimerpedroza-8977 with Vercel Agent