Do you have a slow website? Do you want to speed up your website? If your answer is yes, this article is for you.
Page speed is one of the most important ranking factors for Google. A fast loading site improves user experience and reduces your bounce rate which improves your SEO.
“A 100-millisecond delay in website load time can hurt conversion rates by 7 percent”, according to biannual study on performance metrics conducted by Akamai in 2017.
In this post, I’ll share a simple trick to speed up your website with DNS prefetch.
What is DNS Prefetch?
DNS prefetch is a feature supported by modern browsers. In a nutshell, it’s a new code directive you could add to your page <head> element to tell the browser which domain to fetch.
You’re basically telling the browser — I’ll need these resources at some point so go ahead and fetch it for me right away. A simple trick to speed up your website.
Let’s look at the code.
<link rel=”dns-prefetch” href="//fonts.googleapis.com">
This code tells your browser to prefetch the Google Fonts’ domain.
DNS prefetching allows your browser to automatically resolve domain names to their corresponding IP addresses — in the background. It performs DNS lookup as a user is reading through the page.
So, why is DNS Prefetch important?
DNS lookup takes time to resolve. It could be as fast as 10ms on a finely tuned server. Or as slow as 200-400ms on the poorly configured domain name server. The average time you’re expecting is 50-70ms for each domain.
To get more accurate info on your current page speed, I recommend running the test on these websites:
Choose a similar location for your test and if possible choose location closest to your server.
Let’s see how DNS lookup looks like on these sites.
A typical page loads more than 20 external resources unknowingly. Yes, I’m talking about Google analytics tracking, Google Adsense, Facebook Pixel, Hotjar tracking, and more.
With this amount of external resources, DNS prefetching will speed up cross-domain loading especially for mobile users. When a user clicks on any of these pre-resolved names, they will on average save about 200 milliseconds. More details on that here.
Setting up DNS prefetching would also increase your website speed score significantly on Pingdom and GTMetrix.
[click_to_tweet tweet=”DNS lookup takes times to resolve. Speed up your website with DNS prefetch.” quote=”DNS lookup takes times to resolve. Speed up your website with DNS prefetch.”]
How to Set Up DNS Prefetching in WordPress?
Now that you know how a DNS preload code looks like, there’re a couple of ways you could set up DNS prefetch in WordPress site. We’ll go through each method in a bit.
Update Your Theme’s functions.php File
If you’re familiar with how WordPress theme works, you could include the code snippet below to your theme’s functions.php.
When creating your WordPress site, you should set up your theme’s child theme. It’s not recommended to make changes to your theme directly as you would lose all those changes when you do a theme update.
Let’s take a look at the code.
We are using WordPress action to hook our code to wp_head. This action informs WordPress to inject our HTML code on the page header automatically.
The list of domains above is popular domains used in most websites. If you’re not using the service, you could remove that from the code. For example, you’re not using Google Adsense on your site, there’s no reason to prefetch the domain.
You should only prefetch domains that relevant to your site. I will teach you how to find a list of domain names to prefetch for your website.
Configure Your WordPress Plugin
There’re several plugins you might have already installed on your WordPress site that support DNS prefetching. WP Rocket — best premium caching plugins for WordPress — has built-in support for this. Which is great.
Navigate to Settings > WP Rocket > Preload and scroll down to “Prefetch DNS Requests” section. Add all the domain without http:. Like this: //fonts.googleapis.com
If you’re using WP Rocket, don’t forget to check my detailed guide on the best WP Rocket settings for WordPress site.
If you don’t have WP Rocket installed, you could install LiteSpeed Cache for WordPress plugin — an all-in-one site acceleration plugin. It’s pretty similar with WP Rocket in terms of feature and it has DNS Prefetch support. To get started, click on the green button to show advance options.
To configure go to LiteSpeed Cache > Settings > Optimize. Scroll down to “DNS Prefetch” and add all the domains.
For more details on how to install a WordPress plugin, check out our step-by-step guide.
[click_to_tweet tweet=”Speed up your website load time with WP Rocket’s DNS prefetch.” quote=”Speed up your website load time with WP Rocket’s DNS prefetch.”]
What domain name to prefetch?
Now that you know how to configure DNS prefetch in WordPress, how do you know what domain names you need to prefetch?
You might wonder could I just prefetch all the domain names out there? The short answer is no. The browser uses your machine’s DNS cache — which is limited — to resolve the domain name. This limited cache cause previously resolved the domain name to be evicted from the cache in order for new DNS resolution to take place.
So take the list of domains above with a grain of salt and use tools such as Pingdom to figure out what domain name you need to prefetch. Head over to Pingdom, enter your website and run the test.
Frequently Asked Questions
Does DNS prefetching work in Firefox/Chrome?
Yes, it basically just works. You don’t have to do anything.
How do you clear Chrome DNS cache?
Navigate to chrome://net-internals/#dns and press “Clear host cache” button.
How to disable DNS prefetching?
For Chrome browser, click on Menu > Settings and scroll down and select Advanced option. Scroll down to the “Privacy and Security” and toggle the “Use a prediction service to load pages more quickly” option to disable or enable DNS Prefetch.
In Firefox, type “about:config” in the browser address bar. Search for “network.prefetch-next” and double click it to set it to false. Setting it to false would disable DNS prefetch.
Final Thoughts
DNS Prefetching is a simple web performance optimization technique. Knowing what domains your website might use and pre-fetching the domains can shave some milliseconds per domain from your loading experience — simply by reducing the DNS resolution time.
Now that you know how to setup DNS prefetch in WordPress, here are some tips to choose which method to apply.
If you’re totally fine with a bit of coding or you don’t want to install a plugin for that, updating your child theme’s functions.php file is the way to go. Copy the code snippets above as a starting line and add or remove domains relevant to your site
If you want the best speed performance for your site, WP Rocket is a must. It’s the best caching plugin for WordPress with DNS prefetch support. Sadly, it isn’t free. You could get a single license for 1 website @ $49/year.
If you’re looking for a free plugin, LiteSpeed Cache is an alternative you could install.
I hope this article helped you learn how easy it is to embed video in WordPress blog posts and pages. If you want to know more tips to speed up your WordPress site, I recommend you to read this detailed article on speed optimization.
Thanks- I am going to re-read this in more depth- lots of useful info! —Paige Bainbridge (paigebainbridge.com)
Feel free to let me know if you need any help 🙂
Interesting! I’ve struggled to improve my site’s speed, so thanks!
It’s an easy win. Let me now how it goes.