Preload, preconnect and prefetch are resource hints. A resource hint is a <link> element (or HTTP header) that tells the browser to fetch a file or open a connection earlier than it would on its own. Search results for the bare word “preload” include games and apps. This entry covers the web performance meaning.
What does each hint do?
Preload (rel="preload") declares a file the current page needs soon. MDN says the browser downloads it with higher priority and only stores it. The file is not applied until the page actually uses it. as is required and names the resource type. Fonts also need crossorigin.
Preconnect (rel="preconnect") opens a connection to another origin in advance. For HTTPS that means DNS lookup, TCP and TLS. It only helps cross-origin requests, since the connection to the page’s own origin already exists. MDN recommends it only for the most critical connections. For less important third parties, dns-prefetch resolves only the DNS name.
Prefetch (rel="prefetch") fetches a resource that a later navigation will probably need. It has a lower priority than preload. MDN points out that cache partitioning in many browsers makes prefetching cross-site resources useless and refers to the Speculation Rules API for documents.
Example
<link rel="preconnect" href="https://cdn.example.com">
<link rel="preload" href="/fonts/inter.woff2" as="font"
type="font/woff2" crossorigin>
<link rel="prefetch" href="/next-page/">
The paths and domains in the example are placeholders.
Common mistakes
- Preloading a font without
crossorigin, so the file is fetched twice (web.dev). - Preconnecting to many origins. web.dev warns that too many connections delay other resources, and that unused connections close after about 10 seconds.
- Adding
crossoriginto a preconnect when the later request is not a CORS request, or leaving it out when it is. CSS Wizardry describes checking the request in DevTools (Sec-Fetch-Mode: cors) and notes that one origin can need two preconnect tags. - Preloading several formats of the same file. MDN advises preloading only the one most users need.
FAQ
What does preconnect do? It sets up the connection to an origin before the first request to it.
What is the difference between preload and prefetch? Preload serves the current page, prefetch a likely next one.
Sources
- rel=preload – MDN Web Docsdeveloper.mozilla.org
- rel=preconnect – MDN Web Docsdeveloper.mozilla.org
- rel=prefetch – MDN Web Docsdeveloper.mozilla.org
- Establish network connections early – web.devweb.dev
- Correctly configure (pre)connections – CSS Wizardry (supplementary)csswizardry.com
Last updated: