Frontend Performance/Loading Less, Sooner
Lesson 15 of 20 · Episode 15

Resource Hints — prefetch

Fetch what the user will probably need next during idle time, so the next navigation feels instant.

prefetchNext navigationIdle
Watch on YouTube ↗

preload fetches what this page needs. prefetch fetches what the next page will probably need. It's a bet: download a likely-soon resource at low priority during idle time and cache it, so when the user navigates, it's already there and the transition feels instant.

The distinction

prefetch vs preload

They share the “pre” but aim at different moments. preload is high-priority and for the current navigation — “I need this now, get it early.” prefetch is low-priority and speculative — “the user will probably need this next, grab it while we're idle.” Prefetch never competes with the resources the current page actually needs.

See it

Instant navigation

The classic trick: prefetch the next page's bundle on hover. There's a 40–400 ms gap between hovering a link and actually clicking it — plenty of time to download in the background. Hover the button (don't click yet), then click and feel the difference:

InteractivePrefetch on hover → instant click
chunk: pricing.js · 62 KB — not loaded
Hover the button (don't click yet) — the next page's bundle downloads during the 40–400ms before you'd actually click. Then click.
With prefetch on, hovering downloads pricing.js into cache; the click is instant. With it off, the click pays the full cold load.
In code

How to declare it

Like the others, prefetch is a <link> (or HTTP header), and bundlers can emit it for you:

prefetch the next route's chunk
<!-- Plain HTML -->
<link rel="prefetch" href="/pricing.js" as="script">

// Webpack magic comment — emits a low-priority <link rel="prefetch">
import(/* webpackPrefetch: true */ "./routes/Pricing");
Frameworks do this automatically
Next.js prefetches the JS for any <Link> in the viewport; many routers prefetch on hover. You often get prefetching for free — the value is understanding the trade-off so you can tune it.
The cost

The trade-off

Prefetch is a guess. Guess right and navigation feels instant; guess wrong and you've burned the user's data and battery downloading something they never used. On a metered mobile connection that's rude. So the whole game is accuracy vs. overhead: how confident are you they'll go there?

Pick your bet

Prediction strategies

Different strategies trade accuracy against how much they download. From crude to clever:

InteractiveAccuracy vs. network overhead
Prefetch all
Accuracy
100%
Network overhead
95%
Fetch every link. Perfect hit rate, brutal on the network.
Quicklink
Accuracy
70%
Network overhead
40%
IntersectionObserver — only prefetch links in the viewport.
Hover (instant.page)
Accuracy
85%
Network overhead
25%
Prefetch on hover, using the 40–400ms before the click.
Predictive (Guess.js)
Accuracy
90%
Network overhead
30%
ML on analytics to predict the next page.
Prefetch-all never misses but wastes bandwidth; viewport/hover/ML strategies prefetch far less while still catching most navigations.

Prefetch-all grabs every link (perfect accuracy, huge waste). Quicklink uses the Intersection Observer to prefetch only links in view. instant.page prefetches on hover. Guess.js trains on your analytics to predict the actual journey. The right pick depends on your traffic and how much data you're willing to spend on a guess.

Q1Sort each scenario
preload or prefetch?
The font used by the headline on THIS page
The JS bundle for the page behind this link
The current page's CSS background LCP image
Checkout code, likely needed after the cart
Q2Multiple choice
What's the key risk of prefetching?
Q3Multiple choice
Why does prefetching on hover work so well?
Q4Multiple choice
Which strategy has the highest accuracy but the worst network overhead?
Key takeaways
  • →prefetch = low-priority, speculative fetch of what the next navigation will likely need.
  • →Contrast with preload (high-priority, this page) — prefetch never competes with current resources.
  • →The classic win: prefetch the next route on hover for near-instant navigation.
  • →It's a guess — wrong guesses waste data; balance accuracy vs. overhead.
  • →Strategies range from prefetch-all to viewport (Quicklink), hover (instant.page), and ML (Guess.js).
← Previous
14. Resource Hints — preload
Next →
16. Tree Shaking