# PerformanceObserver in pratica: cosa osservare e cosa no

PerformanceObserver legge le voci di performance senza polling. Chrome 155 espone 15 tipi di entry, 7 con buffer: quali servono e quali no.

> Pagina: https://ui.eneawork.it/blog/performance-observer-guida
> Markdown: https://ui.eneawork.it/blog/performance-observer-guida.md

*2026-11-01*

PerformanceObserver riceve le voci di performance man mano che il browser le produce, senza timer: con buffered recuperi anche quelle emesse prima che lo script partisse.

PerformanceObserver misurato su Chrome 155 headless il 1 novembre 2026: PerformanceObserver.supportedEntryTypes restituisce 15 tipi, e 7 di questi restituiscono voci con buffered: true dopo il caricamento di https://ui.eneawork.it/. I sette tipi con buffer sono largest-contentful-paint, long-animation-frame, longtask, navigation, paint, resource e visibility-state; event, element, first-input, interaction-contentful-paint, mark, measure, soft-navigation e layout-shift non hanno restituito voci nella prova. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. Riferimento: MDN, CC BY-SA 2.5.

## Cosa conviene osservare

Sei tipi coprono LCP, INP e CLS. Gli altri servono alla diagnosi: element e mark misurano ciò che il tuo codice segna, visibility-state dice quando la scheda è nascosta e permette di scartare le voci misurate in background.

## Il pattern che regge

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 });

Il codice richiede un browser con sendBeacon e un endpoint che accetti POST; senza endpoint sostituisci la chiamata con console.log. Un observer per tipo, non un observer per evento: la callback riceve già una lista.

## Tre errori comuni

## Il limite da dichiarare

Il set di tipi dipende dal browser. Chrome 155 ne espone 15, Firefox e Safari ne espongono meno e alcuni nomi non esistono; un observer che assume longtask su Safari non riceve nulla e non lancia errori. La copertura va controllata con PerformanceObserver.supportedEntryTypes, non supposta.

## Dove continuare

Il catalogo EneUI indicizza 111.985 componenti, 12.808 icone e il record image auto slider: uno slider che ruota da solo produce voci anche quando nessuno lo guarda. Per il quadro delle metriche leggi cosa sono i Core Web Vitals, per la reattività INP in pratica, per il confronto tra analytics ospitato e self-hosted Vercel Analytics vs self-hosted.

## FAQ

### PerformanceObserver sostituisce Lighthouse?

No. Lighthouse misura una pagina in laboratorio, PerformanceObserver legge ciò che il browser produce durante una visita reale.

### Cosa fa buffered: true?

Chiede al browser le voci già emesse prima che l'observer partisse. Senza, perdi l'LCP e i long task del caricamento.

### Quali tipi servono per le Core Web Vitals?

largest-contentful-paint per LCP, event per INP e layout-shift per CLS. Gli altri tipi aiutano a capire la causa.

### Perché il mio observer non riceve nulla su Safari?

Perché quel tipo non è supportato. Controlla supportedEntryTypes e scrivi un ramo di riserva prima di osservare.

### Come si evitano le voci duplicate?

Con un flag o un Set nella callback e con disconnect() quando smonti il componente. Con reportAllChanges le voci arrivano più volte.