v145 · Web APIs · Compositor Latency Inspector

Compositor latency inspector

A timeline visualiser that triggers a real LCP candidate, captures every timing field on the entry, and draws each as a horizontal bar so you can see exactly how long the browser spent in each phase — and where compositor latency lives.

scenario

Press a scenario button to trigger a new LCP candidate and record the timing entry.

The element above gets swapped for a fresh LCP candidate. The browser then reports startTime, renderTime, paintTime, and presentationTime — all in the same entry.

No entry captured yet.

timeline

start → renderTime renderTime → paintTime paintTime → presentationTime
startTime —
renderTime —
paintTime —
presentationTime —
timeline
—

CPU paint window: — Compositor latency: —

code

// Each scenario forces a new LCP candidate by swapping a large element.
// The PerformanceObserver captures the entry — all four time fields populate.

const obs = new PerformanceObserver((list) => {
  const entry = list.getEntries().at(-1);
  if (!entry) return;
  const cpuPaintWindow = entry.paintTime - entry.renderTime;        // CPU rasterise
  const compositorLatency = entry.presentationTime - entry.paintTime; // GPU/display
  render({
    startTime: entry.startTime,
    renderTime: entry.renderTime,
    paintTime: entry.paintTime,
    presentationTime: entry.presentationTime,
    cpuPaintWindow,
    compositorLatency,
  });
});
obs.observe({ type: 'largest-contentful-paint', buffered: true });

see also