Chrome is launching an origin trial for the Container Timing performance API starting in Chrome 148. Developed by Bloomberg and implemented by Igalia, the API extends Element Timing to measure when entire blocks of content (containers like widgets, cards, or sections) finish painting, rather than just individual elements. Developers add a `containertiming` attribute to HTML elements and use a PerformanceObserver to track paint events within those containers. The API supports ignoring child elements via `containertiming-ignore`, follows contentful paint semantics similar to LCP, and can be feature-detected via `PerformanceContainerTiming`. Best practices include setting attributes early in the HTML, using meaningful identifiers, and applying the attribute only to semantically important sections.
Table of contents
How the Container Timing API worksDemoWhat updates count for Container Timing?Feature-detecting Container Timing supportBest practicesHow to enable Container Timing?Feedback and more detailsConclusionSort: