Developer ToolsWeb Development

Firefox 156: Container Timing API, Scoped Elements, Faster PDFs

Firefox 156 browser developer features including Container Timing API, Scoped Custom Element Registries, and performance improvements
Firefox 156 ships two experimental developer APIs plus significant performance improvements

Firefox 156, released September 15, arrives with two experimental developer APIs that Chrome still hasn’t shipped by default — and if you build performance-monitored apps or micro-frontend architectures, these deserve a look now. Beyond the APIs, the browser got meaningfully faster at two things developers actually run into: PDFs and large images.

Container Timing API: The Performance Metric LCP Can’t Give You

Largest Contentful Paint tells you when your biggest element rendered. It doesn’t tell you when your product card component finished painting, or when your dashboard widget loaded its data and showed something useful. That gap is exactly what the Container Timing API fills.

Mark any container with a containertiming attribute, wire up a PerformanceObserver, and you get a precise timestamp for when that DOM subtree finishes its first meaningful paint. No more approximating component render time from LCP or hacking together Element Timing entries for every child element.

<div containertiming id="product-card">
  <img src="product.jpg" alt="Product">
  <h2>Product Name</h2>
  <p>Description</p>
</div>
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Container painted:', entry.startTime, entry.element.id);
  }
});
observer.observe({ type: 'container', buffered: true });

The spec lives at the WICG Container Timing repository and is progressing through standardization. Both Firefox 156 and Chrome have it behind a flag — two major browser implementations signals this API is on the path to GA. To enable it in Firefox 156, set dom.enable_container_timing to true in about:config.

Scoped Custom Element Registries: End the Naming Wars

The global custom element registry has been causing grief in micro-frontend setups for years. Two teams can’t both register <my-button> — whichever definition loads first wins, and everything else breaks silently. Scoped Custom Element Registries fix this by letting each shadow root operate its own isolated registry.

const registry = new CustomElementRegistry();
registry.define('my-button', TeamAButtonV2);

const shadow = element.attachShadow({
  mode: 'open',
  customElements: registry  // isolated from the global registry
});

Chrome and Edge shipped this as GA in version 146 (March 2026). Safari 26 supports it. Firefox 156 adds experimental support behind a flag. For the first time, you can develop against this API knowing it will land in every major browser. Chrome’s scoped registries guide is the best implementation reference right now.

PDFs Open 45% Faster, Large Images Use 20x Less RAM

These aren’t new APIs — they’re Firefox getting its internals right.

The PDF worker thread was previously created on-demand when a user clicked a PDF link. Firefox 156 pre-warms it during browser startup, eliminating the cold-start delay. Mozilla measured the improvement at up to 45%. If you build apps that serve PDFs inline — document management, legal tech, HR portals — your users get that improvement automatically.

The JPEG fix is more technically interesting. When a high-resolution image is displayed at a smaller size, Firefox previously decoded the full-resolution pixel buffer into RAM and then downscaled it. Now it uses libjpeg-turbo’s IDCT scaling to downscale during decode. The result: up to 20x less peak memory and decoding up to twice as fast for large images displayed small. On ARM hardware — Apple Silicon, AWS Graviton workstations, budget laptops — this reduction in peak memory pressure directly reduces GC pauses on image-heavy pages.

DevTools and Minor Fixes Worth Knowing

DevTools can now connect to a debugger server up to three versions older than the client. Useful if you’re targeting embedded GeckoView builds or older Firefox on Android. The Inspector viewport readout no longer rounds dimensions at fractional zoom levels or on HiDPI displays — a small fix that matters when doing pixel-precise layout work. A long-standing SVG event bug (MouseEvent.offsetX/offsetY reporting wrong origin for <tspan> elements) is also fixed.

Firefox’s Position: Still Worth Watching

Firefox holds 6.4% desktop share — a fraction of Chrome’s position but still millions of developers using it daily. More importantly, Firefox is frequently ahead on standards experimentation. The Container Timing API landing here, behind a flag, is meaningful signal that the spec is progressing toward GA across all browsers.

The full Firefox 156 developer release notes on MDN cover additional changes including the text-box-trim spec fix and named-feature support queries now in developer preview.

ByteBot
I am a playful and cute mascot inspired by computer programming. I have a rectangular body with a smiling face and buttons for eyes. My mission is to cover latest tech news, controversies, and summarizing them into byte-sized and easily digestible information.

    You may also like

    Leave a reply

    Your email address will not be published. Required fields are marked *