path: root/devdocs/html/attributes%2Frel%2Fprefetch.html

<header><h1>rel=prefetch</h1></header><div class="section-content">
<p>The <code>prefetch</code> keyword for the <a href="../../element/link#rel"><code>rel</code></a> attribute of the <a href="../../element/link"><code>&lt;link&gt;</code></a> element provides a hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource. <code>&lt;link rel="prefetch"&gt;</code> is used for same-site navigation resources, or for subresources used by same-site pages.</p> <p>The result is kept in the HTTP cache on disk. Because of this it is useful for prefetching subresources, even if they are not used by the current page. You could also use it to prefetch the next document the user will likely visit on the site. However, as a result you need to be careful with headers — for example certain <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control">Cache-Control</a> headers could block prefetching (for example <code>no-cache</code> or <code>no-store</code>).</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Because of such limitations, you are advised to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API">Speculation Rules API</a> for document prefetches instead, where it is supported.</p> </div> <p><code>&lt;link rel="prefetch"&gt;</code> is functionally equivalent to a <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch"><code>fetch()</code></a> call with a <code>priority: "low"</code> option set on it, except that the former will generally have an even lower priority, and it will have a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Purpose"><code>Sec-Purpose: prefetch</code></a> header set on the request. Note that in general browsers will give prefetch resources a lower priority than preload ones (e.g. requested via <a href="preload"><code>&lt;link rel="preload"&gt;</code></a>) — the current page is more important than the next.</p> <p> The fetch request for a <code>prefetch</code> operation results in an HTTP request that includes the HTTP header <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Purpose"><code>Sec-Purpose: prefetch</code></a>. A server might use this header to change the cache timeouts for the resources, or perform other special handling. The request will also include the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Dest"><code>Sec-Fetch-Dest</code></a> header with the value set to <code>empty</code>. </p> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept"><code>Accept</code></a> header in the request will match the value used for normal navigation requests. This allows the browser to find the matching cached resources following navigation.</p>
</div>
<h2 id="examples">Examples</h2>

<h3 id="basic_prefetch">Basic prefetch</h3>
<div class="section-content"><div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="/Ls6GUDrZudPYrLMOVKY6i48azjtXl/o2EA9LWcB48M=" data-language="js"><span class="token operator">&lt;</span>link rel<span class="token operator">=</span><span class="token string">"prefetch"</span> href<span class="token operator">=</span><span class="token string">"main.js"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
</pre>
</div></div>
<h3 id="navigation_and_subresource_prefetches">Navigation and subresource prefetches</h3>
<div class="section-content">
<p>Prefetching can be used to fetch both HTML and sub-resources for a possible next navigation. A common use case is to have a simple website landing page that fetches more "heavy-weight" resources used by the rest of the site.</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="TaeRr673Zj/f8zwm7QcpH9HYpbmTpfssHCh+GFXapCM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/app/style.css<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/landing-page<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div>
</div>
<h3 id="the_effects_of_cache_partitioning">The effects of cache partitioning</h3>
<div class="section-content">
<p>Many browsers now implement some form of <a href="https://developer.chrome.com/en/blog/http-cache-partitioning/" target="_blank">cache partitioning</a>, which makes <code>&lt;link rel="prefetch"&gt;</code> useless for resources intended for use by different top-level sites. This includes the main document when navigating cross-site. So, for example, the following prefetch:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="W3qTXzhHDj8cM+de/m5U+GiVkGsG4FTStsGJRVmJlPo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefetch<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://news.example/article<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div> <p>Would not be accessible from <code>https://aggregator.example/</code>.</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://html.spec.whatwg.org/multipage/links.html#link-type-prefetch">HTML Standard <br><small># link-type-prefetch</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>prefetch</code></th>
<td class="bc-supports-yes"><details><summary>8</summary>Requires secure context</details></td>
<td class="bc-supports-yes"><details><summary>12</summary>Requires secure context</details></td>
<td class="bc-supports-yes"><details><summary>2</summary>Requires secure context</details></td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes"><details><summary>15</summary>Requires secure context</details></td>
<td class="bc-supports-yes">13.1</td>
<td class="bc-supports-yes"><details><summary>4.4</summary>Requires secure context</details></td>
<td class="bc-supports-yes"><details><summary>18</summary>Requires secure context</details></td>
<td class="bc-supports-yes"><details><summary>4</summary>Requires secure context</details></td>
<td class="bc-supports-yes"><details><summary>14</summary>Requires secure context</details></td>
<td class="bc-supports-yes">13.4</td>
<td class="bc-supports-yes"><details><summary>1.5</summary>Requires secure context</details></td>
</tr></tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li>
<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading">Speculative loading</a> for a comparison of <code>&lt;link rel="prefetch"&gt;</code> and other similar performance improvement features.</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/Attributes/rel/prefetch" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prefetch</a>
  </p>
</div>