How to Use Prefetch and DNS-Prefetch in WordPress?

Nowadays, you have plenty of mechanisms to speed up the loading of your WordPress site. However, it is not sufficient to only focus on loading your current webpage’s content. You also have to improve the resources required by the linked pages and loaded on your site from third-party sites. You can do this by using Prefetch and DNS-Prefetch attributes with link meta tag in header section. This will hint the browsers to load the resources proactively to improve the loading speed when they are needed. In this article, we will explain what Prefetch and DNS-Prefetch are and how to use them in WordPress.

Related: What is Preconnect and How to Use PreConnect in WordPress?

Prefetch Vs DNS-Prefetch

Let’s take a simple example case to understand this better. You have a WordPress post which contains the following two things:

• Link to an important page on your site – the important page contains an infographic image which is very large in size. You expect almost every user landing on the current page will click on the link and visit your important page. In this case, you can use prefetch attribute to instruct browser to initiate downloading the infographic image which is required if the user visit the important page. it will improve the loading speed of the important page as the large image is already downloaded and kept ready in browser’s local cache.
• Link to external website – your current post uses Google Fonts which is generally loaded from Google servers fonts.gstatic.com and fonts.googleapis.com. When users load the page, browser needs to perform host name resolution for the Google servers and get the IP addresses of them. This could easily delay loading of the fonts especially when you have slow internet connection. Here you can use DNS-Prefetch to speed up the domain name resolution process of the external domains you need on your site.

We hope these two cases are clearly explaining the use of Prefetch and DNS-Prefetch. Let’s move on with how to use Prefetch and DNS-Prefetch in WordPress site.

Using Prefetch in WordPress

As mentioned, using Prefetch will tell the browser to fetch resources you think needed later as part of a subsequent user interaction. This will make use of the browser’s idle time to initiate proactive downloading of resources like CSS, JavaScript and images. You can manually add the following link tag in the header section of your site to use Prefetch.

<link rel="prefetch" href="my-big-important-image.png">

Alternatively, you can also use “next” attribute instead of “prefetch” to perform the same function.

<link rel="next" href="my-next-page.html">

However, the problem here is that you need a plugin like Insert Code in Header and Footer to insert the link meta tag. Instead of that you can use a dedicated Pre* Party Resource Hints plugin for creating various types of browser hints.

• Go to “Plugins > Add New” section and find Pre* Party Resource Hints plugin. Install and activate the plugin on your site.
• To implement Prefetch on your site, click on the “Pre* Party” menu.
• Go to “Insert Hints” tab and scroll down to the “Add New Resource Hint” section.
• In the “Domain or URL” box, enter the complete URL of the resource file you want to prefetch.
• Select “Prefetch” radio button and the plugin automatically disable the fields not application for prefetching. For example, crossorigin and Media Attribute options will be disabled which are not applicable for prefetching.
• Click on the “as” attribute dropdown and select the applicable file type. For example, we select image as we have provided the image URL in “Domain or URL” box.
• Leave MIME Type field as blank.
• Click the “Insert Resource Links” button at the bottom of the page to apply the changes.

That’s all and the plugin will insert the required header link tag automatically on your site. You can view all resource hints created just above the “Add New Resource Hint” section and change or delete them any time later.

As you can see in the success message, clear your cache if you are using server side or caching plugin on your site. Open any of your page in the browser and see the page source code. It should show the Prefetch link in the header section with the resource you have provided. You can notice, though you left MIME Type as blank, the plugin automatically added the type=image/png based on the given inputs.

Considerations When Using Prefetching

• You can use Prefetch for external domains for connecting an image or CSS/JS required on all your pages. Another case is to use your own subdomains like CDN subdomain or media subdomain if you host media files separately.
• As header tag will load on all the pages, Prefetch link will also be inserted on the page headers. If you want to use Prefetch only on certain pages, use any plugin or theme that offers a hook to insert code in the header with filters. For example, you can use GeneratePress Premium or Astra Pro theme to insert code only on required pages on your site.
• If you are getting decent traffic and hosted on shared hosting companies like Bluehost, then avoid using Prefetch feature. It may slow down your server when multiple prefetch requests are initiated affecting live traffic. In addition, browsers may delay prefetching in slow networks loading of current page’s content is highest priority than the prefetching of expected resources which may not be used at all.

Related: How to Preload Fonts in WordPress?

Using DNS-Prefetch in WordPress

DNS-Prefetch will instruct the browser to resolve an external domain name into IP in the background before user clicks on a link. When user clicks a link, it will therefore shorten the time browser takes to resolve domains, hence improving the loading speed. This is ideal for proactively connecting with Google Fonts, AdSense and many other third-party resources. Similar to Prefetch, you can manually add the following code in your header section for using DNS-Prefetch.

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

You can also use the same Pre* Party Resource Hints’ plugin for this purpose.

To implement DNS-Prefetch on your site;

• When you are in “Add New Resource Hint” section of the plugin enter the external domain URL in the “Domain or URL” field.
• Select DNS-Prefetch radio button.
• Choose the “as” attribute from the dropdown. For example, you can select font for Google Fonts.
• Click the “Insert Resource Links” button to apply the changes.

You can edit or delete the entries any time. Check the page source code to confirm your DNS-Prefetch entry is there as a link tag in the header section.

Final Words

Prefetch and DNS-Prefetch are two hints for browsers for improving the loading of external resources. We have explained both in this article for better understanding, though they are meant for different purposes. While DNS-Prefetch only perform host name resolution, Prefetch will resolve the domain and download the resource proactively.