rel=dns-prefetch

Seo > Speed > rel > rel=dns-prefetch

Updated: March 12th 2016

What is rel=dns-prefetch?

It is a way to speed up web pages by pre-resolving DNS.
Use of rel=dns-prefetch suggests a browser should resolve the DNS of a specific domain prior to it being explicitly called.

Example use

The above code is basically saying...

I want to resolve a domain name before it is called
The domain name is "cdn.varvy.com"

Purpose

The main reason for rel=dns-prefetch to exist is to speed up the way web pages load when they are using different domains for page resources.

It can achieve pagespeed gains by effectively controlling the manner in which DNS lookup times take place.

This process is often called "DNS prefetching".

Definition from W3C

"The dns-prefetch link relation type is used to indicate an origin that will be used to fetch required resources, and that the user agent should resolve as early as possible." ¹

Where is rel="dns-prefetch" used?

It is used in the head of a HTML document.

DNS resolution is a known and required part of a page load

In life we can be sure of death and taxes.

In page speed, you can be sure of one DNS lookup per domain.

This means if your page resources are found on three domains, then you will have at a minimum of three DNS lookups. If you use resources from ten domains then you will have at a minimum ten DNS lookups.

This is why the page speed best practice of minimizing DNS requests is so important (but unfortunately often ignored).

Where is DNS prefetching useful?

Okay let's say you have a whole bunch of js files on your CDN that are used for your page loads and you also have some 3rd party things that call js from another domain (adsense, seo tools, marketing tools, etc.).

In reality you likely do not know which things the browser will try to load first in such a scenario.

But what you do know is that you will definitely be using your CDN, just not which file first.

In this situation the DNS prefetching is perfect because all rel=dns-prefetch is doing is resolving the DNS, not actually grabbing a file.

This means that whatever actual file the browser gets first, it will already have the DNS resolved so the resource can be retrieved faster.

DNS prefetching basically gives you more control of how your page loads by "hinting" to the browser what to do rather than leaving it to chance.

Where is DNS prefetching not useful?

If all of your page resources come from that same domain as your html does.

If the browser has your HTML then it has already resolved the DNS for that domain. If all your images and scripts and css come from that same domain, then there is naturally no need to resolve the domain again. In fact it would be bad to do so.

It is often better to have a well planned page than to introduce pre-fetching of any sort

Prior to prefetching DNS, you may want to explore the rather simple idea of reducing the amount of domains that your page is calling.

I know this is not possible for everyone and every site, but just ask your self these three questions...

Do I have any of my page resources on different domains?
Are my resources being called uniformly?
Can I reduce the amount of domains I am calling resources from?

1. Do I have any of my page resources on different domains?

If your HTML file is on example.com and your CSS is on cdn.example.com, and your images are coming from 1234bucket.cdn.com then you are providing resources from three different domains and may want to consider bringing all of those to one domain.

2. Are my resources being called uniformly?

If you are calling one CSS file from "www.example.com" and another from "example.com" you need to clear that up and ensure all resources are being called from either the www version or the non "www" version of your domain.

The same applies to https vs http. It is very common to see some resources coming from http on a https site.

3. Can I reduce the amount of domains I am calling resources from?

Check to see if your pages are calling things that are not even being used on a page. Things like icon fonts, plugins, social buttons, etc. are often not used on every page yet are being called anyway.

Know what your pages are loading - run it through the page resource tool to see the different domains you are calling things from.

by Patrick Sexton