Before we dive deeper into understanding DNS prefetching, we need to first break down what is called the DNS.
What is a DNS?
DNS stands for Domain Name System and it’s responsible for turning domain names into IP addresses.
For example:
Domain name: google.com → turns to IP address: 123.4.5.678 — hence, allowing browsers to connect and access the website’s content.
How DNS works
- When you type a domain name (such as edgemesh.com) into your web browser, your computer sends a request to a DNS resolver.
- This resolver acts as an intermediary between the DNS and your computer
- The resolver checks your device’s local DNS cache to see if it already has the domain’s IP address. If the IP address is found and valid (based on Time-to-Live (TTL)), the process is complete and the website is displayed to you.
💡Side Tip → The DNS resolver cache is a temporary storage on a device that contains DNS records of previously visited websites.
- Meanwhile, if the resolver doesn’t find the IP address in the cache, it starts a recursive query process to all servers.
- First, it sends a request to the Root DNS Server.
- The root server responds to the resolver with the IP address of the domain’s TLD (this could be .com, .net, .org, etc.)
- Next the resolver sends a request to the TLD server of the domain (in this case, .com), requesting the IP address of the authoritative DNS server responsible for that domain name.
- Once the authoritative DNS server responds, the resolver caches the IP address on your device.
- Next, the browser uses this IP address to establish a connection with the server hosting your website.
- Finally, once a connection is established, the website displays on your screen.
Recommended → How To Reduce DNS Lookup To Speed Up Your Website
What is DNS prefetching?
DNS prefetching is a process that involves resolving a website’s IP address and caching it in the browser cache or DNS resolver cache. This technique reduces the time taken to retrieve a website’s DNS information when users try to visit.
Think of it as telling the browser that a user would need certain resources in the future, as a result, you want it available when the user makes the request.
Here’s an example:
Say you have a website with different fonts, and can anticipate that some users would likely want to switch to Google fonts once they scroll to the middle of the page.
You can input the code below in the <head> of your HTML so as to prefetch Google fonts ahead of time (more on this in the next section).
<link rel=”dns-prefetch” href="//fonts.googleapis.com">
The idea behind DNS prefetching is to mitigate latency by anticipating websites users a more likely to visit based on:
- Browsing pattern. This analyzes the user’s previous visits and identifies recurring visits to certain domains. Once it recognizes these patterns, it prioritizes and fetches the DNS information of those websites that are frequently visited, allowing for a faster loading time upon subsequent visits.
- Links present on the website. DNS prefetching also considers links within a webpage. It does this by scanning the website’s HTML code to identify the hyperlinks going to another website. Then, it prefetches the DNS information of websites users are likely to visit.
In general, instead of waiting for the user to initiate a request and then performing the DNS lookup, prefetching fetches and caches the DNS information ahead of time. This way, when the user does access the anticipated websites, the DNS resolution step is already completed, resulting in reduced latency and faster website loading.
Related → What Is A CDN (Content Delivery Network) And How Does It Work?
How to set up DNS prefetching on your website
You can set up DNS prefetching on your website using three methods.
1. HTML link prefetching
This DNS prefetching technique allows you to prefetch resources from specific domain names in the “href” attribute.
Below is the syntax:
<link rel=”dns-prefetch” href=”https://www.yourwebsite.com”>
Insert the <link> tags within the <head> section of your HTML document, typically before other external resource declarations like stylesheets or scripts.
One benefit of using the HTML link prefetching method is that it’s widely supported by most modern browsers except Opera Mini, and older versions of Safari.
2. HTTP header prefetching
This technique is useful if you have control over the server-side configuration of your website.
To do this, you input the syntax below within your HTTP response headers:
</static.example.com>; rel="dns-prefetch"
The function of this syntax is to resolve and cache the DNS information, hence, reducing the latency associated with DNS resolution when the user accesses that domain.
3. JavaScript-based Prefetching
The approach to this DNS prefetching technique involves using JavaScript code to prefetch resources based on certain events or user interactions on the website.
var dns = new DNS();
dns.prefetch("www.example.com");
document.getElementById("btn").addEventListener("click", function() {
var prefetchLink = document.createElement("link");
prefetchLink.rel = "prefetch";
prefetchLink.href = "/path/to/resource";
document.head.appendChild(prefetchLink);
});
What are the challenges with DNS prefetching?
1. Dependency on user’s network conditions
The effectiveness of DNS prefetching is influenced by the variability of the network conditions experienced by users.
For instance, a user with a high-latency network (such as a slow or congested connection) wouldn’t enjoy the benefits of DNS prefetching. This would also impact the DNS response time due to the time it’ll take the DNS servers to respond to the browser’s query.
2. Inaccurate predictions
DNS prefetching techniques all employ predictive models to help anticipate user behavior based on their existing pattern (e.g., frequently visited websites). However, these models can sometimes be inaccurate due to various factors such as:
- Changes in user behavior. Users' interests, preferences, and browsing patterns are likely to change over time, making it difficult for these systems to accurately anticipate the user’s next move.
- Contextual variations. The context surrounding a user’s interaction with a website also plays a significant role in determining their needs. For instance, a user’s interaction may differ based on their device, location, or time of the day. If the predictive models fail to take this account, it may prefetch unwanted resources for the user.
3. Privacy concerns
Privacy concerns in DNS prefetching arise from the proactive resolution of domain names, which can potentially expose users' browsing patterns and intentions.
Taking browsing patterns as an example, DNS prefetching can expose the websites users are likely to visit, the sequence of their visits and the frequency of all these interactions (daily, weekly, or monthly). In the wrong hands, this can be valuable to shady advertisers, data brokers, and other parties interested in tracking user activities — potentially compromising user privacy.
Best practices using DNS prefetching
While DNS prefetching is a good practice that can help you speed up your website speed, doing it excessively can consume additional bandwidth and resources unnecessarily.
Here are some best practices to help you prefetch appropriately.
1. Only prefetch critical resources
Critical resources such as external stylesheets, scripts, or large media files should take the forefront in your prefetching approach. Prefetching these resources would speed up the rendering and loading of your page which would then enhance your performance.
2. Optimize your DNS TTL (time-to-live)
You should configure the values of your TTL in order to maintain a balance in performance and consumption for your DNS resolutions. Ideally, longer TTL values reduce the frequency of DNS resolutions, hence, improving performance by reducing the time spent on DNS lookups.
However, try not to set exceedingly long TTL values as they may delay updates to the DNS records.
3. Set prefetching thresholds
It’s recommended to set appropriate thresholds based on factors such as user interactions, link hover duration, or other relevant metrics. This is to avoid excessive prefetching for less probable scenarios.
4. Test across network conditions
Evaluate the impact of DNS prefetching under different network conditions, such as high latency, varying bandwidths, or intermittent connectivity. Test the performance of the website or application across different devices, browsers, and network environments to ensure that prefetching strategies remain effective in various scenarios.
5. Prioritize user privacy
Implement DNS prefetching in a privacy-conscious manner. Ensure users are aware about your prefetching activities, including the purpose and scope of data collection.
You should also offer opt-out mechanisms or privacy settings that allow users to control their participation in prefetching activities.
Related → What is Cookie Syncing and Why Should You Care?
