Is your website loading too slowly? Do you want to speed up the loading of your WordPress web pages?
If the answer is yes, this guide is for you.
The loading speed of a website is a very important positioning factor for Google. But the important thing is that a site that loads fast improves the user experience and improves algorithms such as the bounce rate, and improves your SEO.
In this article we will see how to speed up your website using external DNS prefetch.
What is DNS prefetching?
DNS prefetch is a feature compatible with most current browsers. It is a directive that you can add to your site’s header to tell the browser which external domains to prefetch.
Basically you are telling the browser, “I will need these external resources at some point, so retrieve them for me and show them to the user when they want to use them.”
The external DNS prefetch works like this:
- Loading of the web.
- The browser finds the prefetch link.
- The browser downloads the resources to be prefetch.
- Resources are stored in the browser cache.
DNS prefetch allows the browser to resolve domain names with their corresponding IP, as a background process, performing a DNS query as the user views your pages.
What external resources are you referring to?
There may be many but the main ones, which currently all or almost all of us upload to our sites are usually scripts from different Google services, sources (also from Google), and scripts from advertising services, crawling, tracking, videos, social network timelines, etc.
In the waterfall of loading analyzers like GTMetrix you can easily see them…
All these external resources slow down the loading of your pages, as you have to recover the scripts, fonts, etc. from other domains before they can be applied to your website.
Why is external DNS prefetch important?
DNS queries take time to resolve. If they are from a well-optimized server they can take as little as 10 milliseconds, but can take as long as 200-400 milliseconds on slow domain name servers.
A typical website loads more than 20 external resources without knowing it. And yes, I’m talking about Google Analytics tracking codes, the Facebook pixel, YouTube scripts, Twitter resources, Hotjar tracking, Google feeds and many more…
With such an amount of external resources, DNS prefetching can speed up the loading of external domains, especially for mobile users.
So when a user clicks on one of these prefetch domain resources, time can be saved from 200 milliseconds to over 2 seconds, making a huge difference in page loading times.
These delays will be added to the rest of the time you wait for your site to display your pages to visitors, causing in some cases bad viewing experiences, slow loading times, in short, a not very pleasant or fast navigation.
How do I prefetch external DNS into my WordPress?
There is not only one way to prefetch external DNS, so let’s see a few, then you choose the one that best suits your site or knowledge, as this is for all user levels.
But the first thing is to identify what external resources your website is prefetching from external DNS, right?
Identify external DNS
There are many ways to do this but my favorite is to use the GTMetrix YSlow analysis.
Go to the GTMetrix website, do an analysis of your website and when it’s done, click on the tab called YSlow, where you will find indicators of something called Reduce DNS Lookup, which are the queries to domains that it suggests you reduce.
You’ll see all the domains that your website needs to query to display resources. You’ll see yours, of course, but also the external ones.
An obvious strategy would be simply not to load those external resources but what if you need/want them? Well, let’s not do it the easy way, which is to remove all the plugins or themes that load external resources and let’s try to take advantage of those resources but well optimized.
So, once we have identified the domains from whose DNS we are loading resources, it’s time to prefetch them.
External DNS prefetching in the theme’s header
The most basic and simple way to prefetch is to add a few lines in the header of the child theme, usually the header.php file, between the <head> and </head> tags.
So, this would be an example of the code to be inserted in the header:
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//www.googletagmanager.com">
<link rel="dns-prefetch" href="//otherexternaldomain.com">Code language: HTML, XML (xml)External DNS prefetching with a function
If you prefer not to enter the external domains in the header you can also do so by means of a function in the functions.php file of the active theme, as follows:
/* External DNS prefetch
function wphelp_dns_prefetch() {
echo '<meta http-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="//ajax.googleapis.com" />
<link rel="dns-prefetch" href="//apis.google.com" />
<link rel="dns-prefetch" href="//google-analytics.com" />
<link rel="dns-prefetch" href="//www.google-analytics.com" />
<link rel="dns-prefetch" href="//ssl.google-analytics.com" />
<link rel="dns-prefetch" href="//youtube.com" />
<link rel="dns-prefetch" href="//api.pinterest.com" />
<link rel="dns-prefetch" href="//connect.facebook.net" />
<link rel="dns-prefetch" href="//platform.twitter.com" />
<link rel="dns-prefetch" href="//syndication.twitter.com" />
<link rel="dns-prefetch" href="//syndication.twitter.com" />
<link rel="dns-prefetch" href="//platform.instagram.com" />
<link rel="dns-prefetch" href="//s.gravatar.com" />
<link rel="dns-prefetch" href="//s0.wp.com" />
<link rel="dns-prefetch" href="//stats.wp.com" />';
}
add_action('wp_head', 'wphelp_dns_prefetch', 0);Code language: HTML, XML (xml)As you’ll see, there are plenty of examples of external DNS that you may be using resources on your website, such as Google feeds, analytics, YouTube, social networks or even WordPress.com if you use Jetpack modules.
External DNS prefetching with free plugins
There are several plugins that will allow you to do the DNS prefetch, these are some of the most interesting…
SG Optimizer
If you have your hosting in SiteGround the SG Optimizer plugin also has the possibility to do the prefetch of external DNS.
Just go to the environment optimization section, activate the feature of DNS pre-fetch for external domains and add one by one those that are loading resources on your website, as we saw above.
LiteSpeed Cache
If your hosting uses LiteSpeed as a caching system then the official plugin, also free, also has the DNS prefetch functionality.
Flying Scripts
Under this curious name of Flying Scripts hides a simple but effective plugin to prefetch any script, from external DNS or wherever you want.
Its operation is somewhat different from previous methods, because here, instead of indicating the domain to prefetch you must write the name of the script in the box of the plugin settings.
So before filling in the “keywords” box you should check the waterfall of the GTMetrix analysis to identify the names of the scripts, and put them there one on each line.
There are other plugins, paid, like Perfmatters or WP-Rocket that also include this kind of functionality, but with the free ones you have more than enough … and they are free.
Nothing else, I hope you have understood the importance of external DNS prefetching when optimizing the loading speed of your web and found a solution to it.
Any doubt you may have let us know in the comments.
Read this post in Spanish: Precarga de DNS externas en WordPress
