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

Speculation rules

Experimental: This is an experimental technology

Check the Browser compatibility table carefully before using this in production.

The speculationrules value of the type attribute of the <script> element indicates that the body of the element contains speculation rules.

Speculation rules take the form of a JSON structure that determine what resources should be prefetched or prerendered by the browser. This is part of the Speculation Rules API.

Note: Speculation rules can be defined inside external text files referenced by the Speculation-Rules HTTP header, using the same JSON representation provided below. Specifying an HTTP header is useful in cases where developers are not able to directly modify the document itself.

Metadata and scripts

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`http.headers.Speculation-Rules` Experimental	121	121		26.2	121	26.2
DOM API
`prerendering` Experimental The prerendering read-only property of the Document interface returns true if the document is currently in the process of prerendering, as initiated via the Speculation Rules API.	108	108			108
`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.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.

Browser support

Syntax

Live demo

Speculation strategy

Where it helps

Guardrails

Use cases

Control document behavior

Tune performance strategy

Cautions

Accessibility

Related links