VGTech is a blog where the developers and devops of Norways most visited website share code and tricks of the trade… Read more



Are you brilliant? We're hiring. Read more

Speed up websites using DNS prefetching

Frontend

We recently added a couple of lines of HTML to our mobile website that potentially speeds it up for users with recent browsers (Chrome and Firefox, at the time of writing). The technique might not work for all sites, but it applied very well to ours. I’ll explain how and why:

  • You add a <link rel="dns-prefetch" href="//1.vgc.no" /> tag to the <head> of your site.
  • The hostname you specify will be resolved by the browser in an asynchronous fashion
  • When resources located at this hostname is to be loaded, the hostname is already mapped to an IP-address and thus the request takes less time

The solution works well on our site for the following reasons:

  • We load resources from many different hostnames – mostly to get around a bug in Safari for iOS that we’ve written about earlier
  • We lazy-load images on our site to reduce the bandwidth. For each image located on a hostname the browser has not resolved, there is first a DNS lookup and then the actual request to load the image. On mobile devices with high-latency connections, doing the DNS lookup as early as possible is a big win in terms of performance
  • Unfortunately, some of the ad-systems we use load in a synchronous way, blocking the rest of the page from loading. While this is happening, we can still resolve the hostnames so they are ready to use.

Without DNS prefetching Without DNS prefetching

With DNS prefetching With DNS prefetching

As you can see from the screenshots above, we gained quite a bit of performance from this little trick. There are a number of reasons why this might not work as well for your site, however:

  • If your markup is loaded and parsed quickly enough, the DNS resolving won’t be finished before it starts loading resources from the domains you’ve specified
  • You might be loading few resources, or the resources you load are located on the same hostname

If you think this technique might help your site, give it a try! It’s just a line or two of HTML, and it’s pretty easy to see how it affects your website using for example WebPageTest.org. Make sure you pick a browser that supports DNS-prefetching (Chrome, for example).

Developer at VG with a passion for Node.js, React, PHP and the web platform as a whole. espen.codes - @rexxars


6 comments

  • Tran Ngoc Tuan Anh

    Nice. Can we use this technique for all types of domain? I mean not only our domain, subdomains, but also any external domain?


    • Espen Hovlandsdal

      Absolutely. We use it for our CDN, which is a different domain than our main site (to avoid sending cookies for static requests).

  • Markus

    Did you only include the DNS prefetching for FF/Chrome in your header or did you also include the prefetching for IE9?

    E.g.:
    ---
    <link rel="prefetch" href="http://www.example.com/someresource.htm">
    ---

    As described here:
    http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx


    In the statistics of our German financial news website the IE9 has a share of around 15 % of our traffic and FF/Chrome has a share of around 40 %.


    • Espen Hovlandsdal

      We only included DNS-prefetching so far. The only problem with the prefetch header is that (as far as I can tell) Firefox and Chrome actually retrieves the resource at the given location instead of just resolving the hostname.

      It seems IE9 only resolves the hostname. It might make sense to include the prefetch meta-tag within a conditional comment. I'll give this a try and do some benchmarks.

  • Markus

    Cool and thanks for your effort, I am already very curious about your test results! :-)

    And it's a pity that this tag does not open an Initial Connection.

    When I look at the statistics at WPT, I notice that most DNS requests are quite fast, but the initial connection with the other server can take 'some' time ...


  • KJ Prince

    I'm testing this on a Shopify store at the moment, will report back with results. Thanks for the advice.


Leave your comment