Prefetch Versus Preload
Prefetch speculatively fetches resources for likely future navigations at low priority, while preload urgently fetches resources the current page certainly needs; confusing them wastes bandwidth.
Definition
Prefetch is a low-priority, speculative fetch for a resource or document the user may need next, such as the next page in a flow or a fragment a route will request. Preload is a high-priority fetch for the current navigation. Speculation rules extend the idea to full page prerendering.
Context and scope
Used on multi-step flows where the next URL is predictable, on links the user is likely to click, and for warming caches for probable navigations without delaying the current page.
Common misconceptions
- Prefetching guarantees the next navigation is instant — it only warms the cache and still needs cache hits to help
- Prefetch hides all cost — every prefetched byte is bandwidth spent on pages the user may never visit
- Prefetched resources are high priority — browsers deliberately schedule them after urgent work
Anti-patterns
- Prefetching an entire sitemap of candidate pages and calling it optimization
- Using prefetch for the hero image of the current page instead of preload
- Prefetching personalized endpoints that cache badly and return stale data on navigation
Related concepts
Related examples
Authoritative source
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prefetch
What it is
Link prefetch asks the browser to fetch a resource when the connection is otherwise idle, marking it low priority so it never competes with the current page. Preload is the opposite contract: fetch now, this navigation needs it. Choosing the wrong one either starves the current page or wastes idle capacity.
How it works
The browser stores prefetched responses in the HTTP cache subject to their cache headers, and later navigations reuse them only if freshness rules allow. Speculation rules generalize prefetch by listing URLs plus eagerness levels, letting the browser decide how aggressively to fetch or prerender. Analytics can observe which speculation actually fired.
When to use it
Prefetch pays off when the next destination is predictable: pagination, checkout step two, or the most common link from a landing page. It is cheap when traffic is metered carefully and harmful when every candidate is prefetched. Keep prefetches to a handful of high-probability targets.
Pitfalls
Prefetched responses with no-store or short TTLs are wasted bytes. Prefetching authenticated API endpoints can leak cross-session state if cache keys ignore credentials. Measure navigation start times and cache hit rates for prefetched URLs before and after enabling hints.