v145 · Performance · demo

Timing Dashboard

Simulate a complex page with multiple annotated sections. Each container reports its paint time; the dashboard orders entries by render time, highlighting the fastest and slowest.

Origin trial feature: uses Container Timing API when available, simulation otherwise.

Container Timing entries

0 entries

Click ▶ to simulate a page load with Container Timing entries.

Fastest: — Slowest: — Median: — Total: —

// HTML: annotate sections
// <nav containertiming="nav-bar">…</nav>
// <section containertiming="hero-banner">…</section>
// <div containertiming="product-grid">…</div>
// <aside containertiming="sidebar-ads">…</aside>

const obs = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    // entry.identifier  — the containertiming attribute value
    // entry.renderTime  — ms after navigationStart
    // entry.size        — { width, height }
    dashboard.addEntry(entry);
  }
});
obs.observe({ type: 'container-timing', buffered: true });

Container Timing entries

see also