<link rel="prefetch"> signals that a resource is likely to be needed for a future navigation, not the current page. The browser fetches at low priority during idle time and stores the response in HTTP cache; if the user navigates to a page that needs the resource, it's already there.
Prefetch differs from preload in priority and intent: preload is "I need this NOW for the current page"; prefetch is "I'll probably need this soon for the NEXT page". Mixing them up is a common mistake -- preloading a resource you don't need this navigation wastes bandwidth on the critical path; prefetching a resource the current page actually uses delays its discovery.
Best applications: prefetching the JS bundle for a likely next route in an SPA, prefetching images for the next pagination step, prefetching the checkout-page CSS from the cart page. Avoid on slow connections (the browser may still defer it via Save-Data, but a poorly-targeted prefetch on a metered connection burns user data with no benefit).
Note: Chrome 110+ deprioritizes prefetch when the user has Data Saver mode on; Safari has historically been weaker about implementing it. Treat as a Chrome-first optimization with progressive-enhancement fallback.