path: root/devdocs/html/element%2Fscript%2Ftype%2Fspeculationrules.html

<header><h1>&lt;script type="speculationrules"&gt;</h1></header><div class="section-content">
<p>The <code>speculationrules</code> value of the <a href="../type"><code>type</code></a> attribute of the <a href="../../script"><code>&lt;script&gt;</code> element</a> indicates that the body of the element contains speculation rules.</p> <p>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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculation Rules API</a>.</p>
</div>
<h2 id="syntax">Syntax</h2>
<div class="section-content">
<div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="zK3oMqc/hOPM1eUL89GSRRUVDukI2czSOTjnPpcQoC8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>speculationrules<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token comment">// JSON object defining rules</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> The <code>src</code>, <code>async</code>, <code>nomodule</code>, <code>defer</code>, <code>crossorigin</code>, <code>integrity</code>, and <code>referrerpolicy</code> attributes must not be specified.</p> </div>
</div>
<h3 id="exceptions">Exceptions</h3>
<div class="section-content"><dl> <dt id="typeerror"><a href="#typeerror"><code>TypeError</code></a></dt> <dd> <p>The speculation rules definition is not a valid JSON object.</p> </dd> </dl></div>
<h2 id="description">Description</h2>
<div class="section-content">
<p>A <code>&lt;script type="speculationrules"&gt;</code> element must contain a valid JSON structure that defines speculation rules. The following examples show separate prefetch and prerender rules:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="VmVycx3glwmo8CXpNM7qhoYwgPo0mPFaA39h//HyxNk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>speculationrules<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token punctuation">{</span>
    <span class="token string-property property">"prefetch"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span>
        <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next.html"</span><span class="token punctuation">,</span> <span class="token string">"next2.html"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token string-property property">"requires"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"anonymous-client-ip-when-cross-origin"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token string-property property">"referrer_policy"</span><span class="token operator">:</span> <span class="token string">"no-referrer"</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="zQcC+7sAVTtyJHJDnHLwUiL2r4Diamfytdi2F5yRZSU=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>speculationrules<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token punctuation">{</span>
    <span class="token string-property property">"prerender"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span>
        <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next3.html"</span><span class="token punctuation">,</span> <span class="token string">"next4.html"</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre>
</div>
</div>
<h3 id="speculation_rules_json_representation">Speculation rules JSON representation</h3>
<div class="section-content">
<p>The JSON structure contains one or more fields at the top level, each one representing an action to define speculation rules for. At present the supported actions are:</p> <dl> <dt id="prefetch">
<a href="#prefetch"><code>"prefetch"</code></a> <span class="badge inline optional">Optional</span>
</dt> <dd> <p>Rules for potential future navigations that should have their associated document response body downloaded, leading to significant performance improvements when those documents are navigated to. Note that none of the subresources referenced by the page are downloaded.</p> </dd> <dt id="prerender">
<a href="#prerender"><code>"prerender"</code></a> <span class="badge inline optional">Optional</span>
</dt> <dd> <p>Rules for potential future navigations that should have their associated documents fully downloaded, rendered, and loaded into an invisible tab. This includes loading all subresources, running all JavaScript, and even loading subresources and performing data fetches started by JavaScript. When those documents are navigated to, navigations will be instant, leading to major performance improvements.</p> </dd> </dl> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Consult the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculation Rules API</a> main page for full details on how to use prefetch and prerender effectively.</p> </div> <p>Each action field contains an array, which in turn contains one or more objects. Each object contains a single rule defining a set of URLs and related parameters.</p> <p>Specifically, each object can contain the following properties:</p> <dl> <dt id="source"><a href="#source"><code>"source"</code></a></dt> <dd> <p>A string representing the source of the URLs to which the rule applies. Possible values are:</p> <dl> <dt id="list"><a href="#list"><code>"list"</code></a></dt> <dd> <p>Denotes that the URLs will come from a specific list.</p> </dd> </dl> </dd> <dt id="urls"><a href="#urls"><code>"urls"</code></a></dt> <dd> <p>An array of strings representing the list of URLs to apply the rule to. These can be absolute or relative URLs. Relative URLs will be parsed relative to the document base URL (if inline in a document) or relative to the external resource URL (if externally fetched).</p> </dd> <dt id="requires">
<a href="#requires"><code>"requires"</code></a> <span class="badge inline optional">Optional</span>
</dt> <dd> <p>An array of strings representing capabilities of the browser parsing the rule, which must be available if the rule is to be applied to the specified URLs.</p> <div class="notecard warning" id="sect3"> <p><strong>Warning:</strong> Prefetches will automatically fail in browsers that cannot meet a specified requirement, even if they support the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculation Rules API</a>.</p> </div> <p>Possible values are:</p> <dl> <dt id="anonymous-client-ip-when-cross-origin"><a href="#anonymous-client-ip-when-cross-origin"><code>"anonymous-client-ip-when-cross-origin"</code></a></dt> <dd> <p><code>"prefetch"</code>-only. Specifies that the rule matches only if the user agent can prevent the client IP address from being visible to the origin server if a cross-origin prefetch request is issued. Exactly how this works is dependent on browser implementation specifics. For example:</p> <ul> <li>Chrome's implementation hides the IP address using a Google-owned proxy, therefore by default it only works for Google-controlled referrers (since in that case, sending the URLs of the destination to Google is not an additional privacy leak). When used on a non-Google-owned site, rules that include this will only match for users that turn on "Enhanced preloading" in <code>chrome://settings/preloading</code>.</li> <li>Other Chromium-based browsers will have to provide their own solutions. Thorough testing in all target browsers is advised.</li> <li>A future Safari implementation may possibly use something along the lines of <a href="https://support.apple.com/en-us/102602" target="_blank">iCloud Private Relay</a>.</li> <li>A future Firefox implementation might use something based on the <a href="https://www.mozilla.org/en-US/products/vpn/" target="_blank">Mozilla VPN</a> product.</li> </ul> </dd> </dl> </dd> <dt id="referrer_policy">
<a href="#referrer_policy"><code>"referrer_policy"</code></a> <span class="badge inline optional">Optional</span>
</dt> <dd> <p>A string representing a specific referrer policy string to use when requesting the URLs specified in the rule — see <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy"><code>Referrer-Policy</code></a> for possible values. The purpose of this is to allow the referring page to set a stricter policy specifically for the speculative request than the policy the page already has set (either by default, or by using <code>Referrer-Policy</code>). A laxer policy set in the speculation rules will not override a stricter policy set on the referring page.</p> </dd> </dl> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> As speculation rules use a <code>&lt;script&gt;</code> element, they need to be explicitly allowed in the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy"><code>Content-Security-Policy</code></a> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src"><code>script-src</code></a> directive if the site includes it. This is done by adding the <code>"inline-speculation-rules"</code> value along with a hash- or nonce-source.</p> </div>
</div>
<h3 id="further_examples">Further examples</h3>
<div class="section-content">
<p>The earlier examples showed separate speculation rules defined for prefetch and prerender. It is possible to define both in a single set of rules:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="XQLMQk1Wy5Es9L2gGnvmAqI+aJFpdaO6bjV9RNfcBV0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>speculationrules<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token punctuation">{</span>
    <span class="token string-property property">"prefetch"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span>
        <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next.html"</span><span class="token punctuation">,</span> <span class="token string">"next2.html"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token string-property property">"requires"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"anonymous-client-ip-when-cross-origin"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token string-property property">"referrer_policy"</span><span class="token operator">:</span> <span class="token string">"no-referrer"</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string-property property">"prerender"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span>
        <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next3.html"</span><span class="token punctuation">,</span> <span class="token string">"next4.html"</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <p>It is also allowable to include multiple sets of rules in a single HTML file:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="Pg4RVArtAyIMM4Z6Y/1aMTpaJdpevqJFefO8WK/sSRE=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>speculationrules<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token punctuation">{</span>
    <span class="token string-property property">"prefetch"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span>
        <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next.html"</span><span class="token punctuation">,</span> <span class="token string">"next2.html"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token string-property property">"requires"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"anonymous-client-ip-when-cross-origin"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token string-property property">"referrer_policy"</span><span class="token operator">:</span> <span class="token string">"no-referrer"</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>speculationrules<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token punctuation">{</span>
    <span class="token string-property property">"prerender"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span>
        <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"next3.html"</span><span class="token punctuation">,</span> <span class="token string">"next4.html"</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <p>And multiple rules in a single result set:</p> <div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="tO3gB1szyLU8jsyGnCwE7Kmw2UU1X3DEQiRGup6kRvs=" data-language="js"><span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">"speculationrules"</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span>
  <span class="token string-property property">"prerender"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span>
      <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"one.html"</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token string-property property">"source"</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span>
      <span class="token string-property property">"urls"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"two.html"</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</pre>
</div>
</div>
<h3 id="dynamic_rule_insertion">Dynamic rule insertion</h3>
<div class="section-content">
<p>Below is an example that feature detects speculation rules and, if supported, dynamically adds a prerender speculation rule via JavaScript:</p> <div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="sdB13bsfUeQBgdHuWzH1JazQ37sHWTsS1vXwI/XVL3c=" data-language="js"><span class="token keyword">if</span> <span class="token punctuation">(</span>
  HTMLScriptElement<span class="token punctuation">.</span>supports <span class="token operator">&amp;&amp;</span>
  HTMLScriptElement<span class="token punctuation">.</span><span class="token function">supports</span><span class="token punctuation">(</span><span class="token string">"speculationrules"</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> specScript <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"script"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  specScript<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">"speculationrules"</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> specRules <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">prerender</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token string">"list"</span><span class="token punctuation">,</span>
        <span class="token literal-property property">urls</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"/next.html"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  specScript<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>specRules<span class="token punctuation">)</span><span class="token punctuation">;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"added speculation rules to: next.html"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>specScript<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div> <p>You can see this in action in this <a href="https://prerender-demos.glitch.me/" target="_blank">prerender demos</a> page.</p>
</div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://wicg.github.io/nav-speculation/speculation-rules.html#speculation-rules-script">Speculation Rules <br><small># speculation-rules-script</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>speculationrules</code></th>
<td class="bc-supports-yes">109<details><summary>105</summary>Initial support included same-origin prerendering only.</details>
</td>
<td class="bc-supports-yes">109<details><summary>105</summary>Initial support included same-origin prerendering only.</details>
</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">95<details><summary>91</summary>Initial support included same-origin prerendering only.</details>
</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">109<details><summary>103</summary>Initial support included same-origin prerendering only.</details>
</td>
<td class="bc-supports-yes">109<details><summary>103</summary>Initial support included same-origin prerendering only.</details>
</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">74<details><summary>71</summary>Initial support included same-origin prerendering only.</details>
</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">21.0<details><summary>20.0</summary>Initial support included same-origin prerendering only.</details>
</td>
</tr>
<tr>
<th><code>prefetch</code></th>
<td class="bc-supports-yes">110</td>
<td class="bc-supports-yes">110</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">96</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">103</td>
<td class="bc-supports-yes">103</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">71</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">20.0</td>
</tr>
<tr>
<th><code>referrer_policy</code></th>
<td class="bc-supports-yes">111</td>
<td class="bc-supports-yes">111</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">97</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">111</td>
<td class="bc-supports-yes">111</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">22.0</td>
</tr>
<tr>
<th><code>requires</code></th>
<td class="bc-supports-yes">110</td>
<td class="bc-supports-yes">110</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">96</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">103</td>
<td class="bc-supports-yes">103</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">71</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">20.0</td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li>
<a href="https://developer.chrome.com/blog/prerender-pages/" target="_blank">Prerender pages in Chrome for instant page navigations</a> on developer.chrome.com (2023)</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading">Speculative loading</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculation Rules API</a></li> </ul></div><div class="_attribution">
  <p class="_attribution-p">
    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/speculationrules" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/speculationrules</a>
  </p>
</div>