Resource Hints — dns-prefetch & preconnect
Warm up cross-origin connections before you need them so the DNS/TCP/TLS cost is already paid.
Resource hints are the best effort-to-payoff trade in performance: a single line of HTML that makes the browser smarter about when to do work. This lesson covers the two that warm up connections — dns-prefetch and preconnect — so a cross-origin resource isn't stuck doing handshakes on the critical path.
Hints, not commands
The browser's preload scanner is already a good optimizer, but it can't read your mind. A resource hint is you telling it “this origin/resource matters — get a head start.” You add them as <link> tags (or HTTP headers), and they're cheap: minimal code, big potential win on the right page.
Warming the connection
Connecting to a new origin isn't one step — it's DNS → TCP → TLS, and that can easily be 150 ms+ before a single byte of the resource transfers. Both hints move some of that work into idle time before the resource is discovered. Toggle between them:
dns-prefetch
dns-prefetch resolves a domain name to an IP ahead of time and caches it. On its own it only saves the DNS step (often modest) — but its superpower is that it's supported everywhere, even ancient browsers, with almost zero overhead. It shines when you talk to many third-party origins.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://cdn.example.com">preconnect
preconnect goes further: DNS and the TCP handshake and the TLS negotiation — the whole connection, ready to go. That's the big saving (the demo shows the request starting immediately on discovery). But opening a connection is expensive, so use it sparingly:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>That crossorigin attribute matters: font files are fetched in CORS mode, so the preconnect must match or the browser opens a second connection and you've gained nothing.
Using them together
A common pattern is to list both: preconnect for modern browsers, with dns-prefetch as a fallback. If preconnect is supported, the DNS is already done and the dns-prefetch line is harmless; if it isn't (very old browsers), you still save the DNS lookup.
| dns-prefetch | preconnect | |
|---|---|---|
| Warms | DNS lookup only | DNS + TCP + TLS |
| Saving | Small (~DNS time) | Large (full connection) |
| Cost / overhead | Tiny | Real — use sparingly |
| Support | Everywhere (even IE) | Modern browsers |
| Use for | Many third-party origins | The 1–2 most critical origins |
- →Resource hints are cheap <link> tags that tell the browser to start work early.
- →dns-prefetch warms just DNS — tiny, universal, great for many third parties.
- →preconnect warms DNS + TCP + TLS — big saving, but use it for only the 1–2 critical origins.
- →Add
crossoriginwhen the resource (e.g. a font) is fetched in CORS mode. - →List both as a fallback: preconnect for modern browsers, dns-prefetch everywhere else.