Install Vercel Speed Insights#37
Draft
vercel[bot] wants to merge 1 commit into
Draft
Conversation
# Vercel Speed Insights Installation - Report
## Summary
Vercel Speed Insights has been successfully verified and configured for this Angular project. The package was already installed and properly configured, so no code changes were necessary.
## Current Implementation Status: ✅ Complete
### What Was Already in Place:
1. **Package Installation**: `@vercel/speed-insights` v2.0.0 is installed (latest version as of March 2026)
2. **Service Implementation**: Custom Angular service created at `src/app/services/speed-insights.service.ts`
3. **Configuration**: Service is properly registered in `src/app/app.config.ts` providers array
4. **Framework-Specific Setup**: Uses `injectSpeedInsights()` with `framework: 'angular'` parameter
### Implementation Details:
#### Files Involved:
- **src/app/services/speed-insights.service.ts** - Service that initializes Speed Insights
- Uses `injectSpeedInsights()` function from `@vercel/speed-insights`
- Properly checks for browser environment using `isPlatformBrowser()` to avoid SSR issues
- Configures with `framework: 'angular'` parameter
- Injectable service provided in 'root'
- **src/app/app.config.ts** - Application configuration
- Includes `SpeedInsightsService` in the providers array
- This ensures the service is instantiated at app bootstrap
- **package.json** - Dependencies
- `@vercel/speed-insights": "^2.0.0"` (latest version)
#### Technical Implementation:
```typescript
// The service uses the vanilla JS API (recommended for Angular)
injectSpeedInsights({
framework: 'angular'
});
```
This approach is correct because:
- Angular doesn't have a dedicated Speed Insights component like React/Vue/Next.js
- The generic `injectSpeedInsights()` function is the official method for frameworks without specific integrations
- Browser-only execution prevents SSR/hydration issues
- Service initialization at app bootstrap ensures tracking starts immediately
### Verification Steps Completed:
1. ✅ Fetched latest documentation from https://vercel.com/docs/speed-insights/quickstart
2. ✅ Verified package source code from https://github.com/vercel/speed-insights
3. ✅ Confirmed implementation follows official patterns
4. ✅ Ran `bun install` to ensure dependencies are up to date
5. ✅ Successfully built the project with no errors
6. ✅ Verified Angular version compatibility (Angular 21.2.0)
### Changes Made:
- **bun.lockb** - Updated lock file after running `bun install` (standard maintenance)
### No Code Changes Required Because:
The project already has a complete and correct implementation of Vercel Speed Insights following the latest best practices as documented in:
- Official Vercel Speed Insights documentation
- The @vercel/speed-insights package source code (v2.0.0)
- Angular-specific patterns for third-party script integration
### How It Works:
1. When the app bootstraps, Angular's DI system instantiates `SpeedInsightsService`
2. The service constructor checks if running in browser environment
3. If in browser, it calls `injectSpeedInsights()` which:
- Injects the Speed Insights script into the page head
- Starts tracking page performance metrics
- Sends data to Vercel's Speed Insights dashboard
### Next Steps for User:
1. Deploy the application to Vercel
2. Enable Speed Insights in the Vercel dashboard for your project
3. Wait for traffic to accumulate (metrics will appear after several days)
4. View performance data in the Vercel dashboard under Speed Insights
### Configuration Options Available:
The implementation can be enhanced with optional parameters if needed:
- `sampleRate`: Control percentage of events sent (default: 1 = 100%)
- `beforeSend`: Middleware function to modify/filter events
- `debug`: Enable debug logging (auto-enabled in development)
- `route`: Specify dynamic route for route-specific metrics
- `endpoint`: Custom endpoint for multi-project deployments
## Conclusion:
The Vercel Speed Insights package is properly installed and configured according to the latest official documentation. The implementation is production-ready and will start tracking performance metrics once deployed to Vercel with Speed Insights enabled in the dashboard.
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 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
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 - Report
Summary
Vercel Speed Insights has been successfully verified and configured for this Angular project. The package was already installed and properly configured, so no code changes were necessary.
Current Implementation Status: ✅ Complete
What Was Already in Place:
@vercel/speed-insightsv2.0.0 is installed (latest version as of March 2026)src/app/services/speed-insights.service.tssrc/app/app.config.tsproviders arrayinjectSpeedInsights()withframework: 'angular'parameterImplementation Details:
Files Involved:
src/app/services/speed-insights.service.ts - Service that initializes Speed Insights
injectSpeedInsights()function from@vercel/speed-insightsisPlatformBrowser()to avoid SSR issuesframework: 'angular'parametersrc/app/app.config.ts - Application configuration
SpeedInsightsServicein the providers arraypackage.json - Dependencies
@vercel/speed-insights": "^2.0.0"(latest version)Technical Implementation:
This approach is correct because:
injectSpeedInsights()function is the official method for frameworks without specific integrationsVerification Steps Completed:
bun installto ensure dependencies are up to dateChanges Made:
bun install(standard maintenance)No Code Changes Required Because:
The project already has a complete and correct implementation of Vercel Speed Insights following the latest best practices as documented in:
How It Works:
SpeedInsightsServiceinjectSpeedInsights()which:Next Steps for User:
Configuration Options Available:
The implementation can be enhanced with optional parameters if needed:
sampleRate: Control percentage of events sent (default: 1 = 100%)beforeSend: Middleware function to modify/filter eventsdebug: Enable debug logging (auto-enabled in development)route: Specify dynamic route for route-specific metricsendpoint: Custom endpoint for multi-project deploymentsConclusion:
The Vercel Speed Insights package is properly installed and configured according to the latest official documentation. The implementation is production-ready and will start tracking performance metrics once deployed to Vercel with Speed Insights enabled in the dashboard.
View Project · Speed Insights
Created by wanderson Aparecido dos Reis (wandersonareis) with Vercel Agent