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>
1. Find Domains To Preconnect
First, check PageSpeed Insights to see third-party domains loading on your site:
Or use 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.
Perfmatters also lets you add preconnect under → Extras → Preconnect.
LiteSpeed Cache lets you load Google Fonts asynchronously while adding a preconnect to Google Fonts under Page Optimization → Optimization → Load Google Fonts Asynchronously.
Autoptimize lets you preconnect to 3rd party domains in the Extras Setting.
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).
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).
Waterfall charts are a great way to test the impact of preconnect:
6. Host Fonts Locally Without Preconnect
Hosting fonts locally is faster than preconnecting fonts.gstatic.com and other 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.
That’s it for this one!
Cheers,
Tom
Hey there! Nice post… just asking if i use only perfmatters plugin is it ok to achieve the best results? Kind Regards – Mihai Dobre
Perfmatters doesn’t do caching and still lacks some things in cache plugins. I generally recommend FlyingPress (or LiteSpeed Cache) with Perfmatters.