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 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.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="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 Prefetch – prefetch 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.

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.

Or look at 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).

<link rel="preconnect" href="https://fonts.gstatic.com" 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">

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

Preconnect fonts vs. hosting locally – hosting 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.

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

 

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="https://cdn.domain.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://ajax.cloudflare.com" crossorigin>
<link rel="preconnect" href="https://google-analytics.com" crossorigin>
<link rel="preconnect" href="https://res.cloudinary.com" crossorigin>

 

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.

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

 

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 With Autoptimize

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

 

Preconnect With Asset CleanUp

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

 

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.

 

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).

See also: My Ultimate WordPress Speed Guide

That’s it for this one!

Cheers,
Tom