PerformanceObserver in practice: what to watch and what not to

PerformanceObserver receives performance entries as the browser produces them, with no timer: with buffered you also recover the entries emitted before the script started.

What is worth watching

Six types cover LCP, INP and CLS. The rest aid diagnosis: element and mark measure what your own code marks, and visibility-state tells you when the tab is hidden, which is useful to discard entries recorded in a background tab.

The pattern that holds

new PerformanceObserver((list) => {
  const body = JSON.stringify(
    list.getEntries().map((e) => ({
      name: e.name,
      start: Math.round(e.startTime),
      dur: Math.round(e.duration),
    })),
  );
  navigator.sendBeacon("/api/rum", new Blob([body], { type: "application/json" }));
}).observe({ type: "longtask", buffered: true });

The code needs a browser with sendBeacon and an endpoint that accepts POST; without an endpoint replace the call with console.log. One observer per type, not one per event: the callback already receives a list.

Three common mistakes

• Observing without buffered: the entries emitted before the script never arrive.
• Observing layout-shift without filtering hadRecentInput: shifts caused by a click do not count for CLS.
• Forgetting disconnect() in a SPA: every navigation adds an observer and the entries duplicate.

The limitation to name

The set of types depends on the browser. Chrome 155 exposes 15, Firefox and Safari expose fewer and some names do not exist; an observer that assumes longtask on Safari receives nothing and throws no error. Check coverage with PerformanceObserver.supportedEntryTypes instead of assuming it.

Where to continue

The EneUI catalogue indexes 111,985 components, 12,808 icons and the record image auto slider: a slider that rotates on its own produces entries even when nobody watches it. For the metric picture read what Core Web Vitals are, for responsiveness INP in practice, and for the comparison between hosted and self-hosted analytics Vercel Analytics vs self-hosted.