Prefetching Next Page Resources for Navigation

Prefetching for Next Page Navigation

<link rel="prefetch"> downloads resources that will be needed on the next page the user is likely to visit. Unlike preload (which is for the current page), prefetch uses idle network time and does not compete with critical resources.

How Prefetch Works

1. The browser downloads prefetched resources with the lowest priority
2. Resources are stored in the HTTP cache (not the preload cache)
3. When the user navigates to the next page, the cached resources load instantly
4. If the user does not navigate, the resources are simply cached for later use

Common Patterns

Prefetch the Next Page HTML

<!-- On a blog listing page, prefetch the most popular article -->
<link rel="prefetch" href="/blog/popular-post" as="document" />

Prefetch JavaScript Bundles

<!-- On the product page, prefetch the checkout bundle -->
<link rel="prefetch" href="/js/checkout.js" as="script" />
<link rel="prefetch" href="/css/checkout.css" as="style" />

Prefetch on Hover or Focus

For more targeted prefetching, you can add prefetch hints dynamically:

document.querySelectorAll('a[data-prefetch]').forEach(link => {
  link.addEventListener('mouseenter', () => {
    const hint = document.createElement('link');
    hint.rel = 'prefetch';
    hint.href = link.href;
    hint.as = 'document';
    document.head.appendChild(hint);
  }, { once: true });
});

This pattern prefetches the page only when the user hovers over a link, balancing performance with bandwidth efficiency.

Prefetch vs Prerender

prefetch downloads the resource but does not process it. For even faster navigation, some browsers support <link rel="prerender"> or the newer Speculation Rules API, which actually renders the page in the background:

<script type="speculationrules">
{
  "prefetch": [
    { "source": "list", "urls": ["/next-page"] }
  ]
}
</script>

Best Practices

1. Only prefetch likely destinations — analyze your analytics to determine the most common next pages
2. Limit to 2-3 resources — prefetching too many wastes bandwidth, especially on mobile
3. Respect Data Saver mode — check navigator.connection.saveData before prefetching
4. Use as attribute — helps the browser cache the resource with the correct type
5. Do not prefetch on slow connections — check navigator.connection.effectiveType