19.5 Performance Observer

Overview

PerformanceObserver provides a way to observe and react to performance measurement events, enabling detailed performance monitoring and optimization.

Performance Entry Types

┌─────────────────────────────────────────────────────────────────────────┐
│                    Performance Entry Types                              │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  ┌─────────────────┐                                                   │
│  │    navigation   │ → Page load metrics (DNS, TCP, DOM)               │
│  └─────────────────┘                                                   │
│                                                                         │
│  ┌─────────────────┐                                                   │
│  │    resource     │ → Resource loading (images, scripts, CSS)         │
│  └─────────────────┘                                                   │
│                                                                         │
│  ┌─────────────────┐                                                   │
│  │      mark       │ → Custom timestamps (performance.mark())          │
│  └─────────────────┘                                                   │
│                                                                         │
│  ┌─────────────────┐                                                   │
│  │     measure     │ → Duration between marks (performance.measure())  │
│  └─────────────────┘                                                   │
│                                                                         │
│  ┌─────────────────┐                                                   │
│  │      paint      │ → First Paint, First Contentful Paint             │
│  └─────────────────┘                                                   │
│                                                                         │
│  ┌─────────────────┐                                                   │
│  │   longtask      │ → Tasks blocking main thread > 50ms               │
│  └─────────────────┘                                                   │
│                                                                         │
│  ┌─────────────────┐                                                   │
│  │ largest-contentful-paint │ → LCP metric                             │
│  └─────────────────┘                                                   │
│                                                                         │
│  ┌─────────────────┐                                                   │
│  │   layout-shift  │ → CLS metric                                      │
│  └─────────────────┘                                                   │
│                                                                         │
│  ┌─────────────────┐                                                   │
│  │   first-input   │ → FID metric                                      │
│  └─────────────────┘                                                   │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Core Web Vitals

Basic Usage

// Create observer
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.duration);
  }
});

// Start observing
observer.observe({ entryTypes: ['measure', 'mark'] });

// Or observe with buffered option (get past entries)
observer.observe({
  type: 'largest-contentful-paint',
  buffered: true,
});

// Create custom marks and measures
performance.mark('start');
// ... code to measure ...
performance.mark('end');
performance.measure('operation', 'start', 'end');

Resource Timing Properties

Summary

• •Non-blocking performance monitoring
• •Access to Core Web Vitals
• •Custom marks and measures
• •Resource loading analysis
• •Long task detection
• •Historical entry access with buffered: true