Today I will show you how to enable DNS prerender and DNS prefetch in WordPress. Follow this guide carefully and by the end, your website speed will increase by 100% to 150%.
How To Enable DNS Prefetch & Prerender In WordPress
I know that you are in a hurry; but before you move forward implementing these techniques on your site, let’s discuss a bit about them.
What is DNS Prefetch?
DNS Prefetch is a method by which web browsers proactively resolves the domain name in the background. Now I would like to point out that DNS lookup are very small in terms of bandwidth, but their latency can be quite high. And that’s the reason why it’s usually suggested to not add more than five DNS prefetch per page.
It is currently supported by Google Chrome 29+ versions and Firefox 46+ versions. I would also like to point that Chrome can prefetch up to ten resources in parallel, but Firefox can also fetch one resource at a time.
You can learn more about it on following sites:
If you are a non-wordpress user, then you can use simple HTML link tag with rel=”DNS-prefetch” to perform the lookup. You can see the detailed example below.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
In the above example, you can see that I have added the Google web fonts services as the reference domain.
What is DNS Prerender
If you are confident that your visitor will open a particular link, then you can use DNS prerender. It is a technique in which all sort of files ( including HTML, images, js, CSS, fonts, etc. ) will be loaded in the background. It is just like opening a new link in a new tab, but this tab is hidden.
Once the visitor clicks on the specified href, the page loads instantly without performing. Browser doesn’t show any sort of resource loading because everything is already loaded while you were reading the previous page.
You can read more about this technique in detail at:
You can see the complete example below.
<link rel="prerender" href="https://google.com/ncr">
In this example, I have added a link to Google NCR ( no country redirect ) using rel=”prerender”.
Code Snippet To Enable DNS Prefetch In WordPress
If you are a programming nerd and want to explore new possibilities with wordpress, then you should use custom code snippets rather than plugins.
Below I have shared a simple and easy to understand wordpress PHP function.
You just need to copy the code and paste it in your theme’s function.php file. I will request you to copy the code excluding the opening PHP tag as it might break your site.
In my function, I have used three variables to store three URLs. First is $homepage for storing the root domain and the next two are $next_post and $prev_post for storing the next and previous post permalink.
Then using the if statement if checked whether the permalink is present or not. If present then this function will perform three pre-fetching and pre-rendering on three URLs.
Using Instant Articles WordPress Plugin
If you don’t like messing up with codes or don’t have time to manually edit your theme, then their’s a wordpress plugin named instant articles which can help you to add DNS prefetch to your wordpress website.
Using this plugin is really easy. It has very helpful control panel from where you can perform lots of powerful changes without touching a single line of code.
Now you just need to follow the steps carefully.
- Download the plugin from the official repository.
- Activate the plugin.
- Navigate to a new menu in your wordpress admin area named “Instant Articles”.
- Select “Pre-render latest 2 posts on frontpage” option.
- Choose “Pre-render pagination links”.
- Select “DNS prefetch” and add your CDN domain ( if you use any ), add https://fonts.googleapis.com if you use webfonts.
Leave the rest of the options as it is and click on “Save” button. If you use CloudFlare and any cache plugin, then make sure to purge all your cache. Now open a new browser and load your website. Finally, click ctrl+f5 to hard refresh your browser and to reload all your static files.
Now try to navigate to next or previous post from any of your article, I know you will be amazed.