How To Preconnect To Required Origins In WordPress

When running your site though PageSpeed Insights, you may see a recommendation to preconnect to required origins.

Preconnect To Required Origins WordPress - Passed Audit

Preconnect establishes an earlier connection to third-party domains which appear in the reduce impact of third-party code section of your PageSpeed Insights report. It’s similar to prefetch but instead of only DNS lookups, preconnect also includes TLS negotiations and 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 domains). Too many preconnects can negatively affect speed. It’s commonly used with CDN URLs, fonts, and other critical third-party domains that load above the fold and aren’t delayed.

preconnect" href="https://fonts.gstatic.com" crossorigin>
preconnect" href="https://cdn.yourdomain.com" crossorigin>

 

What Is Preconnect?

Preconnect establishes an early connection to third-party domains. This can save time when users download a page by eliminating round trips. Preconnect is an optional recommendation in PageSpeed Insights (it may not affect scores) but it’s been shown to improve load times in tests. Use preconnect sparingly for third-party JavaScript that loads above the fold and isn’t delayed.

How Preconnect Is Different From Prefetchprefetch only includes DNS lookups while preconnect includes DNS lookups, TLS negotiations, TCP handshakes. You can prefetch all third-party domains on your site, but preconnect should be used sparingly for critical domains.

Preconnect-to-required-origins
This test shows preconnect removed three round-trips and cut .5s of latency
preconnect-with-crossorigin
This test shows preconnecting fonts.gstatic.com with crossorigin
Single preconnect vs multiple preconnects
This test shows how too many preconnects can negatively affect performance

Run your own test – run your own tests to see how your preconnected domain(s) affect performance. Run your page through webpagetest.org. Requests to the domains you specified to preconnect should begin sooner because the initial connection will have been established.

 

Which Third-Party Domains Should I Preconnect?

These are general recommendations on domains to preconnect. Test your results!

Generally, CDN URLs and third-party fonts like https://fonts.gstatic.com or https://use.fontawesome.com should be preconnected with the crossorigin attribute.

For other third-party domains, it depends on whether you’re loading them below the fold or delaying them, in which case you should not preconnect. Other guides say to preconnect to:

  • Domains that are discovered later in the waterfall.
  • Domains with resources that are critical to the rendering or interaction of the page.
  • Domains with a lot of requests, or which download a large amount of content.

You need to look at your third-party code report, add preconnect, and test your results.

Reduce Impact Of Third-Party Code WordPress

Or look at Chrome Dev Tools:

Third-party sources - Chrome Dev Tools

Other Examples

  • Roboto is currently used as the font in the YouTube player, so you’ll also want to preconnect to the Google fonts host if you aren’t already (source).
  • If you have a video within the viewport on page load, or if you are lazy-loading videos further down on a page, then we can use preconnect to make the player assets load and thumbnail images display a little more quickly. For YouTube videos, use the following preconnect hints… same thing can be used for vimeo.com and vimeocdn.com (source).
  • Your page might connect to Twitter and Facebook for social sharing, Gravatar for comments, and Google Analytics (source).
preconnect" href="https://fonts.gstatic.com" crossorigin>
preconnect" href="https://use.fontawesome.com" crossorigin>
preconnect" href="https://cdn.domain.com" crossorigin>
preconnect" href="https://www.youtube.com">
preconnect" href="https://i.ytimg.com">
preconnect" href="https://i9.ytimg.com">
preconnect" href="https://s.ytimg.com">
preconnect" href="https://google-analytics.com">
preconnect" href="https://googletagmanager.com">
preconnect" href="https://adservice.google.com">
preconnect" href="https://tpc.googlesyndication.com">
preconnect" href="https://googleads.g.doubleclick.net">
preconnect" href="https://res.cloudinary.com">
preconnect" href="https://cdnjs.cloudflare.com">
preconnect" href="https://connect.facebook.net">
preconnect" href="https://secure.gravatar.com">
Third-Party DomainPreconnct?
CDN URLYes
Image CDNYes
Third-Party FontsYes
Self-Hosted FontsNo
Google AnalyticsTest Your Results
Google Tag ManagerTest Your Results
AdvertisementsTest Your Results
CloudflareTest Your Results
Facebook And TwitterTest Your Results
YouTubeTest Your Results

Preconnecting CDN URLs – find your CDN URL in your account and preconnect it.

CDN URL

Preconnect fonts vs. hosting locallyhosting fonts locally is faster than preconnect since they are served from your domain, not https://fonts.gstatic.com or https://use.fontawesome.com. You can check whether your fonts are hosted locally by viewing your GTmetrix Waterfall chart. If you insist on serving fonts from third-party sites like Google Fonts, you should preconnect it.

Copy the URL your font(s) are being served from. PageSpeed Insights will provide you with a link to the external font source which is usually //fonts.gstatic.com or //use.fontawesome.com.

Third-Party Google Fonts

Alternatively, you can find font sources in your GTmetrix Waterfall chart.

GTmetrix Waterfall Fonts

 

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.

preconnect" href="https://cdn.domain.com" crossorigin>
preconnect" href="https://fonts.gstatic.com" crossorigin>
preconnect" href="https://ajax.cloudflare.com" crossorigin>
preconnect" href="https://google-analytics.com" crossorigin>
preconnect" href="https://res.cloudinary.com" crossorigin>

Preconnect To Required Origins Manually

 

Preconnect With WP Rocket

WP Rocket automatically preconnects your CDN URL (in the CNAME field of the CDN tab) and Google Fonts (fonts.gstatic.com) if you’re using them.

However, WP Rocket does not let you preconnect other domains (only DNS prefetch and preload your fonts). If there are other domains you want to preconnect, you will need to add preconnect manually or use an alternative plugin like Pre* Party Resource Hints or Perfmatters.

 

Preconnect With Pre* Party Resources Hints

Pre* Party Resource Hints is a free browser resource hint plugin that lets you add preconnect, prefetch, preload, and even prerender. If you don’t want to pay for Perfmatters and want to test preconnecting more domains than WP Rocket’s CDN URL & fonts, this is the plugin I would use.

Preconnect Fonts - Pre Party Resource Hints

The settings have more options for preconnect (default settings are usually fine).

Auto Preconnect Settings

 

Preconnect With Perfmatters

Perfmatters (paid) also lets you add preconnect.

I use Perfmatters since it’s also nice for bloat removal and unloading assets, but Pre* Party is free and works too. If using Perfmatters, go to Perfmatters settings → Extras → Preconnect.

Preconnect To Required Origins WordPress - Perfmatters

 

Preconnect With Autoptimize

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

Preconnect to required origins - Autoptimize

 

Preconnect With Asset CleanUp

Asset CleanUp only lets you preconnect Google Fonts in Settings > Google Fonts > Preconnect.

Preconnect Google Fonts - Asset CleanUp

 

Preconnect With LiteSpeed Cache

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

Preconnect Google Fonts - LiteSpeed Cache

 

Avoid Errors When Preconnecting To Required Origins

Once you’ve added preconnect, run your site though Lighthouse to check for errors and view your source code to make sure preconnect is working. Sometimes, Lighthouse will show errors.

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

Errors may appear 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

See also: My Ultimate WordPress Speed Guide

That’s it for this one!

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments