Prefetch
A resource hint (<link rel="prefetch">) telling the browser to fetch a resource in the background for the next navigation. Low priority—only uses idle bandwidth. Useful for preloading the next page's critical assets.
Full Explanation
Prefetch says: "The user will probably need this resource on the next page, so grab it now while we have idle bandwidth." The browser downloads the resource at the lowest priority and stores it in its HTTP cache. When the user navigates to the next page and that resource is needed, it loads instantly from cache.
For CDN-powered sites, prefetch is a way to make navigations feel instant. If your analytics show that 70% of users go from the landing page to the pricing page, you can prefetch the pricing page's hero image and CSS while they're still reading the landing page.
Important distinctions: prefetch is for the next navigation (low priority, idle time only). preload is for the current page (high priority, immediate). Don't confuse them—preloading next-page resources wastes bandwidth and delays current-page rendering. Prefetching current-page resources is too late.
Examples
HTML prefetch hints:
<head>
<!-- Prefetch next page's resources during idle time -->
<link rel="prefetch" href="/pricing">
<link rel="prefetch" href="/static/pricing-hero.avif">
<!-- Compare: preload for CURRENT page (high priority) -->
<link rel="preload" href="/static/hero.avif" as="image">
</head>Dynamic prefetch based on user behavior:
// Prefetch on hover (high intent signal)
document.querySelectorAll('a[data-prefetch]').forEach(link => {
link.addEventListener('mouseenter', () => {
const prefetchLink = document.createElement('link');
prefetchLink.rel = 'prefetch';
prefetchLink.href = link.href;
document.head.appendChild(prefetchLink);
}, { once: true });
});
// Or use Speculation Rules API (Chrome 109+)
<script type="speculationrules">
{"prefetch": [{"where": {"href_matches": "/pricing/*"}}]}
</script>Video Explanation
Frequently Asked Questions
A resource hint (<link rel="prefetch">) telling the browser to fetch a resource in the background for the next navigation. Low priority—only uses idle bandwidth. Useful for preloading the next page's critical assets.
HTML prefetch hints:
<head>
<!-- Prefetch next page's resources during idle time -->
<link rel="prefetch" href="/pricing">
<link rel="prefetch" href="/static/pricing-hero.avif">
<!-- Compare: preload for CURRENT page (high priority) -->
<link rel="preload" href="/static/hero.avif" as="image">
</head>Dynamic prefetch based on user behavior:
// Prefetch on hover (high intent signal)
document.querySelectorAll('a[data-prefetch]').forEach(link => {
link.addEventListener('mouseenter', () => {
const prefetchLink = document.createElement('link');
prefetchLink.rel = 'prefetch';
prefetchLink.href = link.href;
document.head.appendChild(prefetchLink);
}, { once: true });
});
// Or use Speculation Rules API (Chrome 109+)
<script type="speculationrules">
{"prefetch": [{"where": {"href_matches": "/pricing/*"}}]}
</script>Related CDN concepts include:
- Preconnect — A resource hint (<link rel="preconnect">) that tells the browser to establish a connection (DNS + …