← Lessons

quiz vs the machine

Gold1420

Frontend

Prefetching On Hover

Use the gap between hover and click to fetch the next page's code and data so navigation feels instant.

4 min read · core · beat Gold to climb

Borrowing free time

When a user hovers a link, there is usually a short pause before they actually click. Prefetching on hover uses that pause to start downloading the destination's code or data, so by the time the click lands the resources are already in the cache. The delay between hover and click is often two hundred milliseconds or more, which is enough to hide a small fetch.

  • Hover is a strong signal of intent without committing the user.
  • The fetch happens in the background at a low priority.
  • If the user moves away, the warmed cache simply goes unused.

Doing it safely

Prefetching is a bet, and reckless bets waste data. The goal is to prefetch enough to feel instant without flooding the network.

  • Limit concurrency so prefetches do not crowd out the current page.
  • Respect data saving preferences and skip on slow connections.
  • Cancel or deprioritize when the pointer leaves quickly.
  • Prefer touch start signals on mobile where hover does not exist.

Key idea

Prefetching on hover spends the idle moment before a click to warm the next page's resources, making navigation feel instant without wasting much data.

Check yourself

Answer to earn rating on the learn ladder.

1. What idle moment does prefetching on hover exploit?

2. Why should prefetching respect data saving preferences?