Working out what DNS to prefetch

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

<p>I won't lie. I love (actual love) the <code>window.performance</code> API. It gives you so much information about what is happenging on the network for the user that it opens up a huge range of possibilities.</p> <p>I have been working on speeding up my site, and one simple thing to do is to add in a <code><link rel='dns-prefetch' href='https://somedomain.com'></code> and it simply tells the browser to start trying to resolve the domain name ahead of when the browser will try and fetch the resource. In theory this should reduce the latency for the intial network connection to those domains.</p> <p>It can be a pain to get that list of domains for prefetching so I wrote this simple script that uses <code>window.performance</code> to get a list of all the requests made by the page and the domains that they are being made to.</p> <script src="https://gist.github.com/PaulKinlan/15d13da60c5402e07387.js"></script> <p>Drag this bookmark to your address bar: <a href="javascript: (function () { var jsCode = document.createElement('script'); jsCode.setAttribute('src', 'https://cdn.rawgit.com/PaulKinlan/15d13da60c5402e07387/raw/48ff1fb0c4654711dd0717332c5f97baf381576d/prefetchbuilder.js'); document.body.appendChild(jsCode); }());">Generate DNS prefetch</a></p> <p>The <code>window.performance</code> API opens a lot of possibilities for automating the possible performance improvements you can make to your site.</p>

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan