Preconnect To Required Origins In WordPress (Most Cache Plugins Add It Automatically To CDN URLs/Google Fonts)

Preconnect to required origins wordpress

PSI suggests preconnecting to required origins, but most cache plugins do it automatically for CDN URLs/Google Fonts (fonts.gstatic.com) which are often the only URLs you will preconnect.

Check your cache plugin’s documentation to make sure, but unless you want to preconnect other third-party domains (which should be tested in a Waterfall chart to see their load time impact), you don’t need to preconnect anything else. And since fonts should be hosted locally for better performance, CDN URLs are one of the only things you should absolutely preconnect. Many cache plugins delay JavaScript which is even more effective than preconnecting domains.

What Is Preconnect?

Preconnect establishes an early connection to third-party domains which you can find under “reduce impact of third-party code” in your PageSpeed Insights report. It’s similar to prefetch but instead of only DNS lookups, preconnect also includes TLS negotiations as well as TCP handshakes. Without preconnect, the round-trips can add hundreds of milliseconds of latency. Preconnect should be used sparingly (that’s why Google says to preconnect to required origins).

<link rel="preconnect"href="/assets/vendor/gstatic" crossorigin>
<link rel="preconnect" href="https://cdn.yourdomain.com" crossorigin>

Preconnect to required origins 1

 

1. Find Domains To Preconnect

First, check PageSpeed Insights to see third-party domains loading on your site:

Reduce impact of third party code wordpress

Or use Chrome Dev Tools:

Third party code chrome dev tools

You shouldn’t see most of those domains in your report because:

  • Google Fonts/Analytics should be hosted locally.
  • YouTube’s iframe can be replaced with a preview image.
  • You can use local avatars for comments with a local avatar plugin.
  • Social sharing plugins (and other third-party code) can be delayed.

Other guides say to preconnect when:

  • Domains discovered later in your waterfall chart.
  • Domains with resources critical to rendering or interaction of the page.
  • Domains with a lot of requests, or that download a large amount of content.
Third-Party Domain Should You Preconnect?
CDN URL Yes
Image CDN Yes
Third-Party Fonts Yes (but ideally host locally)
Google Analytics No (host locally)
Google Tag Manager No (delay JavaScript)
Advertisements No (delay JavaScript)
Facebook + Twitter No (delay JavaScript)
Cloudflare Test Results
YouTube Test Results

 

2. Add Preconnect Manually

To add preconnect manually, add the code to your header.php file. Replace the third-party domains with those you want preconnected, and consider whether you should use crossorigin.

<link rel="preconnect" href="/assets/vendor/gstatic" crossorigin>
<link rel="preconnect" href="https://use.fontawesome.com" crossorigin>
<link rel="preconnect" href="https://cdn.domain.com" crossorigin>
<link rel="preconnect" href="https://www.youtube.com">
<link rel="preconnect" href="https://i.ytimg.com">
<link rel="preconnect" href="https://i9.ytimg.com">
<link rel="preconnect" href="https://s.ytimg.com">
<link rel="preconnect" href="https://google-analytics.com">
<link rel="preconnect" href="https://googletagmanager.com">
<link rel="preconnect" href="https://adservice.google.com">
<link rel="preconnect" href="https://tpc.googlesyndication.com">
<link rel="preconnect" href="https://googleads.g.doubleclick.net">
<link rel="preconnect" href="https://res.cloudinary.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="preconnect" href="https://connect.facebook.net">
<link rel="preconnect" href="https://secure.gravatar.com">

 

3. Add Preconnect With Plugins

The following optimization plugins add preconnect either manually, automatically, or if a specific setting is enabled (such as enabling Google font optimization or adding a CDN URL):

Plugin Preconnects Google Fonts? Preconnects CDN URL?
FlyingPress Yes No (hosts locally instead)
WP Rocket Yes Yes
LiteSpeed Cache Yes N/A
Perfmatters Yes Yes
SiteGround Optimizer Yes N/A

If your optimization plugin doesn’t allow certain preconnect features, add the preconnect code manually to your header.php file or use Pre* Party Resource Hints.

Preconnect fonts pre party resource hints
Pre Party Resource Hints

Perfmatters also lets you add preconnect under → Extras → Preconnect.

Preconnect to required origins wordpress perfmatters

LiteSpeed Cache lets you load Google Fonts asynchronously while adding a preconnect to Google Fonts under Page Optimization → Optimization → Load Google Fonts Asynchronously.

Load google fonts asyncronously

Autoptimize lets you preconnect to 3rd party domains in the Extras Setting.

Autoptimize preconnect

 

4. Know When To Use Crossorigin

Generally, only CDN URLs and third-party fonts like /assets/vendor/gstatic or https://use.fontawesome.com should be preconnected with the crossorigin attribute. You can read this thread from Stack Exchange, but you shouldn’t need to use crossorigin in most cases.

 

5. Test Impact Of Preconnect

Check your source code (Safari Inspector also shows if it’s working).

Preconnect to required origins manually

Google explains “unnecessary preconnecting can delay other important resources, so limit the number of preconnected domains and test the impact preconnecting makes.”

Errors can happen if:

  • You use too many preconnects.
  • You preconnect to third-party domains that aren’t loaded.
  • You preconnect to third-party domains that are being delayed.
  • You’re using the crossorigin attribute when you shouldn’t be (or vice versa).

Preconnect to required origin errors

Waterfall charts are a great way to test the impact of preconnect:

Preconnect test
This test shows preconnect removed three round-trips and cut .5s of latency
Preconnect film test
This test shows how too many preconnects can negatively affect performance

 

6. Host Fonts Locally Without Preconnect

Hosting fonts locally is faster than preconnecting fonts.gstatic.com and other third-party fonts.

Local vs third party fonts

In case your cache plugin doesn’t do this already, you can use Perfmatters, OMGF, and even Elementor has an option to host fonts locally and preload them in the performance settings.

 

7. Delay JavaScript Without Preconnect

Instead of preconnecting third-party domains, try delaying their JavaScript.

SiteGround Optimizer is basically the only mainstream cache plugin that doesn’t do this in which case, you can use Flying Scripts or Perfmatters. In some cases, you’ll need to manually add the JS files. Here’s a list of common JavaScript files to delay if you need to do it manually.

Perfmatters delay javascript

That’s it for this one!

Cheers,
Tom

You Might Also Like: