Prefetch is a browser hint that requests resources for anticipated future navigations. Using link rel="prefetch", you tell the browser to download and files that users will probably need next, such as the and JavaScript for the next page in a checkout flow.
How Prefetch Works
The browser downloads prefetched resources with low priority during idle time, storing them in cache for later use. When users navigate to a page requiring those resources, the files load instantly from cache instead of requiring new network requests.
Unlike , prefetch is a suggestion rather than a command. Browsers can skip prefetching on slow connections or when bandwidth is limited. This prevents prefetch from competing with resources needed for the current page.
When to Use Prefetch
Prefetch works best when you can predict user behavior. Common use cases include prefetching product page assets from category pages, checkout step resources when users add items to cart, or next-article assets on content sites.
For e-commerce sites where 40% of users navigate from homepage to product pages, prefetching product page resources during homepage idle time speeds up that transition.
Prefetch vs Preload
Prefetch downloads resources for future pages with low priority. Preload downloads resources needed immediately on the current page with high priority. Use preload for critical current-page resources like fonts or hero images. Use prefetch for resources needed after navigation.
Browser Support
Chrome, Firefox, and Edge support prefetch. Safari does not currently implement prefetch, so users on Safari will not benefit from this optimization. Always ensure pages work correctly without prefetched resources.
