PerformanceObserver API

Summary

Subscribe to paint, largest-contentful-paint, layout-shift, longtask, event entry types — RUM in production with buffered: true. Respect privacy and volume — sample rates. Correlate with navigation timing for full picture.

Code example

const po = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    rumBuffer.push({ type: entry.entryType, start: entry.startTime });
  });
});

['paint', 'largest-contentful-paint', 'layout-shift', 'longtask'].forEach((type) => {
  try { po.observe({ type, buffered: true }); } catch { /* unsupported */ }
});

Key points

• Subscribe to paint, largest-contentful-paint, layout-shift, longtask, event entry types — RUM in production with buffered: true.
• Respect privacy and volume — sample rates.
• Correlate with navigation timing for full picture.

Further reading

• PerformanceObserver
• Web Vitals in JS

Related concepts

• Largest Contentful Paint (LCP)
• Long Tasks API