Skip to content

DNS Prefetching

Jump to bottom Edit New page
bunsen32 edited this page Feb 14, 2012 · 9 revisions

DNS Prefetching

In short, DNS Prefetching is a method of informing the browser of domain names referenced on a site so that the client can resolve the DNS for those hosts, cache them, and when it comes time to use them, have a faster turn around on the request.

Implicit Prefetches

There is a lot of prefetching done for you automatically by the browser. When the browser encounters an anchor in your html that does not share the same domain name as the current location the browser requests, from the client OS, the IP address for this new domain. The client first checks its cache and then, lacking a cached copy, makes a request from a DNS server. These requests happen in the background and are not meant to block the rendering of the page.

The goal of this is that when the foreign IP address is finally needed it will already be in the client cache and will not block the loading of the foreign content. Less requests result in faster page load times. The perception of this is increased on a mobile platform where DNS latency can be greater.

Disable Implicit Prefetching

<meta http-equiv="x-dns-prefetch-control" content="off">

Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still prefetch any explicit dns-prefetch links.

Explicit Prefetches

Typically the browser only scans the HTML for foreign domains. If you have resources that are outside of your HTML (a javascript request to a remote server or a CDN that hosts content that may not be present on every page of your site, for example) then you can queue up a domain name to be prefetched.

<link rel="dns-prefetch" href="//example.com">

Note that we start the URL with "//" as the protocol is unimportant in this instance.

The recommended best practice is to have your prefetch requests queued to the client OS as early as is reasonable. It is preferred to have them received in the first packet of the HTML, if possible. Therefore, I recommend adding any explicit prefetch links immediately after the "meta charset" tag:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <link rel="dns-prefetch" href="//image.cdn.url.example.com">

Common Prefetch Links

Amazon S3:

<link rel="dns-prefetch" href="//s3.amazonaws.com">

Google APIs:

<link rel="dns-prefetch" href="//ajax.googleapis.com">

Microsoft Ajax Content Delivery Network:

<link rel="dns-prefetch" href="//ajax.microsoft.com">
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">

Browser Support

  • Firefox 3.5+
  • Chrome
  • Safari 5+
  • Opera (Unknown)
  • IE 9 (called "Pre-resolution" on blogs.msdn.com)

References

Add a custom footer
Add a custom sidebar
Clone this wiki locally