Reference guide · performance · Published 2026-08-16 · 3 min read
Preconnect and prefetch guide
Preconnect and prefetch guide: the difference between resource hints, when each helps, and how to avoid the wasted-bandwidth trap.
- ·The resource hints
- ·When each wins
- ·What not to hint
Preconnect, dns-prefetch, preload and prefetch are resource hints, not performance magic. Each one moves a future network step earlier, and each one carries a cost if it fires for an asset the page never uses. The art is knowing which hint fits which future.
The resource hints
| Hint | What it does | Cost if unused |
|---|---|---|
dns-prefetch | Resolves the origin's DNS | One DNS lookup |
preconnect | DNS + TCP + TLS handshake | A socket per origin |
preload | Fetches an asset needed this page, now | Bandwidth, priority |
prefetch | Fetches an asset for a future page | Bandwidth, cache pressure |
When each wins
preconnectfor an origin that the page will reliably connect to this visit: a CDN, an analytics host, a font server. The handshake is done before the request shows up, so the first request to that host skips the handshake latency.dns-prefetchwhen the connection may or may not happen, but a DNS lookahead is cheap and it helps on slow mobile networks. Use it for any origin you think might load.preloadfor assets the page itself uses critically (the hero image, a font, a big script) that discovery would otherwise defer. See the preload hero image article.prefetchfor likely next-page assets: after you link to a category page, prefetch its CSS; after the homepage, prefetch the top product. The browser fetches in low-priority idle time so it does not block the current page.
The trap
The classic blunder is preconnect-ing every third-party domain a site merely mentions. Each preconnect burns a socket and a TLS handshake even if the page never connects, which on many third-party embeds is exactly what happens. Rules:
- Only
preconnectorigins the page will connect to in the first 3 to 5 seconds. - Never preload a hero variant a mobile visitor will not use (the wrong
srcsetweight). - Never
prefetchpages that need auth or change per user; the browser stores a stale copy.
Read the timing
A preconnect that helps shows in the Network timeline: the first request to that host starts at time zero instead of after a 200 ms handshake. A preconnect that wasted its work shows a socket to a host the page never contacts, and Lighthouse flags nothing because the hint fired anyway.
When to involve a professional
If the page is slow and the Network sheet shows fifteen preconnects that each fired a socket and each never connected, sizing the hint set is a single audit, not a guess. A performance engineer can build the exact hint list from the HTML document by matching each hint to a real fetch.