v145 · Performance

Container Timing

Mark any DOM section with a containertiming attribute and a PerformanceObserver delivers a timing entry the moment that section finishes its initial paint — LCP-style measurement for arbitrary content blocks.

Origin trial: Container Timing launched as an origin trial in Chrome 148. Demos on this page use the API where available and fall back to a simulation otherwise.

concepts

  1. Content Section Timer

    A page with three annotated sections — hero, article body, and sidebar — reports each section's paint time via PerformanceObserver. Watch which section finishes first and how long the straggler takes.

  2. Timing Dashboard

    Add containertiming to multiple elements on an example page and see a live dashboard of when each section became visible, ordered by render time — a buildless Core Web Vitals companion.

  3. Budget Monitor

    Set a render budget per container and watch each go green or red as PerformanceContainerTiming entries arrive. A tiny perf SLO console for component-level timing.

  4. Blog Post

    A realistic blog post layout with four named containertiming sections — hero, body, code block, and sidebar. A PerformanceObserver builds a live timing waterfall showing which content block painted first and how long each took.

why it shipped

Largest Contentful Paint (LCP) tracks the single biggest element, but modern pages are composed of independent sections — a hero banner, an article body, a product card grid — each with its own perceived load story. Element Timing can measure individual images or text nodes, but it forces you to annotate every leaf node rather than a whole section. Container Timing fills the gap: annotate a <section> or <div>, and the browser reports when the last child inside it has been painted. This gives teams a way to set section-level performance budgets without pixel-hunting for the single worst element.

references