Categories
Web Development

A Prefatory Guide to dns-prefetch

As the name suggests, dns-prefetch is a hint for modern web browsers that strives to calculate the IP address of a domain present on a page. In other words, it’s already prefetching the information — prior to it being requested.

How Does dns-prefetch Help?

On its most fundamental level, one of the core activities that have to be performed — for every time one navigates to any domain is called DNS resolution. Simply put (and without diving too deep into it), DNS resolution is responsible for translating a human-understandable website name such as example.com, to a machine-readable code/language (what have you), such as 93.184.216.34.

In technical terminology, a lot of us know these numbers as an IP address.

Enter dns-prefetch

Resolving for domain names (such as example.com), as discussed, requires computations. Obviously, these occur in the background, and no action is required on your end, it adds to the latency time nonetheless. For the purposes and context of this post, we can define latency as the time it takes to convert a website name to an IP address.

Every latency can affect your page load.

With dns-prefetch applied, the information is already retrieved beforehand — behind the scenes, and therefore, saves some time, or at the least, it’s perceived to do so.

The entire benefit and logic of dns-prefetch revolves around the expectation that when a request to the resource to which dns-prefetch is applied is made, it would save some time fetching it — leading to improved load times and better user experience.

For example, it can be beneficial when you need fetches from an external CDN to properly load your on-page content.

a real world example of dns-prefetch
An example of a real-world `dns-prefetch’ hint from this site. Go to the source code of any page, and search for “prefetch.”

Knowing what we know now, there’s a question that needs to be asked: wouldn’t it be helpful if we dns-prefetch everything? The answer is no. As for why, read more below.

Two Best Practices for dns-prefetch

  1. Page load is one aspect. The other is how much taxing it is on the networks, and what is critical versus non-critical. And while dns-prefetch is a light request, each individual one can culminate towards lack-luster page load. For this reason alone, it should be used with caution, and to only apply it to non-critical resources, because for critical ones, it’s best to use preconnect (in comparison) — a concept that’s worthy of a separate post.
    On a high level, though, DNS resolution is only part of the number of processes that need to happen. Another activity that needs to be performed, is making a connection to that website — which is where preconnect can come in handy. Now, the reason preconnect is a better choice is because to make the connection, the task of DNS resolution needs to be accomplished in the first place — thus eliminating the necessity of a dns-prefetch, and again, why it’s recommended for critical resources, whereas, the prefetch for non-critical.
    Lastly, dns-prefetch is often used in conjunction to preconnect requests — which can be more costly in terms of CPU time. So any similar resource hints on top should be done sparingly.
  2. There is no need to dns-prefetch assets from your own website. Your site’s IP address is likely resolved by the time the browser even encounters the command/hint.

How To Use dns-prefetch

It’s important to note that the command/hint for dns-prefetch needs to go within the <head></head> section.

Coming back on how to use it though, below is the code/syntax:

<link rel="dns-prefetch" href="domain/subdomain name">

For example:
<link rel="dns-prefetch" href="https://example.com/">

Sub-domain example:
<link rel="dns-prefetch" href="https://fonts.example.com/">

WP users can simply make tweaks to their header.php file, or via a plugin that does the same, to implement their dns-prefetches.

You May Also Want to Check Out:

Summary

If you hadn’t noticed, but throughout this post, I’ve referenced dns-prefetch as a hint. So realize that the browsers might fail to adhere to it. However, most, if not almost all, browsers can easily handle such a directive.

And remember: Only save your dns-prefetch instructions for non-critical assets. Otherwise, over-using it may end up working against you. Like most things in life, this is also one of those scenarios where going excessive can be detrimental, but it can be advantageous in moderation. If in doubt, consult with your web development and or the networking team.