v148 · 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. LCP vs Container Timing

    Side-by-side simulation: LCP fires once for the largest element, while Container Timing fires per-section as each completes painting. See how the two signals complement each other for CMS articles, feeds, and dashboards.

  4. Content Visibility Meter

    Six content sections using content-visibility: auto with Container Timing observers measuring when each becomes visible. Gauge bars show paint times per section. Toggle content-visibility on/off, inject sections lazily to watch timing entries appear, and see "time to fully interactive" computed from the last section's paint.

  5. Paint Budget Monitor

    Set a paint budget (ms), choose content complexity, and run the simulation. Container timing entries appear as rows flagged within budget, approaching, or over. Adjust the budget and complexity to model real-world scenarios and see which named containers would become render bottlenecks.

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

implementation reference

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