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.

← Back to all articles