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