Performance Monitoring Setup Guide¶
Overview¶
This guide covers the comprehensive performance monitoring system implemented in Task 45.7, providing real-time Core Web Vitals tracking and performance analytics.
Architecture¶
graph TB
A[Web Vitals Library] --> B[Performance Monitor]
B --> C[Real-time Dashboard]
B --> D[Analytics Storage]
B --> E[Performance Alerts]
C --> F[Core Web Vitals Display]
C --> G[Bundle Analysis]
C --> H[User Experience Metrics]
Implementation¶
1. Core Monitoring Script¶
The performance monitoring system is automatically initialized:
// Auto-initialized performance monitoring
window.PerformanceMonitor = {
addCoreWebVital: function(data) {
// Track Core Web Vitals
},
addBundleMetric: function(data) {
// Track bundle performance
},
addUserMetric: function(data) {
// Track user interactions
}
};
2. Dashboard Configuration¶
Access the dashboard at /performance-dashboard
:
<div id="performance-dashboard">
<div class="performance-section web-vitals">
<h3>🎯 Core Web Vitals</h3>
<!-- Real-time CWV metrics -->
</div>
<div class="performance-section bundle-analysis">
<h3>📦 Bundle Performance</h3>
<!-- Bundle size and loading metrics -->
</div>
<div class="performance-section user-experience">
<h3>👤 User Experience</h3>
<!-- Interaction and engagement metrics -->
</div>
</div>
3. Performance Budgets¶
Automated budget enforcement:
const PERFORMANCE_BUDGETS = {
lcp: 2500, // 2.5 seconds
fid: 100, // 100 milliseconds
cls: 0.1, // 0.1 score
inp: 200, // 200 milliseconds
bundleSize: 300000 // 300KB
};
Metrics Tracked¶
Core Web Vitals¶
- LCP (Largest Contentful Paint): Loading performance
- FID (First Input Delay): Interactivity
- CLS (Cumulative Layout Shift): Visual stability
- INP (Interaction to Next Paint): Responsiveness
Bundle Performance¶
- CSS Bundle Size: Stylesheet loading impact
- JavaScript Bundle Size: Script loading impact
- Total Requests: HTTP request count
- Cache Hit Rate: CDN performance metrics
User Experience¶
- Page Load Time: Complete page loading
- Time to Interactive: Interaction readiness
- Navigation Timing: Route transition performance
Dashboard Features¶
Real-time Updates¶
- 5-second refresh intervals
- Live Core Web Vitals scoring
- Performance trend visualization
- Alert notifications for budget violations
Performance Scoring¶
// Overall performance score calculation
function calculatePerformanceScore() {
const weights = {
lcp: 0.25,
fid: 0.25,
cls: 0.25,
inp: 0.25
};
return Object.keys(weights).reduce((score, metric) => {
const value = getMetricScore(metric);
return score + (value * weights[metric]);
}, 0);
}
Analytics Integration¶
// Google Analytics 4 integration
gtag('event', 'core_web_vitals', {
metric_name: 'LCP',
metric_value: 2340,
metric_rating: 'good',
custom_parameter: 'performance_monitoring'
});
Lighthouse CI Integration¶
Configuration¶
# .lighthouserc.yml
ci:
collect:
numberOfRuns: 3
settings:
preset: 'desktop'
assert:
assertions:
'categories:performance': ['error', {minScore: 90}]
'categories:accessibility': ['error', {minScore: 90}]
'categories:best-practices': ['error', {minScore: 90}]
'categories:seo': ['error', {minScore: 90}]
upload:
target: 'filesystem'
outputDir: './lighthouse-reports'
GitHub Actions Workflow¶
name: Performance Testing
on: [push, pull_request]
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: Build site
run: npm run build
- name: Run Lighthouse CI
run: npx lhci autorun
Performance Alerts¶
Budget Violations¶
Automatic alerts when performance budgets are exceeded:
function checkPerformanceBudgets(metrics) {
const violations = [];
if (metrics.lcp > PERFORMANCE_BUDGETS.lcp) {
violations.push(`LCP exceeded: ${metrics.lcp}ms > ${PERFORMANCE_BUDGETS.lcp}ms`);
}
if (violations.length > 0) {
sendPerformanceAlert(violations);
}
}
Monitoring Commands¶
# Start performance monitoring
npm run monitor:start
# Generate performance report
npm run report:performance
# Check Core Web Vitals
npm run test:cwv
# Validate performance budgets
npm run validate:budgets
Data Storage¶
Local Storage¶
Real-time metrics cached in browser:
const STORAGE_KEY = 'performance_metrics';
localStorage.setItem(STORAGE_KEY, JSON.stringify(metrics));
Analytics Export¶
// Export performance data
function exportPerformanceData() {
const data = {
timestamp: Date.now(),
coreWebVitals: getCoreWebVitalsData(),
bundleMetrics: getBundleMetrics(),
userExperience: getUserExperienceData()
};
return JSON.stringify(data, null, 2);
}
Troubleshooting¶
Common Issues¶
Dashboard Not Loading¶
- Verify JavaScript files are included
- Check browser console for errors
- Ensure performance monitoring is initialized
Metrics Not Updating¶
- Check web-vitals library inclusion
- Verify Performance Observer support
- Test with browser dev tools
Inaccurate Measurements¶
- Test in incognito mode
- Disable browser extensions
- Use consistent network conditions
Performance Debugging¶
// Debug performance metrics
window.PerformanceMonitor.debug = function() {
console.table({
'Core Web Vitals': this.getCoreWebVitals(),
'Bundle Metrics': this.getBundleMetrics(),
'User Metrics': this.getUserMetrics()
});
};
Next Steps¶
After setting up monitoring: 1. Monitor build performance 2. Track bundle optimization metrics 3. Set up Maintenance Procedures