Speculation Rules Prerendering
Speculation rules let a page declare which URLs to prefetch or fully prerender, so a likely next navigation renders in a hidden context and appears instantly on click.
Definition
Speculation Rules is a JSON-declared mechanism for predictive loading. Prefetch rules warm the HTTP cache for candidate URLs; prerender rules render the full page in a hidden context — DOM, scripts, layout — so navigation swaps it in with near-zero latency. Eagerness levels from conservative to eager control when candidates trigger.
Context and scope
Applied to search-result pages prerendering the first organic links, documentation sites, and flows with a known next step. Replaces hacky prerender tricks and complements link prefetching.
Common misconceptions
- Prerendering is just prefetching — prefetch fetches bytes; prerendering executes the page in a hidden context
- Prerendered pages always show fresh data — pages observe when prerendering ends and refresh volatile state
- It works everywhere — browser support is partial, and the API degrades to no-ops elsewhere
Anti-patterns
- Prerendering personalized pages that immediately fire analytics, inflating counts for never-visited views
- Marking dozens of links eager on every page and paying bandwidth and CPU for the common case
- Ignoring document.prerendering state, so timestamps and sessions bake in values from prerender time
Related concepts
Related examples
Authoritative source
https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API
What it is
The page ships a script type of speculationrules containing URL lists or selectors plus actions. The browser decides, based on eagerness and heuristics, when to prefetch or prerender each candidate. A prerendered page is a fully live hidden document: scripts ran, layout exists, and activation on click swaps it in as the current page.
How it works
Eagerness values rank candidates: conservative waits for strong intent, immediate reacts to hover or pointer-down, and eager prerenders everything matching. Pages can detect the prerendering phase via document.prerendering and the activation event, deferring side effects like analytics and volatile fetches until activation.
When to use it
High-confidence next steps: first results in search, the paywall page from an article teaser, checkout continuation. Bandwidth and CPU spent on wrong guesses scale with eagerness, so start conservative and instrument which speculations actually activate.
Pitfalls
Prerendered pages run code: analytics, sessions, and timers must wait for activation or they record phantom visits. Storage and cookies are partitioned per speculation in some modes, and cross-origin prerenders impose restrictions. Feature-detect and treat the mechanism strictly as progressive enhancement.