What Is DNS Prefetching and When Should You Use It?
Learn what DNS prefetching is, how the dns-prefetch hint works, and when to use it versus preconnect for faster pages.
Expected Interview Answer
DNS prefetching is a browser hint, declared via a link tag with rel dns-prefetch, that tells the browser to resolve a domain name to an IP address ahead of time, before any resource from that domain is actually requested, so the DNS lookup latency is already paid by the time the real request happens.
Every cross-origin resource a page requests — a font from a CDN, an analytics script, an image host — normally triggers a DNS lookup the first time that domain is contacted, and that lookup (often tens to low hundreds of milliseconds, more on a slow or distant resolver) sits directly on the critical path before the connection can even begin. DNS prefetching front-loads that resolution during idle time by adding a hint like link rel="dns-prefetch" href="//cdn.example.com" in the head, so the browser resolves the hostname in the background while the rest of the page is still parsing. When the actual request for that domain fires later, the DNS step is already done and only the TCP/TLS connection and request/response remain. It is a lightweight, low-risk hint (the browser can ignore it) best reserved for third-party domains you know you will hit — a font CDN, an analytics endpoint, a payment widget — and it is complementary to preconnect, which goes further by also completing the TCP and TLS handshake, not just DNS.
- Shaves DNS lookup latency off the critical path for known third-party domains
- Cheap, low-risk hint the browser can silently ignore if unsupported or unhelpful
- Improves perceived load time for resources on domains not yet contacted
- Complements preconnect for domains needing a fuller head start
AI Mentor Explanation
DNS prefetching is like a team manager finding out the away ground’s exact address well before match day instead of waiting until the bus is ready to leave to look it up. The bus can then depart immediately once travel time arrives, without the driver pausing to search for directions. If the ground is never actually visited that season, the lookup was simply idle preparation with no cost to the trip. That look-up-the-address-early, depart-immediately-when-needed pattern is exactly what DNS prefetching does for a domain’s IP address.
Step-by-Step Explanation
Step 1
Identify likely third-party domains
Look at fonts, analytics, CDNs, or widgets the page is very likely to contact.
Step 2
Add a dns-prefetch link hint
Place link rel="dns-prefetch" href="//domain.com" early in the document head.
Step 3
Browser resolves DNS in the background
While the rest of the page parses, the browser resolves the hostname to an IP during idle time.
Step 4
Real request skips the lookup
When the actual resource request fires, only the connection and transfer remain — DNS is already resolved.
What Interviewer Expects
- Clear explanation of what DNS resolution normally costs on the critical path
- Correct syntax and placement of the dns-prefetch hint
- Understanding that it is a hint, not a guarantee, and browsers may ignore it
- Ability to distinguish dns-prefetch from the more aggressive preconnect hint
Common Mistakes
- Overusing dns-prefetch for every conceivable domain, adding unnecessary background lookups
- Confusing dns-prefetch with preconnect, which also completes TCP/TLS
- Using it for the page’s own origin, which is unnecessary since that connection is already established
- Assuming it guarantees faster load rather than just removing DNS latency from the critical path
Best Answer (HR Friendly)
“DNS prefetching tells the browser to look up a website address in advance, before it is actually needed, so that when a resource like a font or tracking script from that domain is requested later, the lookup step is already done and the page loads a bit faster.”
Code Example
<head>
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<!-- preconnect goes further: DNS + TCP + TLS handshake -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>Follow-up Questions
- How does preconnect differ from dns-prefetch in what it actually completes?
- Why should dns-prefetch be reserved for domains you are confident will be used?
- How would you measure whether dns-prefetch actually improved load time on a real page?
- What is the relationship between DNS prefetching and the Resource Hints specification?
MCQ Practice
1. What does a dns-prefetch link hint cause the browser to do?
dns-prefetch only performs the DNS lookup early; it does not open a connection or fetch a resource.
2. How does preconnect differ from dns-prefetch?
preconnect is a stronger hint that goes beyond DNS to also set up the connection and TLS handshake.
3. Why should you avoid adding dns-prefetch for every possible domain on a page?
Prefetching domains the page is unlikely to use wastes network resources and can even slightly delay resolution of domains that matter.
Flash Cards
What is DNS prefetching? — A browser hint that resolves a domain’s IP address before it is actually requested.
How is it declared? — link rel="dns-prefetch" href="//domain.com" in the document head.
How does it differ from preconnect? — preconnect also completes the TCP/TLS handshake, not just the DNS lookup.
When should you use it? — For third-party domains you are confident the page will actually contact.