What is DNS Prefetch? DNS Preconnect? How To Remove Resources In WordPress You’re Not Using

If you’ve been a consistent visitor to Martech Zone, you’ve likely seen a remarkable difference in WordPress‘ performance over the last year. I’ve been speeding up WordPress to improve my user experience (UX), and it’s also a critical ranking factor in organic search (SEO) – which dominates my overall traffic to the site.

Simultaneously, I’ve been utilizing Ezoic to increase monetization through ad optimization. The Ezoic platform has a fantastic toolset called Leap that analyzes your site to identify what is slowing it down and what alternatives are out there to provide similar functionality. One issue with my site, which is common amongst WordPress sites, was the loading of Google Fonts.

29% of domains using Google Fonts perform significantly worse than the average site.

Ezoic

Whether your site utilizes Google Fonts or not, it’s likely being loaded… multiple times. Here’s a breakdown:

• WordPress core code pre-fetches the Google Fonts domain. I’ll explain this later.
• WordPress themes often offer Google Fonts in your theme customization. Whether you use them or not, they could still be loaded.
• WordPress plugins often use Google Fonts. Again, whether they’ve been already loaded or whether or not you’re using them… they may be loaded.
• Other tools like Google ReCaptcha load Google Fonts.

Leap has a great article on removing Google Fonts from your WordPress site by adding a plugin or code to your theme’s functions.php file. None of this worked for my site so I wrote my own function:

// Remove reference to fonts.googleapis.com
function remove_google_fonts($src, $handle) {
    if (strpos($src, 'fonts.googleapis.com') !== false) {
        $src = false;
    }
    return $src;
}
add_filter('style_loader_src', 'remove_google_fonts', 9999, 2);

I continued to check back to Leap after it reviewed my site again, and they continued to identify a line of code that was slowing my site down:

<link rel="dns-prefetch" href="//fonts.googleapis.com

The clue that I needed was in the rel attribute… dns-prefetch.

What is DNS Prefetch?

DNS prefetching is a technique web browsers use to resolve domain names in advance before they are needed. It involves fetching DNS information for external resources, such as scripts, stylesheets, images, or fonts, to reduce the latency and improve page load time.

WordPress includes DNS prefetching as part of its core code to enhance the performance of websites built on the platform. By prefetching DNS information for external resources, WordPress aims to optimize the loading of these resources when the browser requests them. This can result in a faster and smoother browsing experience for visitors to WordPress websites.

WordPress generates HTML output and automatically adds DNS prefetch hints as <link rel="dns-prefetch" href="//example.com"/> tags for specific external resources. These hints instruct the browser to resolve the DNS of the specified domain name in advance so that when the browser encounters a request for that domain, it already has the resolved IP address available. This eliminates the need for the browser to perform a DNS lookup at the time of the request, reducing the overall page load time.

By including DNS prefetching in its core code, WordPress aims to optimize the performance of websites by reducing DNS lookup latency and improving the speed at which external resources are loaded.

What is DNS Preconnect?

DNS preconnect is a web performance optimization technique that allows browsers to initiate a connection to a server’s DNS and establish a TCP handshake in advance, even before the actual resource is requested. This helps to reduce the latency further by eliminating the DNS resolution and connection setup time when the resource is needed.

WordPress includes DNS preconnect as part of its core code to further optimize the loading of external resources and improve website performance. It adds preconnect hints in the form of <link rel="preconnect" href="//example.com"/> tags to instruct the browser to establish a connection to the specified domain name in advance.

WordPress generates HTML output and automatically includes preconnect hints for specific external resources, such as fonts, stylesheets, scripts, or other third-party services. These hints inform the browser to initiate the DNS resolution and TCP handshake for the specified domain name, allowing for a faster connection establishment when the actual resource requests are made.

By utilizing DNS preconnect, WordPress aims to reduce the latency associated with DNS resolution and connection setup, enabling faster and more efficient resource fetching. This optimization technique contributes to improved website performance and a smoother browsing experience for visitors to WordPress websites.

Are These Necessary?

If you’re utilizing the resources that WordPress is prefetching or preconnecting, it absolutely makes sense to load them with your site. But it’s bizarre that this is loaded whether or not you’re utilizing the end resources like Google Fonts, or any other resource.

WordPress added this code to help with speed… but it uses browser resources unnecessarily if it’s not used! In Martech Zone’s case, the site has two resources like this:

<link rel=dns-prefetch href=//fonts.googleapis.com/>
<link rel=dns-preconnect href=//fonts.gstatic.com/>

I had to do some digging but found that there is a WordPress API call that I could update where I could remove the DNS Prefetch or DNS Preconnect for resource URLs that are not needed. Here’s sample code that you can add to your theme’s functions.php file:

// Remove dns-prefetch and preconnect for specified URLs
function remove_resource_hints( $urls, $relation_type ) {
    if ( 'dns-prefetch' === $relation_type || 'preconnect' === $relation_type ) {
        $urls_to_remove = array(
			'fonts.googleapis.com',
			'fonts.gstatic.com'
        );

        foreach ( $urls_to_remove as $url_to_remove ) {
            $urls = array_filter( $urls, function( $url ) use ( $url_to_remove ) {
                return ( false === strpos( $url, $url_to_remove ) );
            } );
        }
    }

    return $urls;
}
add_filter( 'wp_resource_hints', 'remove_resource_hints', 10, 2 );

As you can see, you’ll have to update the code specific to your site for the URLs that you don’t wish to prefetch or preconnect. The functions remove_resource_hints() and remove_resource_hints_preconnect() are defined separately. Each function accepts the respective array ($urls) and removes the specified URLs by using array_filter(). By separating the functions, it provides better readability and maintainability of the code. Additionally, it allows for potential reusability of the functions in other contexts if needed.

Remember that this isn’t a significant improvement in site speed… but if there are many of these issues in your site, milliseconds can easily add up to seconds in load time, and every little bit counts!