Entity Tracking: * DNS (Domain Name System): A system that translates human-readable domain names into IP addresses for browser connections. * DNS Resolution: The technical process of converting a domain name into its corresponding IP address. * DNS Prefetch: A resource hint that instructs the browser to resolve a domain's IP address before a user initiates a request. * Resource Hint: A snippet of code that suggests performance-improving actions to a browser before they are strictly required. * Cross-origin: Any domain name that is different from the domain currently hosting the web page. * Preconnect: A performance optimization that resolves DNS and establishes the full TCP/TLS connection to a server. * TTL (Time-to-Live): A setting that defines how long a DNS record stays in the local storage before being refreshed.
DNS prefetching is a method for resolving domain names to IP addresses before a user clicks a link or requests a resource. It is a low-latency "resource hint" that tells the browser to look up the technical address of a third-party server in advance. This helps speed up the perceived loading time of websites that rely on external fonts, icons, or scripts.
What is DNS Prefetch?
When a browser loads a page, it must find the IP address for every external resource, such as images or trackers. This lookup process can create delays. DNS prefetching allows the browser to perform these lookups in the background while the user is still on the current page.
This feature is highly reliable because it is fault-tolerant; if a browser does not support it, the page still loads normally, just without the speed boost. [Since September 2025, this feature works across the latest devices and browser versions] (MDN).
Why DNS Prefetch matters
DNS resolution is a hidden speed bottleneck. [While common, DNS lookups can take approximately 40ms, or even hundreds of milliseconds, depending on the network] (Splunk).
- Reduces Latency: By resolving addresses early, you mask the time spent waiting for servers to identify each other.
- Improves Third-Party Performance: It is ideal for ads, analytics, and social widgets that load from external domains.
- Increases Efficiency: It helps the browser "get a head start" on the waterfall of requests, making the final asset download faster.
- Better User Experience: Faster page transitions lead to higher engagement and lower bounce rates.
How DNS Prefetch works
- Scanning: The browser scans the HTML for specific prefetch tags or analyzes the user's browsing patterns to guess which links they might click next.
- Resolution: The browser sends a request to a DNS resolver to find the IP address for those domains.
- Caching: Once the IP address is found, the browser stores it in the DNS resolver cache.
- Instant Connection: When the user finally triggers a request for that domain, the browser skips the lookup and establishes the connection immediately.
Implementation methods
You can set up prefetching in three different ways.
HTML Link Prefetching
This is the most common method. You place a link tag in the <head> section of your document.
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
HTTP Header Prefetching
If you have server-side access, you can send the hint via your response headers. This is faster as it reaches the browser before the HTML is parsed.
Link: <https://fonts.googleapis.com/>; rel=dns-prefetch
JavaScript-based Prefetching
You can trigger lookups based on specific user actions, like hovering over a button.
var prefetchLink = document.createElement("link");
prefetchLink.rel = "dns-prefetch";
prefetchLink.href = "https://example.com";
document.head.appendChild(prefetchLink);
Best practices
- Target cross-origin domains only: Do not prefetch your own site's domain. The browser has already resolved your IP address by the time it reads the code.
- Focus on critical third parties: Prioritize domains for analytics, chat widgets, and A/B testing frameworks that stay consistent over time.
- Keep the list short: [Websites should try not to make more than 10 DNS prefetches] (Splunk) to avoid overwhelming the browser's lookup capacity.
- Pair with Preconnect for vital assets: Use
preconnectfor your most important resources anddns-prefetchfor less critical ones to balance performance.
Common mistakes
Mistake: Using both prefetch and preconnect tags for the same domain.
Fix: Use only preconnect for high-priority domains; it already includes the DNS lookup.
Mistake: Prefetching too many domains. Fix: Audit your tags for "ghost" domains that are no longer used on the page. [One major news site was found making 33 DNS prefetches, which can create resource contention] (Splunk).
Mistake: Prefetching dynamic ad domains. Fix: Only use prefetch for the initial ad exchange domain, as final ad URLs are often unpredictable.
DNS Prefetch vs Preconnect
| Feature | DNS Prefetch | Preconnect |
|---|---|---|
| Goal | Resolve IP address | Resolve DNS + Connect + Security Handshake |
| When to use | Non-critical third parties | Critical assets (Fonts, APIs) |
| Resource usage | Low | High (Maintains active connections) |
| Browser limit | High capacity | [Limit of 6-8 per page] (Splunk) |
FAQ
What is the difference between DNS prefetching and caching? DNS caching is the storage of IP addresses after you have visited a site once. DNS prefetching is the proactive resolution of those addresses before you have even requested them on the current page.
Does DNS prefetching impact privacy? It can. Because the browser resolves domains proactively, it might expose browsing patterns or intentions to DNS providers before a user actually decides to visit a link.
How do I measure if prefetching is working? You can use waterfall charts in performance tools to see if the "DNS Lookup" segment of a resource request has disappeared or shortened.
Should I use DNS prefetching for my own domain? No. Your domain's DNS is already resolved by the browser to load the initial HTML file, so adding a prefetch hint for it adds no value.
What happens if the lookup fails? Nothing breaks. The browser will simply attempt the lookup again when the resource is actually requested.
