How would you use prefetching to make navigation feel instant without wasting bandwidth?

Prefetch based on what the user will likely do next, and prefetch more when you are more confident. Prefetching means loading something before the user asks for it.

High confidence: the next page in a flow, like step 2 of checkout. Or a link the user hovers or focuses. On hover or touchstart, I prefetch both the route's code chunk and its data. I put the data into the query cache. This gains 100 to 300 ms before the click.

Medium confidence: links that enter the viewport. Next.js Link does this for routes. I limit it to important links. I fetch at low priority, when the main thread and the network are idle.

I respect constraints:

• Skip prefetching when navigator.connection.saveData is on, or when the connection is slow.
• Limit how many prefetches run at once.
• Avoid prefetching personalised data that would expire before use.

Prefetched data needs a sensible staleTime, so it is not refetched immediately on navigation. In Chromium, speculation rules can prerender whole pages for very likely navigations.

I measure the effect. I compare the share of navigations served from prefetch with the bytes of prefetches that were never used.