How DNS Prefetching Works

DNS prefetching is a resource hint for doing DNS lookups for domains that the browser has not yet determined to be needed. This improves performance because when the browser does need to request a resource, the DNS lookup for that domain has already happened.

Let’s look at an example. The browser is loading the page and needs to request the resource https://stats.example.com/js/pinit.js. To do this, it first has to establish an HTTP connection to the domain stats.example.com. If the browser already has an HTTP connection to the domain, the existing connection can be used, otherwise a new connection will be created.

What is DNS Prefetch?

The resource was later discovered in waterfall, and the JavaScript files were on another domain, separate from the domain of the base HTML page. The existing HTTP connection does not exist, so a DNS lookup occurs, as shown in the dark green part of the resource bar in the waterfall. This takes about 40 milliseconds, although DNS lookups can take tens or even hundreds of milliseconds depending on things like network connectivity or the number of DNS servers that need to be contacted.

DNS prefetch and preconnect

DNS Prefetching is one of many resource hints that websites can use to instruct browsers to do something first. It’s a small, fairly basic resource hint that can be applied more broadly than the other options.

You do not need to specify both DNS prefetch and preconnect resource hints. The browser simply pre-connects to complete all the steps required.

DNS prefetching is still important and can be used in conjunction with preconnect hints. This is because browsers limit the number of HTTP connections they will maintain. Using more than 6-8 pre-connected resource hints can limit browsers to making the connections they actually need. DNS prefetching operates at different levels, which means you can have 6 to 8 preconnects on the page for critical domains, and then have additional DNS prefetch hints for other less important domains.

When to use DNS prefetching

In general, DNS prefetching should be used for important first- and third-party domains, including:

Fields later found in waterfalls

Domains with resources that subsequently cause other requests to occur

Domains with heavy requests or downloads

The domain is not yet used by other types of resource hints

In general, DNS prefetching should not be applied to domains that are part of the critical rendering path. This is because, ideally, these domains should use pre-connected resource hints.

DNS prefetching and first-party domains

Using DNS Prefetch for first-party domains tends to be easy for a number of reasons:

You control the domain name.

You purposely host content on that domain and link to its pages.

You should know ahead of time which first-party domains your pages will use.

Domain names are unlikely to change.

These factors give you some level of confidence that the domain contains the resources your page needs and that they are unlikely to change, thus encompassing DNS prefetch resource hints. Good examples include:

Additional domains with lazy loaded images or videos

1st party domain for API endpoints used later in the page

Third-party content and DNS prefetching

Using DNS prefetch resource hints for third-party domains can be very challenging for a number of reasons:

Domain names may be dynamic or change without your knowledge

Different third-party domains may be used for different parts of your website

It may not be clear which third-party content is loaded from which domains, so adding or removing third-party tags can add or remove domains that require DNS prefetching

Third-party domains may arise due to the actions of other departments, such as marketing or business groups that use Tag Manager.

You may need to do additional work to determine the source of third-party content. Ideally, you want to use DNS prefetching for third-party content that will be used by your pages for a long time.

The following are good examples of third-party content used with DNS prefetching, as they tend to have consistent domains or URLs:

Analytics or activity trackers

A/B Testing Widget

chat widget

Error and logging framework

social sharing widget

Optimizing ads with resource hints can be particularly difficult. This is because, while the original ad exchange may have a well-known domain name, the final domain name serving ads is often unknown and inconsistent.

Validation benefits

Once you’ve determined which domains should use DNS prefetching, you still need to test them! Just because something should improve your site’s performance or experience, doesn’t mean it actually will: you need to always test to make sure.

Use tools to measure your performance.

Implement your changes.

Compare “before” and “after” performance metrics.

Challenges of DNS Prefetching

There is a big problem with DNS prefetching – when people overuse it. Let’s also look at awareness of other issues.

Best Practices for DNS Prefetch Auditing

We’ve seen many benefits of using DNS prefetch resource hints, but there are also many pitfalls that can hurt performance if used incorrectly. This means it’s important to review how your page uses resource hints to make sure you’re following all best practices.

First, identify all DNS prefetch resource hints that the page is currently using. You will need to look for the <link> tag in the base HTML page, as well as link: HTTP headers that can also contain resource hints. Also keep in mind that link headers containing resource hints can appear in other responses than HTML-based pages!

Recommended reading:

Why won’t the Yo WhatsApp APK file open?

What are the benefits of Yo WhatsApp?

Leave a Reply

Your email address will not be published. Required fields are marked *