Theprefetch keyword for therel attribute of the<link> 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.<link rel="prefetch"> is used for same-site navigation resources, or for subresources used by same-site pages.

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 certainCache-Control headers could block prefetching (for exampleno-cache orno-store).

<link rel="prefetch"> is functionally equivalent to afetch() call with apriority: "low" option set on it, except that the former will generally have an even lower priority, and it will have aSec-Purpose: prefetch header set on the request. Note that in general browsers will give prefetch resources a lower priority than preload ones (e.g., requested via<link rel="preload">) — the current page is more important than the next.

The fetch request for aprefetch operation results in an HTTP request that includes the HTTP headerSec-Purpose: prefetch. A server might use this header to change the cache timeouts for the resources, or perform other special handling.The request will also include theSec-Fetch-Dest header with the value set toempty.

TheAccept 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.

This page was last modified onJul 9, 2025 byMDN contributors.