O'Reilly

DNS Prefetching

By on  

Despite anchor tags having HREF attributes which lead to other host names, browsers do not execute DNS lookups on those domains. Content prefetching can be invaluable in speeding up your websites, but did you know that you can also implement DNS prefetching? It's as easy as simple LINK element:

<link rel="dns-prefetch" href="//somehost.tld" />

This technique can be very useful when your website links to related host names. Take Twitter for example; they implement two DNS prefetches:

<link rel="dns-prefetch" href="https://si0.twimg.com" />
<link rel="dns-prefetch" href="https://api.twitter.com" />

I'd be willing to bet that most of you didn't know this tag existed. It's an interesting idea with a very simple execution. What do you think? Do you manage websites that prefetching could be helpful for?

Track.js Error Reporting

Recent Features

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • Face Detection with jQuery

    I've always been intrigued by recognition software because I cannot imagine the logic that goes into all of the algorithms. Whether it's voice, face, or other types of detection, people look and sound so different, pictures are shot differently, and from different angles, I...

  • Flext: MooTools Auto-Growing Textrea Plugin

    A while back David Walsh published a list of 7 MooTools Plugins You Should Use on Every Website which included 'AutoGrow' a text area expander plugin. 'AutoGrow' is very similar in results to the class I wrote for Education.com, Flext. I decided to release this...

Discussion

  1. Peter Dubrovski

    Hi David,

    it seems that this example also works with html4. isn’t it so? do you know wich browser can work with this tag?

    greetings
    peter

  2. That’s a pretty cool idea.

    I think you should make clear that this code needs to go at the bottom of your HTML (rather than in the HEAD) otherwise it seems like it will actually slow down your page load, rather than speed it up.

    • update: oh, in retrospect not so sure that’s an issue. I assumed if it’s in the HEAD then the browser would do the pre-fetch before continuing with the rest of the page load. Now, I’m not so sure :/ ?

    • According to the HTML5 Boiler plate you should attempt to initiate this as early as possible.

      http://html5boilerplate.com/docs/DNS-Prefetching/

      I guess the act of doing this doesn’t block.

  3. Edible Droppings

    How many outstanding DNS prefetch requests can be extant at any one time? You could hang up your browsers UI thread if you spin up too many of these requests. It is also another attack vector into your web application.

  4. I use DNS prefetches on many sites (examples being http://invx.com or http://currencyfeed.com).

    In my experience, with hosts that have a good DNS setup, DNS resolution frequently completes before the remote resource is loaded, shaving 50-150 ms of its loading time.

    I don’t do this for all resources though, http://www.google-analytics.com is one that I don’t preload because of its ubiquity.

    Also, if you load resources from a different host in a blocking fashion from the <head> (which you probably shouldn’t), DNS prefetches are useless. There needs to be a little bit of time (loading, parsing, rendering…) between the prefetch and the loading of the resource.

  5. You are right david, I don’t know about this tag. But I am still not clear about the use of this.

  6. “dns-prefetch” is basically a suggestion to the browser that it should consider prefetching that DNS lookup as soon as it’s practical to do so. Therefore, it won’t be a blocking action, and in general the browser (if doing things sanely) would not tie up the valuable bandwidth/connections pool during critical page load path with those “extra” DNS lookups, but would rather defer that work until the main resource loading is complete.

    On the other hand, if your site has lots of different DNS items you are prefetching, I think you are definitely creating wasted bandwidth for the user (lots of mobile users are still on metered/limited bandwidth), as they are not likely to visit all those extra domains (maybe only 1 or 2 max). So I’d call it a “smell” if your markup had more than one or two at most of those prefetches listed explicitly.

    Also, AFAIK, Chrome automatically prefetches even stuff it finds in the markup (and I imagine this is actually the future direction of most browsers, with implicit lookups rather than having to explicitly indicate). You can actually disable the DNS prefetching in this scenario, by sending an HTTP response header to tell Chrome not to do that. I have several sites I disable it on, because I know there may be many different hosts (like on a big blog post, for instance), and I don’t want to generate a lot of DNS noise unnecessarily.

    One example where DNS prefetching can actually create lots of unnecessary DNS traffic to a server is if that server has wildcard (*.) DNS records, because they are not cacheable (or at least, they aren’t shared cacheable), so if you employ wildcard DNS records and you have many of them listed in a page, you may very well want to disable Chrome from automatically fetching all those records separately and hammering your DNS server.

  7. Bit late to the conversation, but:
    I’ve a few websites with Google Analytics and Adwords installed (javascript) and I’m trying to shave a second or so off the page load time.

    I have messed around with hosting the urchin code within my blogs and linking internally but it still doesn’t overcome the inevitable goodle adwords dns lookup. Now, I know googles servers and dns’s are fast but, I like to speed things up a little more.

    Will the link rel=”dns-prefetch” code added in front of their js help things along? Or am I making a mountain out of a mole hill on this one? Even half a second improvement on page load time is a worthwhile exercise to undertake across all of my websites.

    Any ideas? Comments? Steer me in the right direction?
    Thanks

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...

  • OSCON Portland:  Conference Giveaway and Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...