Preconnect to external domains

Available from WP Rocket 3.19, the Preconnect to external domains feature improves the loading times by preconnecting 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 preconnecting to 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 preconnect 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 preconnected 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 preconnected domains for mobile and desktop

WP Rocket processes mobile and desktop versions of a page separately to make the preconencting 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:

A script is injected to the page to optimize.
As the script is executed with a visit, it will detect the external assets domains and send their domains back to WP Rocket.
WP Rocket adds the preconnect 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.

Preconnect hint

Once the optimization is finalized, the wpr-beacon.min.js will be removed, and a rel="preconnect" 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="preconnect"

crossorigin

href, with the external domain as value

data-rocket-preconnect, to identify WP Rocket as its originator

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

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

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

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

Automatic clearing of preconnected domains

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

When permalinks are changed, the preconnected domains of all pages will be purged.
When the theme is switched, the preconnected 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 preconnected domains will be purged when any of these features is activated or deactivated, or their exclusions and settings are changed:

Manual clearing of preconnected domains

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

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

And, you can clear the preconnected 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:

Note: These actions will clear the preconnected 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 by 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 preconnect with prefetch

The Preconnect to external domains option uses the preconnect hint as default, because this attribute focuses on speeding up the connection itself.

But if needed, you can switch to the prefetch hint using the following snippet:

add_filter( ‘rocket_preconnect_external_domains_use_prefetch’, '__return_true' );

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

In 3.19, WP Rocket’s Preconnect to external domainsoffers an automatic and accurate method of instructing the browser to connect with external origins, therefore, it replaces the Prefetch DNS requests feature, which will be 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.

You can find more technical details here.