3 Best Ways To Add DNS Prefetching In WordPress [Updated]

While professionally maintaining a WordPress website, it’s everyone’s expectation to have a really fast website. Now it’s more important to have a speedy website as Gooogle started to rank up the faster website on the search result.

Don’t think it’s hard stuff to make your website load quicker than 2 seconds.

DNS prefetching is one of the smart ways to load your WordPress site with lightning speed. Some months earlier my website took about 4-5 sec to load completely. Therefore I was searching for a method that can make a great impact on the loading speed. Some of those setups worked but not as well as DNS prefetching did.

After applying prefetching and prerendering to the pages, now it takes only some milliseconds to load completely. And I was finally able to meet my desired speed. One more important thing is that some blogger not recommends using prefetching and pre-rendering to the pages. (You will see that if you Google for “DNS prefetching”).

Their recommendation is based on, “prefetching can break your website design or function”. But they are true only if your configuration is not correct. So in this article, I will mention the methods to configure DNS prefetching on a WordPress site.

Tip: Before getting started, I think it’s important to let you know that you can try our website optimization service if you don’t want to go through all these optimization processes. This service is designed to help people optimize their sites for upcoming core web vital updates and a lot of people already enrolled their sites into it. The service’s price point is very friendly plus I will provide you an additional $50 off coupon, which will make things much easier on your side – SPEEDY50.

Just before entering in the configuration part, let’s understand the basics of prefetching and prerendering.

What is DNS Prefetching

This is a method or attempt to resolve the domain name or a page before a user try to visit the link. There is a normal DNS resolution mechanism of computers which complete this task. During this resolution, no connection to the Google is used. The browsers like chrome, firefox caches the contents of a page in the background, making it quickly displayable to the user if they click on that specific link.

Once a domain name has been resolved and the user follows the link, there will be no effective delay due to the DNS resolution. And the final result is a quick loading of that page or a domain. But the process of resolution is done with an expectation that can be followed by the user in the next step, which may or may not happen.

 

What is Pre-rendering

The idea of pre-rendering is similar to the prefetching but pre-rendering have some extensions which are generally used by our browsers (especially chrome and internet explorer). While prefetching downloads or cache the content of the webpage, prerendering render the whole page in the background and when the user clicks on that link, the downloaded page is immediately replaced with the present one.

 

What are the advantage of prefetching and pre-rendering

Let’s see what are the major advantages of using prefetching and pre-reading to your website.

1. Prefetching and pre-rendering ultimately result in a more faster page loading and fluent user experience.
2. Due to the pre-downloading of contents admin of the website gets lower bandwidth use, as the browser won’t send the request and downloading all those stuff at the same time.
3. The efficient page loading attracts more users as it really feels like hosted locally.

Now Let’s Check How Much Loading Time can be reduced Using DNS prefetching

The amount of time reduced generally depends upon the type of resources you are using with your WordPress but typically you will see a time reduction of 400 to 500 ms.

To find out how much time we can save by using this trick, I have tested my website twice on Pingdom, prefetching disable mode and prefetching enable mode respectively. Let’s see what is the difference I have got.

The first test without prefetching and pre-rendering…

Then the second test was conducted with prefetching enable mode…

In these two different test result, you will see that I was able to save about 413 ms loading time after applying prefetching. And this reduction means a lot to you when your primary aim is to make your website load very quickly. Deduction of half of the total loading time will make your website 2x faster.

 

How To Configure DNS prefetching In WordPress

Implementation of DNS prefetching in WordPress site is not a hard process. You have to add the given code to your theme’s function.php file. Again if you are not using a customized theme function.php file shouldn’t be changed or don’t add the following code into your function.php file.

Instead, use a child theme and add the code into the function.php of your child theme. The reason you shouldn’t add that code directly into the main theme file because it can break your theme and produce some visual problem. Again you may still think about “Why you can’t add that code into the header.php file” Yes, you can but this is not the best way to edit the header.php of your theme.

In future, if the theme developer updates the theme, you are going to lose all the changes that you have made inside your header.php file. So the code I use for my personal website and similarly for the client websites is the following one.

//* Adding DNS Prefetching function stb_dns_prefetch() { echo '<meta https-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="//fonts.googleapis.com" /> <link rel="dns-prefetch" href="//fonts.gstatic.com" /> <link rel="dns-prefetch" href="//0.gravatar.com/" /> <link rel="dns-prefetch" href="//2.gravatar.com/" /> // Add more external domain here like these if you want <link rel="dns-prefetch" href="//1.gravatar.com/" />'; } add_action('wp_head', 'stb_dns_prefetch', 0);

*To add more external domain test your website on Pingdom or Gtmetrix and go to the “DNS lookup“. You will find those domains for which you can set up your DNS prefetching.

Extra Note : If you are not a WordPress user take advantage of Meta tags and head. Just add one HTML meta tag and one link tag for each external domain, you have found on the DNS lookup, into the head section of each webpage. To easily do that just use the header and footer plugin. So the code is;

<meta https-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="//fonts.googleapis.com" /> <link rel="dns-prefetch" href="//fonts.gstatic.com" /> <link rel="dns-prefetch" href="//0.gravatar.com/" /> <link rel="dns-prefetch" href="//2.gravatar.com/" /> <link rel="dns-prefetch" href="//1.gravatar.com/" />

Add prefetching with help of WordPress plugins

If you don’t want to go with the coding part then you can use a WordPress plugin to do that for you automatically. Lightspeed cache: LiteSpeed Cache is an all-in-one site acceleration plugin specially designed for WordPress. It comes with lots of great features like other caching plugins + Smart preload crawler with support for SEO-friendly sitemap, which is really cool. To implement DNS prefetching, from the WordPress Dashboard you should navigate to LiteSpeed Cache > Settings > Optimize. Scroll down the DNS Prefetch. Enter the domain names to prefetch, one per line, using the format //www.example.com Automatic DNS prefetch: The only thing you need to do is install the plugin and let it do the magic for you. Actually, it comes with preset domain configuration so you won’t have to do it by yourself. *This plugin is not updated with last three major WordPress updates. So be careful when you are using.

 

Conclusion

I hope this tutorial will help you to build a more optimized, fast and better website. Please let me know if this works for you to build a better website in the comment section below. Also, if you have any future topic request, you can mention that too. I would love to hear from you 🙂

More Articles:

6 Easy Tricks To Reduce Server Response Time

4 Ways To Use Cookie-free Domains For Serving Static Contents