PerformanceObserver examples.js

// 1.
// Navigation Timing
//
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('NavigationTiming:', entry);
  }
}).observe({type: 'navigation', buffered: true});

// 2.
// Resource Timing
//
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Page resource:', entry);
  }
}).observe({type: 'resource', buffered: true});

// 3.
// Paint Timing
//
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Paint timing:', entry);
  }
}).observe({type: 'paint', buffered: true});

// 4.
// Layout Shift
//
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

// 5.
// Largest Contentful Paint
//
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

// 6.
// Visibility State
//
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Visibility state:', entry);
  }
}).observe({type: 'visibility-state', buffered: true});