Speculation rules | Frontend Practical Guide

Limited supportUse with care and provide a fallback when broad support matters.

Overview

Speculation rules are hints to the browser to proactively download pages in the background so they appear instantly when the user navigates to them. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`api.Document.prerendering` Experimental	108	108			108
DOM API
`prerenderingchange_event` Experimental The prerenderingchange event is fired on a prerendered document when it is activated (i.e., the user views the page).	108	108			108
`activationStart` Experimental The activationStart read-only property represents the time between when a document starts prerendering and when it is activated.	108	108			57
`destination (speculationrules)` Experimental `speculationrules` value	121	121		26.2	121	26.2
Other
`html.elements.script.type.speculationrules` Experimental The speculationrules value of the type attribute of the element indicates that the body of the element contains speculation rules.	109	109		26.2	109	26.2
`html.elements.script.type.speculationrules.eagerness` Experimental `eagerness` key	121	121		26.2	121	26.2
`html.elements.script.type.speculationrules.expects_no_vary_search` Experimental `expects_no_vary_search` key	127	127			127
`html.elements.script.type.speculationrules.prefetch` Experimental `prefetch` key	110	110		26.2	103	26.2
`html.elements.script.type.speculationrules.prerender` Experimental `prerender` key	105	105			103
`html.elements.script.type.speculationrules.referrer_policy` Experimental `referrer_policy` key	111	111		26.2	111	26.2
`html.elements.script.type.speculationrules.relative_to` Experimental `relative_to` key	121	121		26.2	121	26.2
`html.elements.script.type.speculationrules.requires` Experimental `requires` key	110	110			103
`html.elements.script.type.speculationrules.requires.anonymous-client-ip-when-cross-origin` Experimental `anonymous-client-ip-when-cross-origin` value	110				103
`html.elements.script.type.speculationrules.source_optional` Experimental `source` key is optional	122	122		26.2	122	26.2
`html.elements.script.type.speculationrules.tag` Experimental `tag` key	136	136		26.2	136	26.2
`html.elements.script.type.speculationrules.target_hint` Experimental `target_hint` key	138	138			138
`html.elements.script.type.speculationrules.urls` Experimental `urls` key	109	109		26.2	103	26.2
`html.elements.script.type.speculationrules.where` Experimental `where` key	121	121		26.2	121	26.2
`http.headers.Content-Security-Policy.script-src.inline-speculation-rules` Experimental `inline-speculation-rules` source expression	110	110		26.2	110	26.2
`http.headers.Sec-Purpose.speculationrules` Experimental `Sec-Purpose` for `<script type="speculationrules">` prefetch	110	110		26.2	110	26.2
`http.headers.Sec-Speculation-Tags` Experimental The HTTP Sec-Speculation-Tags request header contains one or more tag values from the speculation rules that resulted in the speculation. This allows a server to identify which rule(s) caused a speculation and potentially block them.	136	136		26.2	136	26.2
`http.headers.Speculation-Rules` Experimental The HTTP Speculation-Rules response header provides one or more URLs pointing to text resources containing speculation rule JSON definitions. When the response is an HTML document, these rules will be added to the document's speculation rule set. See the Speculation Rules API for more information.	121	121		26.2	121	26.2
`http.headers.Supports-Loading-Mode` Experimental The HTTP Supports-Loading-Mode response header allows a response to opt-in to being loaded in a novel, higher-risk context that it would otherwise fail to be loaded in.	109	109			109
`http.headers.Supports-Loading-Mode.credentialed-prerender` Experimental `credentialed-prerender` directive	109	109			109
`http.headers.Supports-Loading-Mode.fenced-frame` Experimental `fenced-frame` directive	117	117			117

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

HTML

<script type="speculationrules">
{
  "prerender": [{ "where": { "href_matches": "/articles/*" } }],
  "prefetch": [{ "urls": ["/next-page"] }]
}
</script>

Live demo

Speculation strategy

Show how rules can tell the browser which navigations are good candidates for prefetch or prerender.

PreviewFullscreen

Where it helps

Speculation rules work best on predictable navigation paths such as search results or article lists.

PreviewFullscreen

Guardrails

Speculative loading consumes bandwidth and memory, so use it selectively.

PreviewFullscreen

Use cases

Control document behavior
Use Speculation rules to influence loading, metadata, or script behavior at the document level.
Tune performance strategy
Apply Speculation rules when earlier resource hints or document settings improve startup or runtime behavior.

Cautions

Test Speculation rules in your target browsers and input environments before depending on it as a primary behavior.
Provide a fallback path or acceptable degradation strategy when support is still limited.

Overview

Browser support

Syntax

Live demo

Speculation strategy

Where it helps

Guardrails

Use cases

Control document behavior

Tune performance strategy

Cautions

Accessibility

Related links