DNS Prefetch
dns-prefetch resolves DNS early for third-party origins. It's low-cost with modest benefit and works well for a few likely-used origins.
Definition
DNS prefetch is a resource hint (`<link rel='dns-prefetch'>`) that tells the browser to resolve DNS for an origin early. It's lower-cost than preconnect and can reduce DNS latency for later requests.
Why it matters
- Reduces DNS lookup latency — DNS resolution can take 20-120ms, pre-resolving speeds up later requests
- Extremely low cost — only performs DNS lookup, no TCP/TLS connection, near-zero page impact
- Wide browser support — works in all major browsers including legacy IE
- Good for uncertain third parties — more conservative than preconnect, no waste if unused
- Improves perceived performance — clicking links or loading third-party resources feels faster
- Especially effective on mobile — mobile networks typically have higher DNS latency
- Fallback for preconnect — browsers without preconnect support still benefit from DNS optimization
How to implement
- Place in <head> early so browser starts DNS resolution immediately
- Limit to 5-10 most likely-used third-party origins
- Use preconnect for critical third parties, dns-prefetch for secondary ones
- Use both preconnect and dns-prefetch together for browser compatibility
- Verify DNS timing with Resource Timing API or DevTools
- Review periodically: remove unused third-party origins
- Don't use for your own domain (already resolved)
Examples
html
<!-- Add common third-party origins early in <head> -->
<head>
<!-- Priority: preconnect for critical third parties -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Secondary: dns-prefetch for likely-used third parties -->
<link rel="dns-prefetch" href="//cdn.example.com" />
<link rel="dns-prefetch" href="//analytics.example.com" />
<link rel="dns-prefetch" href="//api.third-party.com" />
</head>html
<!-- Use both: preconnect for modern, dns-prefetch fallback for legacy -->
<link rel="preconnect" href="https://cdn.example.com" />
<link rel="dns-prefetch" href="https://cdn.example.com" />
<!-- Verify DNS resolution time (JavaScript) -->
<script>
const entries = performance.getEntriesByType('resource');
entries.forEach(e => {
if (e.domainLookupEnd > e.domainLookupStart) {
console.log(`${e.name}: DNS=${e.domainLookupEnd - e.domainLookupStart}ms`);
}
});
</script>FAQ
Common questions about this term.