Web APIs, todayLab · Alex Harto

Speculation Rules

Pages that open instantly because the browser prepares them before the click.

In your browser: checking…Reviewed 1 Oct 2026

A <script type="speculationrules"> block (or the Speculation-Rules header) says which links to prefetch or fully prerender in the background, and how early: immediate, eager, moderate (on desktop, 200 ms hover or pointer down; on mobile, viewport heuristics) or conservative (pointer down).

Chromium only: Chrome and Edge since 109 (document rules and eagerness since 121). Safari 26.2 has prefetch behind a flag and Firefox does not implement it. It is a progressive enhancement: where unsupported, links load as usual.

What it is for

  • Having the next step of a checkout ready
  • Instant navigation on content sites
  • Prerendering the most likely search result

Demo

This page asks to prerender destination A as soon as it loads. B loads normally. Open both and compare: the destination page tells you whether it was prerendered.

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": [
        "/en/speculation-rules/destination-a/"
      ],
      "eagerness": "immediate"
    }
  ]
}
</script>

Browser support

Limited availability
FeatureDesktopMobile
ChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
<script type="speculationrules">109Chrome: 109 109Edge: 109 —Firefox: No26.2flagSafari: 26.2 flag109Chrome: 109 —Firefox: No26.2flagSafari: 26.2 flag
prerender105Chrome: 105 105Edge: 105 —Firefox: No—Safari: No103Chrome: 103 —Firefox: No—Safari: No
prefetch110Chrome: 110 110Edge: 110 —Firefox: No26.2flagSafari: 26.2 flag103Chrome: 103 —Firefox: No26.2flagSafari: 26.2 flag

Compatibility generated on every deploy from MDN browser-compat-data 8.1.3 (24 Sep 2026) · web-features 3.40.0 · checked by hand: 1 Oct 2026

Minimal code

<!doctype html>
<meta charset="utf-8">
<title>Speculation Rules · ejemplo mínimo</title>
<!-- Prerenderiza los enlaces de esta web al pasar el ratón (200 ms) o al empezar a pulsar.
     Chromium 109+. Sírvelo por HTTP (npx serve .). -->
<script type="speculationrules">
{
  "prerender": [{
    "source": "document",
    "where": { "and": [
      { "href_matches": "/*" },
      { "not": { "selector_matches": "[data-no-prerender]" } }
    ] },
    "eagerness": "moderate"
  }]
}
</script>
<p>Soporte: <b id="support"></b></p>
<p><a href="destino.html">Ir al destino (se prerenderiza)</a></p>
<p><a href="destino.html?x" data-no-prerender>Ir al destino sin prerenderizar</a></p>
<script>
  document.querySelector('#support').textContent =
    HTMLScriptElement.supports?.('speculationrules') ? 'sí' : 'no (los enlaces cargan de forma normal)';
</script>

What’s new

  1. Chrome 152: origin trial to tune the viewport heuristics.
  2. Chrome 151: form_submission field to prerender form submissions.
  3. prerender_until_script, in origin trial since Chrome 144.
  4. Safari 26.2 adds prefetch behind a flag (SpeculationRules prefetch).

Keep in mind

  1. Never speculate on URLs that change state (log out, cart).
  2. Do not count visits while document.prerendering is true; wait for prerenderingchange.
  3. Inline rules need 'inline-speculation-rules' in the CSP; via the header, serve the JSON as application/speculationrules+json.

Further reading

Sources