Performance Monitoring

Lighthouse, Web Vitals, React Profiler, and real user monitoring.

Overview

Monitoring performance helps identify and fix bottlenecks in production.

Key Concepts

• Web Vitals — FCP, LCP, CLS, FID, TTI metrics
• Lighthouse — Performance auditing tool
• React Profiler — Measure component render times
• Real User Monitoring — Track actual user performance
• Error Tracking — Capture and report errors

Code Examples

// Web Vitals reporting
import { onCLS, onFID, onLCP } from 'web-vitals';

function reportWebVitals() {
  onCLS(console.log);
  onFID(console.log);
  onLCP(console.log);
}

// React Profiler
function App() {
  const onRenderCallback = (
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime
  ) => {
    console.log({
      id,
      phase,
      actualDuration,
      baseDuration,
      startTime,
      commitTime
    });
  };

  return (
    <Profiler id="App" onRender={onRenderCallback}>
      <MainContent />
    </Profiler>
  );
}

// Performance monitoring hook
function usePerformanceMonitor() {
  useEffect(() => {
    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        if (entry.entryType === 'measure') {
          console.log(`${entry.name}: ${entry.duration}ms`);
        }
      });
    });

    observer.observe({ entryTypes: ['measure'] });

    return () => observer.disconnect();
  }, []);

  const measure = (name, fn) => {
    performance.mark(`${name}-start`);
    const result = fn();
    performance.mark(`${name}-end`);
    performance.measure(name, `${name}-start`, `${name}-end`);
    return result;
  };

  return { measure };
}

Practice

Implement performance monitoring for a React app and set up alerts for regressions.