Prefetching
Definition
Loading resources for pages users are likely to visit next, making subsequent navigation feel instant.
What is Prefetching?
Prefetching downloads resources that will likely be needed for future navigation – the next page a user might visit. While preloading prioritises resources for the current page, prefetching prepares for what comes next.
When done well, clicking a link loads instantly because resources were already downloaded in the background.
Why Prefetching Matters
Instant Navigation
Pages that are prefetched load dramatically faster, often appearing instant.
Improved User Experience
Users experience your site as fast and responsive across multiple page views.
Competitive Advantage
Most sites don't prefetch. Those that do feel noticeably faster.
Anticipatory Loading
The browser works during idle time, preparing for likely user actions.
Types of Prefetching
Link Prefetch
Download resources for a linked page:
<link rel="prefetch" href="/about-page.html">
DNS Prefetch
Resolve domain names in advance for external resources:
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
Preconnect
Establish connections (DNS, TCP, TLS) to origins before needed:
<link rel="preconnect" href="https://api.example.com">
Smart Prefetching Strategies
Hover Prefetch
Start prefetching when users hover over links – they often click next.
Visible Link Prefetch
Prefetch pages for links currently visible in the viewport.
Predictive Prefetch
Use analytics to identify likely next pages and prefetch them.
Idle Time Prefetch
Wait until the browser is idle before prefetching, avoiding interference with current page loading.
What to Prefetch
Good Candidates
- Common next pages (products after category, checkout after cart)
- Links users hover over
- Navigation items likely to be clicked
- Next page in a sequence
Avoid Prefetching
- Rarely visited pages
- Large resources on mobile
- Pages requiring authentication
- Everything (wastes bandwidth)
Libraries and Tools
- Quicklink – Prefetches links in viewport during idle time
- Instant.page – Prefetches on hover/touch
- Next.js – Built-in prefetching for links
- Gatsby – Automatic prefetching of linked pages
Considerations
Data Usage
Prefetching uses bandwidth. Be mindful on mobile and respect data-saver preferences.
Accuracy
Prefetching the wrong pages wastes resources. Base decisions on actual user behaviour.
Server Load
Prefetching increases requests. Ensure your server can handle additional load.