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.
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 220.127.116.11.
In technical terminology, a lot of us know these numbers as an IP address.
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.
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.
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
- 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-prefetchis 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.
dns-prefetchis 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.
- There is no need to
dns-prefetchassets 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
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:
- How to Add Cloudflare to GoDaddy Managed WordPress
- How to Anonymize IP Addresses With GTM (and Then Verifying the Same)
- How You Can Find and Remove Unused CSS Code From Your Site
- How to Exclude Your Home Wi-Fi in Google Analytics Tracking, and Then Verifying the Exclusion
- What Is Cache Flushing in WordPress?
- Link Rel Preload and Site Speed: A Preliminary Guide
- Static and Dynamic Content: Delineating the Differences
- Basic Differences Between a CSS ID and a CSS Class
- A Basic Introduction to HTML5 Semantic Elements
- All Other Topics and Posts
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.