How to set up DNS prefetching in WordPress

Domain Name System Prefetching popularly known as DNS prefetching is the process of resolving domain names before users request for it. It is mainly used to make websites load faster and increase overall performance.

DNS prefecthing in WordPress is a popular way to make websites load faster by prefeching regular requested resources such as Google fonts, Google analytics, Font Awesome and more.

In this post you will learn how to add DNS prefetching in WordPress with the help of a plugin or manually. This can help make WordPress site load fast.

How does DNS Prefetch work?

DNS Prefetch works in the background. If you are loading resources from many domains. This normally will affect the website load time because the browser will take about 100ms to perform DNS lookup.

That means if you have up to 5 domains you are loading resources from, the browser might take up to to 500ms for look up.

But what DNS prefetching does is that it makes the domain you are relying on load in the background before a user clicks a link that will trigger it.

This means that by the time the user clicks on it, the resources is ready and the page will load instantly.

If you have a lot of external resources you rely on, DNS prefetch can improve your load time. For a typical WordPress site using Google fonts, Google Analytics and so on, DNS prefetch can save up to 500ms of load time.

What to use DNS prefetching for

There are many resources you can prefetch to make your site load faster. They include:

Google fonts
Google Analytics
CDN URL
Google Tag Manager
Font Awesome
Google map
And any external resources

How to set up DNS prefetching in WordPress

Follow these steps to enable DNS prefetching in WordPress:

1. Install a DNS Prefetch plugin

The easiest way to implement DNS prefetching in WordPress is to use a plugin. This will save the stress of having to edit your theme files.

The best plugin to handle this is Perfmatters. It is a premium plugin with lots of amazing features to speed up a WordPress website. Another alternative is WP Rocket.

For Perfmatters, you will need to download the plugin from their site. Install and activate it in your WordPress dashboard.

If you will rather not use a plugin but do it manually, then jump straight to point 4.

2. Add domains to prefetch

After installing and activating the Perfmatters plugin. Go to plugin settings and click on the extra tap. There you can add domains to prefetch.

You should only add one domain per line following the pattern below:

//fonts.googleapis.com
//www.google-analytics.com
//cdnjs.cloudflare.com
//www.googletagmanager.com

For WP Rocket, go to the Preload tab and scroll down to Prefetch DNS Requests. There you can input the URLs you want to prefetch same pattern as the one above.

3. Save changes.

Make sure you save changes. That is all.

4. Add DNS prefetching in WordPress manually.

If you prefer to add DNS prefetching in WordPress manually without any plugin then you will have to edit your theme’s functions.php.

Just add the code below to your functions.php. In the example below, I have added Google Analytics, Google Tag Manager and Google fonts as a guide. You can edit it and you can also add more.

//* DNS Prefetching
function dns_prefetch() {
    echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://www.google-analytics.com" />
<link rel="dns-prefetch" href="https://www.googletagmanager.com" />
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
}
add_action('wp_head', 'dns_prefetch', 0);

Just add a new line that is like this:

<link rel="dns-prefetch" href="https://DOMAIN.com" />

Conclusion

DNS prefetching can speed up your website, especially the mobile version. You should notice a difference, especially if you rely on a lot of external resources.

Remember that while this can speed up your site, the WordPress hosting you use and the Theme are the most important factor in how fast your site is. I recommend Cloudways for WordPress hosting and you can see my Cloudways review for reasons. If Cloudways is too much for you then Hostinger and Bluehost will work well for small websites.

I also recommend GeneratePress for theme and you can see my GeneratePress review for reasons