DNS prefetch: A Web Performance Trick
Published: 2021-05-31 13:44:54


> Web performance is the objective measurements and the perceived user experience of load time and runtime. 


`DNS-prefetch` is an attempt to resolve domain names before resources get requested. This could be a file loaded later or link target a user tries to follow.

## Why use dns-prefetch?

When a browser requests a resource from a (third party) server, that cross-origin’s domain name must be resolved to an IP address before the browser can issue the request. This process is known as DNS resolution. While DNS caching can help to reduce this latency, DNS resolution can add significant latency to requests. For websites that open connections to many third parties, this latency can significantly reduce loading performance.

`dns-prefetch` helps developers mask DNS resolution latency. The HTML <link> element offers this functionality by way of a rel attribute value of dns-prefetch. The cross-origin domain is then specified in the href attribute:


### Syntax


```html
<link rel="dns-prefetch" href="//example.com">
```

### Examples


```html
<html>
  <head>
    <link rel="dns-prefetch" href="https://fonts.gstatic.com/">
    <!-- and all other head elements -->
  </head>
  <body>
    <!-- your page content -->
  </body>
</html>
```

You should place `dns-prefetch` hints in the `<head>` any time your site references resources on cross-origin domains, but there are some things to keep in mind.

## How to use: Best practices

There are 3 main things to keep in mind:

* `dns-prefetch` is only effective for DNS lookups on cross-origin domains, so avoid using it to point to your site or domain. This is because the IP behind your site's domain will have already been resolved by the time the browser sees the hint.

* It's also possible to specify `dns-prefetch` (and other resources hints) as an HTTP header by using the HTTP Link field

```
Link: <https://fonts.gstatic.com/>; rel=dns-prefetch
```

* Consider pairing `dns-prefetch` with the `preconnect` hint. While `dns-prefetch` only performs a DNS lookup, `preconnect` establishes a connection to a server. This process includes DNS resolution, as well as establishing the TCP connection, and performing the TLS handshake if a site is served over HTTPS. Combining the two provides an opportunity to further reduce the perceived latency of cross-origin requests. You can safely use them together like so:

```html
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
```

> **Note**: If a page needs to make connections to many third-party domains, preconnecting them all is counter productive. The `preconnect` hint is best used for only the most critical connections. For the others, just use`<link rel="dns-prefetch">` to save time on the first step, the DNS lookup.


## See also

- [<link>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
- [HTML attribute: rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
- [Prefetching, Preloading and Pre-browsing](https://css-tricks.com/prefetching-preloading-prebrowsing/)
- [Link](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link "The HTTP Link entity-header field provides a means for serialising one or more links in HTTP headers. It is semantically equivalent to the HTML <link> element.")