v148 · origin trial · performance api

Container Timing

A performance API that lets you measure when a named section of the DOM — a card, a widget, a news feed — first renders and when its last sub-element paints. Extends Element Timing from single elements to whole component trees.

Origin trial Container Timing is in origin trial from Chrome 148. You need an origin trial token to use it in production outside of local testing. API shape is still subject to change; verify against the WICG spec before shipping. To test locally enable the #container-timing flag or register at developer.chrome.com/origintrials.

at a glance

Origin trial	Chrome 148+
Status	Origin trial (Experiment)
Spec / Explainer	WICG/container-timing — GitHub explainer
Blog	Container Timing origin trial — Chrome for Developers
ChromeStatus	5110962817073152 — Container Timing

why it exists

The Element Timing API lets you observe when a single <img> or text block renders. But modern pages are built from components — a news card, a product widget, a comment thread — and what developers actually care about is when the whole component is ready, not just its headline image. Container Timing extends the same elementtiming / PerformanceObserver pattern to entire subtrees: mark a container with the containertiming attribute, and the browser reports the render timing of the container as a whole, tracking its constituent elements until all have painted.

Source: WICG Container Timing explainer, Chrome for Developers blog, May 2026.

shape of the API

HTML: marking containers

Add the containertiming attribute to any element you want to measure. The attribute value becomes the identifier in the performance entry:

<section containertiming="product-card">
  <img src="product.jpg" alt="...">
  <h2>Product Name</h2>
  <p>Description...</p>
  <button>Add to cart</button>
</section>

PerformanceEntry properties

Property	Description
`entryType`	`"container"`
`identifier`	The value of the `containertiming` attribute.
`startTime`	The timestamp of the latest element paint within the container (updates as new sub-elements paint).
`firstRenderTime`	Timestamp of the container's first paint.
`size`	The rendered area (in pixels) of the largest painted element in the container.
`lastPaintedElement`	Reference to the last DOM element that painted within the container.

Source: WICG Container Timing explainer and Igalia blog, May 2026.

example

Observing a component's render time

const observer = new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log(`Container "${entry.identifier}" rendered`);
    console.log('  First paint:', entry.firstRenderTime, 'ms');
    console.log('  Last paint:', entry.startTime, 'ms');
    console.log('  Painted area:', entry.size, 'px²');
    console.log('  Last painted element:', entry.lastPaintedElement);
  }
});

observer.observe({ type: 'container', buffered: true });

Measuring multiple components

<!-- Mark each component you want to time -->
<div containertiming="hero-banner"> ... </div>
<ul containertiming="product-grid"> ... </ul>
<aside containertiming="sidebar-recs"> ... </aside>

// The observer receives separate entries for each identifier
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    sendMetric(`render_${entry.identifier}`, entry.startTime);
  }
});
observer.observe({ type: 'container', buffered: true });

Origin trial setup

<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

Source: Chrome for Developers blog — Container Timing origin trial; Igalia blog post, May 2026.

browser support

Browser	Support
Chrome 148+	Origin trial
Firefox	No position
Safari	No position

Source: chromestatus.com feature page, May 2026.