Ever wondered how to make your wordpress site super fast without using any cache plugin. Well, that’s possible if you enable DNS Prerender and DNS Prefetch in WordPress.
Today in this guide I will discuss two different methods to add DNS prefetch in wordpress. In a first way, I will provide you with a custom code snippet. In the second method, I will use a free wordpress plugin named Instant articles and will show you how to configure it correctly.
Contents
How to Enable DNS Prefetch in WordPress
The code which I have shared below will help you to enable DNS prefetch in wordpress for next post, previous post, and homepage.
Note: You cannot apply this technique to all of your posts and pages because their’s a limitation from client side web browsers. I have discussed this topic in detail at the bottom of this post. If you are interested, go ahead and read it.
Before you move ahead and copy the codes, let me provide you some necessary steps.
- You have to paste these snippets in your theme’s functions.php file.
- Make sure to create a backup of your theme’s files before editing them.
- If you are uncomfortable with theme editing, then follow my next method in which I use a plugin.
- Paste the snippets at the bottom of your functions.php file.
DNS Prefetch Homepage in WordPress
The name of the function is wpvkp_dnsprefetch_homepage(). I have used a variable named $homepage which stores the value fetched via wordpress standard function get_home_url(). You can see the whole php code snippet below. If you want to use it then you will have to add the exact code in your theme’s function.php file. Please don’t copy the first line of the snippet.
As you can see in the code I have used the if statement so as to check if the current page is homepage or not. If the condition is true, then this function performs DNS prefetch and preload for the root URL. Then using the wp_head I have registered the function in the head section of the website. I have also added a priority support of 10.
DNS Prefetch Next And Previous Post in WordPress
The name of the function is wpvkp_dnsprefetch_next_previous(), and I have used two variables in it. 1st variable is $nxt which holds the next post permalink through wordpress standard function get_next_post(). The 2nd variable is $prv which hold the Permalink for the previous post through get_previous_post() function.
You need to paste the code provided below at the bottom of your theme’s function.php file.
I have added a condition to check whether permalinks are available or not. If the condition is true, then this function performs the preload and prefetch for the designated URL.
Instant Articles WordPress Plugin
It is super lightweight addon which does a massive task of making your site extremely fast. I personally don’t use it on this site, but I use it on some of my other blogging sites. I have also implemented it successfully on some of my client sites with heavy traffic and they all seem to be happy.
Important features of instant articles plugin
It is FREE, and that’s the first and most important advantage of using this addon. It is available on wordpress official plugin repository and can be used and modified according to your requirements. Some of its important features are:
- Ability to prefetch external domains.
- Can prefetch sub resources and latest posts.
- Extremely easy to setup, thanks to its simple options panel.
- Works without conflict with caching plugins like WP-Rocket, W3 Total Cache, etc.
How to Setup Instant Articles Plugin
1st option: It will enable pre-render for your first two posts ( latest posts ) on the homepage. This option is provided because whenever any visitor lands on the homepage, they usually navigate to the first or second post. So enabling this option will help in improving your visitor’s user experience.
2nd option: It will help to enable pre-render for next and previous post links.
3rd option: This will enable the pre-render for the latest ( two ) sticky posts. You must also consider the warning which clearly states that this option will increase server load.
4th option: It will help to enable DNS prefetch of external domains. I usually add fonts.googleapis.com and my CDN name in this section. It is generally suggested to not add more than five domains as it will increase the extra load on your servers and on the visitors web browser.
5th option: This option is to add support for pre-fetching any sub resources like image, font, icon, js file or just anything which you think your website will require on every page. I am not showing the screenshot because according to the chromium documentation, this feature is deprecated.
6th option: With the help of this option you can enable the link prefetching. For example, let’s say that your website have a heavy background image and you know that it will be loaded on every page, then you can prefetch it so as to improve user experience. The basic HTML syntax is:
<link rel="prefetch" href="/images/big.jpeg">
But as you are using this plugin, you need to put the url or that image.
What is DNS Prefetch?
It is a technique in which domain name server is resolved in the background for a given URL. It is currently supported by latest version of Google Chrome, Firefox, Android Browser and some other modern web browsers.
Internet Explorer 11 and lower doesn’t have support for it. I would like to point out that Google’s Chrome can fetch as many as 10 URLs while Firefox can only fetch one URL at a time.
If you are not using wordpress, then you can use simple HTML link tag along with rel=”DNS-prefetch”. See the example below.
<link rel="prefetch" href="http://google.com">;
You can read more about it in detail at:
Leave a Reply