HTML5 Boilerplate Docs

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:

Google APIs:

Microsoft Ajax Content Delivery Network:

Browser Support

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