How To Preconnect To Required Origins In WordPress (PSI Item)

How To Preconnect To Required Origins In WordPress (PSI Item)

Preconnect is a browser resource hint recommended in PageSpeed Insights.

Preconnect establishes an earlier connection to a third-party service. This eliminates round trips and ultimately saves time when downloading a page. Preconnect is an optional recommendation in PageSpeed Insights (it won’t affect your scores) but can improve load times.

In the high majority of cases, preconnect should only be used for CDN URLs and fonts that aren’t hosted locally (e.g. Google Fonts). The code should be pasted into your header.php file.

<link rel="preconnect" href="https://cdn.domain.com">
<link rel="preconnect" href="https://fonts.gstatic.com">

 

Preconnect With A Plugin

Perfmatters (paid) and Pre* Party Resource Hints (free) let 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.

CrossOrigin is rarely used and according to Perfmatters, you won’t need it in 99% of cases.

 

Preconnect CDN URLs

You will need to replace the CDN domain with your own CDN URL. Most CDNs like BunnyCDN, StackPath (also RocketCDN), and KeyCDN use a CDN URL except Cloudflare. If you’re using Cloudflare’s CDN, there is no need to preconnect a CDN URL since Cloudflare doesn’t use one.

1. Copy your CDN URL from your CDN provider.

CDN URL

2. Preconnect the CDN URL manually or in Perfmatters / Pre* Party. WP Rocket added a preconnect tag for the CDN domain in version 3.8.6 as of 3/4/2021. That is also an option now.

 

Preconnect Third-Party Fonts

Hosting fonts locally is a faster method than preconnect since they would be served from your domain as oppose to https://fonts.gstatic.com or https://use.fontawesome.com. You can check whether you fonts are hosted locally by viewing your GTmetrix Waterfall chart. If you must serve fonts an external websites like Google Fonts, preconnecting is an option.

1. Copy the URL your fonts 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.

[…]

 



This article was written by Tom Dupuis and originally published on Tom Dupuis.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top