Preconnect to external domains

Available from WP Rocket 3.19, the Preconnect to external domains feature improves the loading times by prefetching the external domains used on a page.

WP Rocket automatically enables this optimization upon activation, so you don’t need to select any options to use it, nor specify any domains.

Heads up! The process of prefetching external domains is automatic but not immediate, it's asynchronous.

To ensure that the process happens as automatic and as fast as possible, use the Remove Unused CSS option too.

You can find a more detailed explanation of how the Preconnect to external domains feature works in this article.

Feature overview

The Preconnect to external domains feature will scan the page, and it will detect the externally hosted assets used. Then, it will add the dns-prefetch hint for those external domains.

With this, the browser will establish a connection with those external websites early, speeding up the download of the external assets, resulting in a faster page load.

The external domains optimized by this feature will be known as prefetched domains, and they are part of the Priority Elements of WP Rocket.

This optimization is applied only to the following HTML elements:

  • link
  • script
  • iframe

Different prefetched domains for mobile and desktop

WP Rocket processes mobile and desktop versions of a page separately to make the prefetching of domains as accurate as possible. This process is based on the Mobile Cache option, which is the one in charge of creating a mobile-specific set of cache files.

Asynchronous Approach

Preconnect to external domains is one of WP Rocket’s asynchronous optimizations. It means it’s not applied instantly, but it follows these steps:

  1. A script is injected to the page to optimize.
  2. As the script is executed with a visit, it will detect the external assets domains and send their domains back to WP Rocket.
  3. WP Rocket adds the dns-prefetch hint for the domains upon the next page cache generation.

Feature benefits

Preconnect to external domains makes your website faster by setting up connections in advance, this way, it is faster to download external resources present in the layout.

Benefits for PageSpeed/Lighthouse

This option can also help with the Largest Contentful Paint (LCP) audit if the LCP element uses a font or resource that’s hosted in an external domain.

How to check if Preconnect to external domains is working

You can check if the external domains of a page are optimized by Preconnect to external domains by looking at the source code of the page.

Presence of the feature script

First, a script called wpr-beacon.min.js will be added to the page. It should be found with the following markup:

In the source code of the page, the script can be found with the following markup:

<script data-name="wpr-wpr-beacon" src='https://yoursite.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script>

If a page contains the script, it means the optimization has started.

DNS prefetch hint

Once the optimization is finalized, the wpr-beacon.min.js will be removed, and a rel="dns-prefetch" hint will be added for the external domains.

So, for assets such as these:

<script src="https://cloudflare.com/assets/script.js"></script>

<link rel="stylesheet" href="https://cdnjs.com/styles.css">

<iframe src="https://www.youtube.com/video-embed-1"></iframe>

WP Rocket will create a link tag inside the head with these attributes:

  • rel="dns-prefetch"
  • href, with the external domain as value
  • data-rocket-prefetch, to identify WP Rocket as its originator

Therefore, the resulting link will be added with the following markup:

<link data-rocket-prefetch href="https://cloudflare.com/" rel="dns-prefetch">

<link data-rocket-prefetch href="https://cdnjs.com/" rel="dns-prefetch">

<link data-rocket-prefetch href="https://www.youtube.com" rel="dns-prefetch">

Automatic clearing of prefetched domains

The following scenarios will trigger automatic clearing of the prefetched external domains:

  • When permalinks are changed, the prefetched domains of all pages will be purged.
  • When the theme is switched, the prefetched domains of all the site will be cleared.
  • When updating the post, the post-specific domains will be cleared. This doesn't apply for the domains in the related pages.
  • All the site prefetched domains will be purged when any of these features is activated or deactivated, or their exclusions and settings are changed:

Manual clearing of prefetched domains

When you make manual changes to your pages, outside the WordPress editor, you should manually clear the prefetched domains via the WP Rocket toolbar menu.

To clear the prefetched domains of all your site, click on the WP Rocket menu and then on Clear Priority Elements.

clear priority elements button

And, you can clear the prefetched domains of a specific post by clicking on the Clear Priority Elements of this URL button, which appears when you visit the post frontend while being logged-in, like this:

clear priority elements of this url button

Note: These actions will clear the prefetched domains, and all the other Priority Elements.

Add HTML elements to this optimization

You can use the following snippet to add HTML elements from being processed by the Preconnect to external domains optimization:

add_filter( 'rocket_preconnect_external_domain_elements',function( $elements ){
  $elements[] = 'img';
  return $elements;
});

Exclude elements from this optimization

You can use this snippet to exclude HTML elements from this optimization. You can target elements using any attribute or value of the HTML tag:

add_filter( 'preconnect_external_domain_exclusions', function( $exclusion_patterns ) { 
  $exclusion_patterns[] = 'async'; 
  return $exclusion_patterns; 
});

Replace prefetch with preconnect

The Preconnect to external domains option uses the dns-prefetch hint as default.

If needed, you can switch to the preconnect hint using the following snippet:

add_filter( 'rocket_preconnect_external_domains_use_prefetch', '__return_false' );

In this case, the resulting preconnected domain will have the following markup:

<link crossorigin data-rocket-preconnect href="https://cloudflare.com/" rel="preconnect">

Here's how you can add snippets to your site.

How to deactivate this feature

If this option causes issues, you can deactivate it by installing and activating the following helper plugin:

📥 Download (.zip): WP Rocket | Disable Preconnect to external domains
Developers: You can find the code for this plugin on GitHub.

Alternatively, you can add to your site the following snippet: 

add_filter( 'rocket_preconnect_external_domains_optimization', '__return_false' );

Prefetch DNS requests

From 3.19, WP Rocket’s Preconnect to external domains offers an automatic and accurate method of instructing the browser to connect with external origins, therefore, it replaces the Prefetch DNS requests feature, which is no longer available.

Troubleshooting and known conflicts

Please refer to the Priority Elements article to find information about troubleshooting and known conflicts.

Technical notes

  • The data collected by this feature is stored in the wp_wpr_preconnect_external_domains table.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.