Enable Vercel Speed Insights on Your Project #6
Conversation
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
## Vercel Speed Insights Implementation
### Summary
Successfully implemented Vercel Speed Insights tracking on the portfolio website as requested in the user guide.
### Project Type
This is a **static HTML portfolio website** (not a Node.js/npm project). The project uses vanilla HTML, CSS, and JavaScript with no build system or package manager.
### Changes Made
**Modified Files:**
- `index.html` - Added Vercel Speed Insights tracking scripts
### Implementation Details
#### What was added to `index.html`:
Added the following scripts before the closing `</body>` tag (lines 309-311):
```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>
```
### Technical Decisions
1. **HTML Implementation**: Since this is a static HTML website without a build system, I followed the "HTML" implementation path from the Vercel Speed Insights guide, which requires adding simple script tags directly to the HTML file.
2. **Script Placement**: The scripts were added before the closing `</body>` tag, as recommended in the guide. This ensures all page content loads before the Speed Insights tracking script initializes.
3. **No Package Installation**: Unlike framework-based implementations (Next.js, React, Vue, etc.), the HTML implementation does not require installing the `@vercel/speed-insights` package. The tracking is handled entirely by the `/_vercel/speed-insights/script.js` endpoint.
### Prerequisites Met
The implementation assumes the following prerequisites from the Vercel Speed Insights guide have been completed:
- ✓ Vercel account created
- ✓ Project created on Vercel
- ✓ Speed Insights enabled in Vercel dashboard
### Next Steps
After deployment to Vercel:
1. The `/_vercel/speed-insights/script.js` endpoint will be automatically available
2. Speed Insights will begin tracking performance metrics once users visit the site
3. Performance data will be available in the Vercel dashboard under the Speed Insights tab
### Verification
- HTML structure validated
- Scripts correctly placed before closing body tag
- Speed Insights initialization function added
- Speed Insights script endpoint configured correctly
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Author
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 Implementation
Summary
Successfully implemented Vercel Speed Insights tracking on the portfolio website as requested in the user guide.
Project Type
This is a static HTML portfolio website (not a Node.js/npm project). The project uses vanilla HTML, CSS, and JavaScript with no build system or package manager.
Changes Made
Modified Files:
index.html- Added Vercel Speed Insights tracking scriptsImplementation Details
What was added to
index.html:Added the following scripts before the closing
</body>tag (lines 309-311):Technical Decisions
HTML Implementation: Since this is a static HTML website without a build system, I followed the "HTML" implementation path from the Vercel Speed Insights guide, which requires adding simple script tags directly to the HTML file.
Script Placement: The scripts were added before the closing
</body>tag, as recommended in the guide. This ensures all page content loads before the Speed Insights tracking script initializes.No Package Installation: Unlike framework-based implementations (Next.js, React, Vue, etc.), the HTML implementation does not require installing the
@vercel/speed-insightspackage. The tracking is handled entirely by the/_vercel/speed-insights/script.jsendpoint.Prerequisites Met
The implementation assumes the following prerequisites from the Vercel Speed Insights guide have been completed:
Next Steps
After deployment to Vercel:
/_vercel/speed-insights/script.jsendpoint will be automatically availableVerification
View Project · Speed Insights
Created by leonardo carvalho (devleocarvalho) with Vercel Agent