v148 · 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.
Checking Container Timing support…

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', buffered: true });

see also

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗