Preload, Preconnect, or Prefetch?
preload, preconnect, and prefetch all ask the browser to start work early, but they solve different problems. Mixing them up can waste bandwidth instead of making a page faster.
preload is for the current page
<link rel="preload"> starts fetching a resource the current page will need soon. It belongs in the document’s <head> and is most useful for important resources the browser would otherwise discover late.
<link rel="preload" href="/fonts/site.woff2" as="font" type="font/woff2" crossorigin>
Use it selectively. Preloading everything merely makes all requests insist they are important, which is not much of a priority system.
preconnect prepares an origin
<link rel="preconnect"> lets the browser start setting up a connection before it needs the actual file. It can save time when an important resource comes from another origin:
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
This is a connection hint, not a request for a particular resource.
prefetch looks ahead
<link rel="prefetch"> fetches a resource that may be useful on a future navigation. The browser treats it as a hint and can cache the response for later:
<link rel="prefetch" href="/next-page.html">
The practical distinction is timing: preload something needed now, preconnect to an origin needed soon, and prefetch something likely to be needed next. I would add any of them only after checking the network waterfall; browsers already have good loading heuristics, and extra hints are not automatically an improvement.