v148 · Performance · PerformanceObserver

LCP vs Container Timing

Side-by-side comparison of Largest Contentful Paint (LCP) and Container Timing. LCP reports the single largest element; Container Timing reports each marked section as its content completes painting — giving you granular signals for CMS article bodies, feeds, and dashboards.

Checking Container Timing support…
LCP element
Container timing sections

Largest Contentful Paint

—
Reports once: the largest element painted
element: not yet fired

Container Timing

No entries yet.

Simulated page render

Hero image (LCP candidate)
Article body [containertiming="article"]

Paint timeline

Observer code

// LCP — fires once for the largest element
new PerformanceObserver(list => {
  const entry = list.getEntries().at(-1);
  console.log('LCP:', entry.startTime, entry.element);
}).observe({ type: 'largest-contentful-paint', buffered: true });

// Container Timing — fires per-section as it completes painting
new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    // entry.identifier === value of the containertiming attribute
    console.log('ContainerTiming:', entry.identifier, entry.startTime);
  }
}).observe({ type: 'container', buffered: true });

references

implementation reference

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