v147 · origin trial · perf

Prerendering cross-origin iframes

Prerendered pages can now keep their cross-origin iframes alive during prerender, but only if the iframe's origin opts in via a Supports-Loading-Mode: prerender-cross-origin-frames response header. Previously, prerender would skip cross-origin frames entirely, leaving holes in the prerendered view.

concepts

  1. Opt-in Header Check

    Probes a URL and reports whether it sends the prerender opt-in header. Useful for site operators who embed cross-origin widgets and want to know which ones are already prerender-friendly.

  2. Prerendering Cross-Origin iframe Opt-in Flow

    Animated step-by-step walkthrough of the full prerender + cross-origin iframe lifecycle — comparing the "server opts in" and "server does not opt in" paths, with a live browser probe for prerendering status and Speculation Rules API support.

  3. Prerender Performance Lab

    Timing benchmark comparing cold navigation, same-origin prerender, and Chrome 147 cross-origin iframe prerender. Reads real PerformanceNavigationTiming.activationStart, shows a header configurator for Supports-Loading-Mode, and simulates <link rel="prerender"> injection with measured latency.

  4. Compatibility Lab

    Detects prerendering state via document.prerendering and the prerenderingchange event. Checks Supports-Loading-Mode header support. Probes the PerformanceNavigationTiming.activationStart field that marks when a prerendered page activated. Provides the opt-in header pattern for cross-origin iframe hosts.

why it shipped

Speculation Rules let sites prerender entire navigations ahead of time. But until now, any cross-origin iframe inside that prerendered page was held back — not loaded, not rendered, not even prepared. When the user finally navigated, the page was instantly visible but the embedded YouTube player or Stripe checkout still had to load from scratch. Allowing cross-origin frames to opt in via a single response header closes the gap: the embed loads as part of prerender, and on navigation the whole composition is interactive immediately.

references

implementation reference

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