v145 · Performance

RUM Beacon Builder

In a real app, paintTime and presentationTime are aggregated into a RUM payload and beaconed to an analytics endpoint. This tool collects every relevant performance entry on this page, computes the new Chrome 145 deltas, and shows exactly what you would send — ready to copy.

Feature detection: checking…

Trigger entries to collect

Live metrics

LCP renderTime
—
Time from nav start to render
LCP paintTime
—
CPU rasterisation done
LCP presentationTime
—
Frame on screen
Paint → present lag
—
Compositor handoff cost
FCP presentationTime
—
First contentful frame
Entries collected
0
paint + LCP + element

Raw entry stream

Waiting for entries — scroll, interact, or trigger above…
navigator.sendBeacon payload — what you would send to analytics
{ "status": "collecting…" }
// Collect paintTime + presentationTime across entry types
const beaconData = {};
const obs = new PerformanceObserver(list => {
  for (const e of list.getEntries()) {
    if (e.entryType === 'largest-contentful-paint') {
      beaconData.lcp = {
        renderTime:       e.renderTime,
        paintTime:        e.paintTime,         // Chrome 145+
        presentationTime: e.presentationTime,  // Chrome 145+
        paintLag:   e.paintTime ? e.presentationTime - e.paintTime : null,
        element:    e.element?.tagName,
        url:        e.url,
      };
    }
    if (e.entryType === 'paint' && e.name === 'first-contentful-paint') {
      beaconData.fcp = {
        startTime:        e.startTime,
        presentationTime: e.presentationTime,  // Chrome 145+
      };
    }
  }
});
['largest-contentful-paint','paint','element'].forEach(t =>
  obs.observe({ type: t, buffered: true })
);

// On page unload, send the collected data
addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/analytics', JSON.stringify(beaconData));
  }
});

see also