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 new 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.

via GIPHY

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.

Pingdom - DNS Lookup
Pingdom – DNS Lookup
GTMetrix - DNS Lookup
GTMetrix – DNS Lookup
WebpageTest - DNS Lookup
WebpageTest – DNS Lookup

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.

DNS lookup takes times to resolve. Speed up your website with DNS prefetch.Click To Tweet

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

WP Rocket - DNS Prefetch

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.

Litespeed Cache - Options

To configure go to LiteSpeed Cache > Settings > Optimize. Scroll down to “DNS Prefetch” and add all the domains.

Litespeed Cache - DNS Prefetch

For more details on how to install a WordPress plugin, check out our step-by-step guide.

Speed up your website load time with WP Rocket's DNS prefetch.Click To Tweet

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.

Pingdom - Request by domain

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.

DNS resolution time will slow down your website. Resolving domain names in advance with DNS prefetch could improve your page speed.

Yuyu

I am a front-end developer and I teaches entrepreneurs who want to grow their audience, start an online business, and pursue their dream life. When I spend time away from the computer, I enjoy reading books and having a cup of green tea.

All author posts
Related Posts
7 Best Tools To Monitor Website Uptime 1

7 Best Tools To Monitor Website Uptime

Unexpected website downtime is a loss of opportunity especially when…

7 Ways to Speed up Chrome Browser 2

7 Ways to Speed up Chrome Browser

Are you using Google Chrome on a daily basis? What could you do when…

How to Install a WordPress Theme 3

How to Install a WordPress Theme

Now that your WordPress site is up and running, you’re probably can’t…

DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime. . No spam, I promise.
close-link
Share
Tweet
Pin
Buffer