<link rel="prefetch">
The rel="prefetch" attribute for the <link> HTML element is a hint to the browser that the user is likely to navigate to a resource, so the browser should preemptively fetch and cache the resource. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The rel="prefetch" attribute for the <link> HTML element is a hint to the browser that the user is likely to navigate to a resource, so the browser should preemptively fetch and cache the resource. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 110 | 110 | 115 | | 110 | | |
| DOM API | ||||||
deliveryType (navigational-prefetch) Experimental Non-standard `deliveryType="navigational-prefetch"` | 117 | 117 | | | 117 | |
| Other | ||||||
| The prefetch keyword for the rel 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. is used for same-site navigation resources, or for subresources used by… | 8 | 12 | 2 | 13.1 | 18 | 13.4 |
http.headers.Sec-Purpose.prefetch `Sec-Purpose` for `<link rel="prefetch">` prefetch | | | 115 | | | |
- Requires secure context
- Requires secure context
- Requires secure context
- Requires an experimental browser flag to be enabled
- Requires secure context
- Requires an experimental browser flag to be enabled
- Doesn't support `Sec-Purpose` for `<link rel="prefetch">`. In Chrome, the legacy `Purpose: prefetch` header is used to indicate a `link` request is a prefetch. See bug 40236973.
- Doesn't support `Sec-Purpose` for `<link rel="prefetch">`. In Edge, the legacy `Purpose: prefetch` header is used to indicate a `link` request is a prefetch. See bug 40236973.
- `Sec-Purpose: prefetch` replaces the non-standard `X-moz: prefetch` header that was used to indicate a `link` prefetch request in earlier versions.
- Prefetch requests should also include the header `Accept` header string for navigations, but `Accept: */*` is sent instead.
- Doesn't support `Sec-Purpose` for `<link rel="prefetch">`. In Chrome Android, the legacy `Purpose: prefetch` header is used to indicate a `link` request is a prefetch. See bug 40236973.
Syntax
<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/js/page2.js" as="script">Live demo
Prefetch idea
Explain how prefetch prepares likely future navigations or assets at a lower priority.
Good candidates
Prefetch is best for likely future work rather than the current critical path.
Prefetch vs preload
Compare speculative future loading with urgent current-page fetching.
Use cases
Control document behavior
Use <link rel="prefetch"> to influence loading, metadata, or script behavior at the document level.
Tune performance strategy
Apply <link rel="prefetch"> when earlier resource hints or document settings improve startup or runtime behavior.
Cautions
- Test <link rel="prefetch"> 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.
Accessibility
- Make sure <link rel="prefetch"> supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features