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.
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?|
|Third-Party Fonts||Yes (but ideally host locally)|
|Google Analytics||No (host locally)|
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)|
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).
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.
That’s it for this one!