Prefetch

Prefetching fetches resources that may be needed by a future navigation or interaction when network capacity permits. It trades some network and cache cost now for potentially lower latency later.

Prefetching moves likely future work earlier. In the browser, a page can use `` to indicate that a resource is likely to be needed for a future navigation, allowing the browser to fetch it when it considers the network and resource conditions suitable.

Prefetching is different from fetching a resource because it is immediately required for the current page. The browser retains discretion over whether and when to perform a prefetch, so application code should not assume that a prefetched resource has already been downloaded.

A good use case is a likely next route, such as preloading the resources for a checkout page after a user has reached the cart. The benefit comes from overlapping network work with the user's current activity, reducing the amount of work left after navigation.

The trade-off is that predictions can be wrong. Unnecessary prefetches consume bandwidth, connection resources, and potentially cache space, so frontend systems should prioritize resources with a meaningful probability of near-future use and account for constrained network conditions.

Key points

• Prefetch targets resources likely to be needed later.
• The browser decides whether and when a prefetch runs.
• It can reduce latency by doing network work before navigation.
• Incorrect predictions waste bandwidth and other browser resources.
• Prefetch is different from loading resources required immediately by the current page.

Interview questions

When would prefetching improve frontend performance, and when could it hurt?

It can help when there is a strong signal about the user's next action and the resource is expensive enough that early fetching can hide its latency. For example, a likely next route can be prefetched while the user is reading the current route. It can hurt when predictions are inaccurate or resources are large, because unnecessary downloads consume bandwidth and browser resources. The decision should therefore consider both the probability of use and the cost of the resource.

What is prefetch, and why would you use it?

Prefetching tells the browser that a resource is likely to be needed in the future. The browser can download it ahead of time when conditions allow. This can reduce latency when the user eventually needs that resource. The trade-off is additional network and cache usage if the prediction is wrong.

Is a prefetch request guaranteed to be downloaded?

No. A prefetch is a hint rather than a guarantee that the browser will immediately fetch the resource. The browser can consider factors such as network conditions and available resources when deciding whether to act on the hint. Therefore, application correctness must not depend on the resource having been prefetched.

How would you design a route-prefetching strategy for a production frontend?

I would first identify routes with predictable transitions and measure their resource cost. I would prefetch selectively, using signals such as likely navigation intent rather than indiscriminately fetching every route. I would also account for network constraints and avoid making correctness depend on prefetched data. Finally, I would measure cache usage, bandwidth, navigation latency, and the hit rate of prefetched resources.