Speculative Loading

What is speculative loading?

Speculative loading means the browser fetches, or even fully renders, a page the user has not opened yet, betting that they will go there next. If the bet is right, the next navigation feels almost instant. If it is wrong, the work is wasted bandwidth and memory. On the web today the standard way to ask for it is the Speculation Rules API.

Browser support and status

Be careful before you depend on it. MDN marks the Speculation Rules API as experimental and not Baseline, because it does not work in some of the most widely used browsers. Chrome's documentation lists support in Chrome and Edge (prerendering from version 109), no support in Firefox, and Safari only behind a flag. Chrome itself says prerendered pages should be treated as a hint and a progressive enhancement. Build the site so it works without it, and treat speculation as a bonus for the browsers that support it. Check the live compatibility tables on MDN and developer.chrome.com before relying on any detail here.

How it works: prefetch and prerender

You declare rules in a <script type="speculationrules"> block, or in an external JSON file named by a Speculation-Rules HTTP header. Two actions matter:

• Prefetch downloads the response body of the target document, but not its subresources. It is cheap, and the result is held in memory for the next navigation.
• Prerender loads and renders the whole page, including JavaScript and subresources, in an invisible tab. Activating it on click is near-instant, but it costs memory and bandwidth, so MDN advises using it sparingly. Prerendered URLs are also prefetched.

<script type="speculationrules">
{
  "prerender": [
    { "where": { "href_matches": "/pricing" }, "eagerness": "moderate" }
  ],
  "prefetch": [
    { "urls": ["/docs", "/blog"], "eagerness": "conservative" }
  ]
}
</script>

Rules come in two forms: a list of explicit urls, or document rules (where) that match links found in the page. The eagerness setting says when to start. Per MDN, immediate starts as soon as possible, eager on a slight sign of intent, moderate when a link is hovered or focused for a while, and conservative when the user starts to click. List rules default to immediate, document rules to conservative. If your site uses a Content Security Policy, inline rules need 'inline-speculation-rules' or a hash or nonce in script-src. To detect support, use HTMLScriptElement.supports("speculationrules").

Limits and rules

• Prerendering is restricted to same-origin pages by default. Cross-origin, same-site prerendering needs an opt-in from the target, and cross-site prerendering is not possible at this time (MDN).
• Cross-site prefetch only works if the user has no cookies set for the destination site.
• A non-2xx response (after redirects) prevents prefetch and prerender.
• Chrome keeps a prefetch for about five minutes, so speculation can serve slightly stale content.
• The browser may skip speculation entirely, for example under Save-Data, low battery with Energy Saver, or memory limits (developer.chrome.com).

How it relates to older hints

Speculation rules are meant to replace the Chrome-only, deprecated <link rel="prerender">. For whole-page prefetching MDN says they should be preferred over <link rel="prefetch"> where supported, while <link rel="prefetch"> is still needed for subresources. See resource prefetching and resource hints for those. Do not confuse browser prerendering with build-time prerendering, which generates static HTML ahead of the request on your side.

Common mistakes

• Speculating on URLs with side effects. Sign-out, add-to-cart, one-time codes and usage counters should not run on a speculative load. MDN suggests checking the Sec-Purpose header (prefetch or prefetch;prerender) and deferring the effect.
• Counting prerenders as visits. Analytics and ad impressions can fire on a page nobody saw. Defer them until activation using document.prerendering and the prerenderingchange event.
• Prerendering everything. Use conservative or moderate and prerender only pages with a high chance of being visited.
• Relying on it. Without Firefox or Safari support, the first click on those browsers is still a normal load.
• Forgetting the cache window. Content that must be fresh needs care, or Clear-Site-Data with prefetchCache or prerenderCache.

Speculative loading and performance testing

Speculation helps the next page, so it shows up as a faster navigation, often in Largest Contentful Paint, on pages that were speculated. A lab test that opens a URL cold will usually not benefit, so it measures the baseline you should still optimise. Keep that baseline healthy first. LoadFocus page speed monitoring runs Lighthouse audits from 25 cloud regions and tracks Core Web Vitals over time, and the free Core Web Vitals checker gives a quick snapshot. For the slow-page fundamentals, see how to fix slow-loading pages.

FAQ: Speculative Loading

Is the Speculation Rules API supported in all browsers?

No. MDN marks it experimental and not Baseline. Chrome and Edge support it, Firefox does not, and Safari has it behind a flag, according to Chrome's documentation. Use it as progressive enhancement.

What is the difference between prefetch and prerender?

Prefetch downloads the page's HTML only. Prerender loads and renders the whole page, including JavaScript, in a hidden tab so it can be shown instantly when the user clicks.

Does speculative loading cost anything?

Yes. Unused speculation wastes bandwidth, memory and CPU, for the visitor and for your server. Prerender only pages with a high likelihood of being visited.

Can it break my analytics?

It can, if your analytics fire on load. A prerendered page runs its scripts before the user sees it, so defer page-view tracking until activation.

Is it the same as lazy loading?

No. Lazy loading delays resources the current page may not need yet. Speculative loading fetches resources for a page the user may open next.