Preload, prefetch, preconnect
Resource hints let you tell the browser what is coming. Preload the LCP image and critical fonts, preconnect to third-party origins, prefetch the next navigation.
What it is
Four <link rel> hints in the head tell the browser to start work earlier than the parser would:
- preconnect — open a TCP+TLS connection now, body comes later.
- dns-prefetch — resolve DNS only. The cheap fallback when preconnect is too aggressive.
- preload — fetch this exact resource now at high priority.
- prefetch — fetch this resource at low priority for a future navigation.
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://analytics.example.com">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.avif" as="image" fetchpriority="high">
<link rel="prefetch" href="/next-article" as="document">Why it matters
The browser only discovers resources as it parses HTML and CSS. By the time it sees a <link rel="stylesheet"> that references a font, several round-trips have already passed. Hints move that discovery earlier — sometimes saving 200–500ms on the LCP element.
Used badly, the same hints harm performance by contending for bandwidth with the actual critical request. Hint sparingly.
How to implement
Preload the LCP image. If your LCP is a hero image, preload it. Combine with fetchpriority="high" so it jumps the queue. Do not preload images that already appear early in the HTML — the preload scanner finds them anyway.
Preload critical fonts. Fonts requested from inside CSS are discovered late. Preload them with as="font" type="font/woff2" crossorigin. The crossorigin attribute is mandatory even for same-origin fonts.
Preconnect to third-party origins. If you load images from a CDN, fonts from Google, or analytics from a third party, preconnect saves the TCP+TLS handshake (~100–300ms). Use crossorigin for resources fetched with CORS (fonts, fetch, modules).
Use dns-prefetch as a fallback. Older browsers and proxies sometimes ignore preconnect. Pair it with dns-prefetch:
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">Prefetch the next likely page. On a landing page, prefetch the obvious next step. The fetch happens at low priority and won’t interfere with the current page.
Common mistakes
- Preloading 10 things. They all fight for bandwidth and nothing wins.
- Forgetting
crossoriginon font preloads — the browser then fetches the font twice. - Preconnecting to origins you don’t actually use.
- Preloading a stylesheet then forgetting to add
<link rel="stylesheet">. The preload sits unused; Chrome logs a warning. - Using prefetch for the LCP image of the current page. That is preload’s job.
Verification
- DevTools → Network → look at the priority and start time of LCP and font requests.
- Chrome logs
<link rel="preload"> was preloaded using link preload but not used within a few secondsfor misused hints. - Lighthouse “Preload key requests” and “Preconnect to required origins” surface missing hints.