HTML rel="dns-prefetch"

A rel="dns-prefetch" attribute value on a <link> element attempts to resolve the domain of the linked source in advance. The source can be a javascript file, stylesheet, CDN, JSON response, and more.

Example

#

A rel="dns-prefetch" on a <link> element.
The browser will resolve the domain of the stylesheet in advance.

<head>
  <link rel="dns-prefetch stylesheet" 
        href="https://css.static.com/mystyle.css" >
</head>

Using rel="dns-prefetch"

The rel attribute defines the relationship between the current page and the linked page or resource.

With rel="dns-prefetch" the browser performs a DNS resolution in advance.

A prefetch enhances load times by caching a resolved domain name from a third-party or different domain.

This is useful for a variety of external resources, such as

  • Stylesheets
  • Script files
  • Font files
  • Resources from a CDN
  • JSON responses from an API

Once a user actually requests these, they will be loaded faster.

Tip:  Don't use rel="dns-prefetch" on links to your own domain. The IP of your domain is already known.


Syntax

<link rel="dns-prefetch" href="url" />

Elements that accept rel="dns-prefetch"

Only one element accepts the dns-prefetch value on the rel attribute.

Elements Description
<link> Links a resource to the current page -- see example above

Browser support

Here is when rel support started for each browser:

Chrome
6.0 Sep 2010
Firefox
4.0 Mar 2011
IE/Edge
12.0 Jul 2015
Opera
11.1 Mar 2011
Safari
5.0 Jun 2010

You may also like

Guides