Skip to content

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

  1. Verify JavaScript files are included
  2. Check browser console for errors
  3. Ensure performance monitoring is initialized

Metrics Not Updating

  1. Check web-vitals library inclusion
  2. Verify Performance Observer support
  3. Test with browser dev tools

Inaccurate Measurements

  1. Test in incognito mode
  2. Disable browser extensions
  3. 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