<zhead>

Link

dns-prefetch

Learn how to use the dns-prefetch rel link tag to improve your site.

The dns-prefetch link relation is used to inform the browser to perform DNS resolution for external domains in advance of the user actually following a link. This can reduce latency when navigating to a site or loading resources from another domain.

Code Examples

<link rel="dns-prefetch" href="//example.com">
Starts DNS resolution for example.com ahead of time, potentially saving milliseconds to seconds on user navigation or resource fetching.
<link rel="dns-prefetch" href="https://example.com">
Includes the scheme (https://) which is unnecessary for DNS prefetching, as this only requires the domain.
<link rel="dns-prefetch" href="#">
Misuses dns-prefetch with a placeholder URL, which will not initiate any beneficial DNS resolution.

Recommendations

  • 01
    Use Sparingly
    While dns-prefetch can speed up site performance, overuse can lead to unnecessary DNS queries. Keep it to critically important domains.
  • 02
    Combine with Other Prefetching Techniques
    For maximum efficiency, use dns-prefetch in conjunction with other types of prefetching like preconnect, prefetch, and prerender, where appropriate.
  • 03
    Place It in the Head
    To ensure DNS resolution starts as early as possible, place dns-prefetch links in the <head> of your document.
  • 04
    Privacy Consideration
    Be mindful of privacy implications, as prefetching can lead to DNS lookups that reveal user intent without actual navigation.

Related Documentation