Most WordPress sites load files from services they do not control: Google Analytics, Google Tag Manager, the Facebook pixel, an opt-in tool, a click fraud script. Those services are rarely as quick as your own server, and nothing you do on the site will make them faster. What you can do is get the browser to start connecting to them earlier. That is the job of the preconnect directive, and Autoptimize has a field for it. This is how we decide what goes in that field and how we check it is working.

Table of Contents

What preconnect does

Before a browser can download a file from another domain it has to look up the domain (DNS), open a connection and negotiate SSL. Only then does it ask for the file. Normally that setup happens when the browser reaches the script or file in the HTML, which can be well into the page load.

A preconnect is a line in the head of the page, for example <link rel="preconnect" href="https://www.googletagmanager.com">. When the browser reads it, it does the DNS, connection and SSL work for that host straight away. By the time the file is needed, part of the job is already done. The third party’s server is no faster; the setup simply happens earlier and overlaps with everything else the browser is doing.

Step 1: find the slow third-party hosts

Run a speed test that shows a waterfall view. The video uses our SiteSpeedBot test, but any waterfall works. Each row is a file, and the wider the bar, the longer that file took. Hover over a row to see the breakdown.

Files from your own site, or from Cloudflare, are usually quick. In the example site in the video many took around 60 to 70 milliseconds and some as little as 10 to 12. Third-party files stand out as much fatter bars. Two from that test:

api.autopilothq.com: 17 ms of DNS, roughly 400 ms to connect and complete the SSL handshake, then about 200 ms waiting. 824 ms in total, nearly a second for one file.
ClickCease (a click fraud tool for Google Ads and Facebook ads): 169 ms for the DNS lookup alone, which is very slow, 242 ms for SSL and 856 ms in total.

Much of that is geography. The test site is Australian and the test was run from Australia, while many of these services are hosted in the United States. Every new connection pays for that distance. You cannot change where a third party hosts its files, but preconnect lets the browser pay the cost earlier.

The hosts worth adding are the ones with long DNS, connect and SSL times. In the video’s example that means ClickCease and Autopilot, plus the analytics services. Google Tag Manager was faster at 282 ms, but roughly half of that is connection work that can still be done in advance. reCAPTCHA is another common candidate; it loads from www.google.com.

Step 2: add them in Autoptimize

In WordPress go to Settings, then Autoptimize, and open the Extra tab.
Find the field Preconnect to 3rd party domains.
Enter each host in full, including the protocol, for example https://www.googletagmanager.com. A bare domain without https:// will not work as intended.
Click Save Changes and Empty Cache, then clear your page cache as well, since the preconnect lines are part of the cached HTML.

For reference, one of our own sites shown in the video preconnects to Google Fonts (fonts.googleapis.com), YouTube, Google Tag Manager, the Facebook pixel, ConvertBox and Google Analytics. That is a typical list for a marketing site: the services that load on most pages and are not served from the site itself.

Step 3: confirm it is working

Run the same speed test again from the same location. Preconnected hosts look different in the waterfall: the bar is split in two, with the DNS, connect and SSL portion happening early in the load and the actual download happening later. In the “after” test in the video, Google Analytics, the ConvertBox CDN, Google Fonts and Tag Manager all show that split.

If a host still shows one solid bar starting late, check three things: the host name is spelled exactly as it appears in the waterfall, it includes https://, and every cache layer was cleared.

How many to add

Preconnect is cheap but it is not free. Each hint asks the browser to open a connection, and a connection that goes unused is wasted effort at the busiest point of the page load. Limit the list to hosts that:

load on most pages of the site, not just one landing page;
show slow DNS, connect or SSL times in the waterfall; and
are requested reasonably early, such as analytics, tag managers, fonts and pixels.

A handful of hosts is typical. If you find yourself listing a dozen, it is worth asking whether all of those scripts still need to be on the site.

Quick checklist

Run a waterfall test and note the third-party rows with fat bars.
Add those host names, in full with https://, to Autoptimize’s preconnect field.
Save, empty the Autoptimize cache and clear the page cache.
Retest and look for the split bars on the hosts you added.
Remove any host that is not used on most pages.

If third-party code is dragging out your load times and you want us to take a look, request a free site audit from the WP Speed Fix homepage.