v148 · Web APIs · Performance
Paint Budget Monitor
Container Timing exposes PerformanceObserver entries for elements with containertiming. This monitor simulates page loads with different content complexity levels, generates container timing entries, and flags containers that exceed your paint budget — a practical tool for identifying render bottlenecks by name.
Simulation config
Paint budget
max ms per container
Complexity
simulated render load
Containers
4–10
6
Observer mode
native or fallback
Ignored subtree
spec edge case
Checking support for
PerformanceObserver entry type "container"…
Container timing entries (
PerformanceObserver type: "container")
Container name
paint time
renderTime
vs budget
source / duration
Click "Run" to generate entries.
hero-section
containertiming
data-grid
containertiming
ad-sidebar
optional ignore
Container Timing entries give you named render costs. Use
containertiming on key containers (hero, data-grid, sidebar) to get per-container paint times and identify which section of your page is the render bottleneck.// Chrome 148: observe container timing entries
const observer = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
// entry.identifier = containertiming attribute value
console.log(entry.identifier, entry.renderTime, entry.size);
}
});
observer.observe({ type: 'container', buffered: true });
// Mark containers for timing:
<section id="hero"
containertiming="hero"> ... </section>
<div id="data-grid"
containertiming="data-grid"> ... </div>
<aside containertiming-ignore> ads excluded </aside>
references
- Content Section Timer — per-section timing
- Timing Dashboard — real-time render dashboard
- LCP Comparison — LCP vs container timing
- Content Visibility Meter — content-visibility integration
- ChromeStatus entry
- Container Timing API draft
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗