Working out what DNS to prefetch

I won't lie. I love (actual love) the window.performance 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.

I have been working on speeding up my site, and one simple thing to do is to add in a <link rel='dns-prefetch' href='https://somedomain.com'> 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.

It can be a pain to get that list of domains for prefetching so I wrote this simple script that uses window.performance to get a list of all the requests made by the page and the domains that they are being made to.

Drag this bookmark to your address bar: Generate DNS prefetch

The window.performance API opens a lot of possibilities for automating the possible performance improvements you can make to your site.

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.

I'm trialing a newsletter, you can subscribe below (thank you!)