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.
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.
Alternatively, you can find font sources in your GTmetrix Waterfall chart.
2. Preconnect the font URL manually or in Perfmatters / Pre* Party.
Avoid Errors When Preconnecting To Required Origins
If you preconnect to origins which aren’t being loaded on your WordPress site, you will get a warning and it will make your website slower. Only preconnect to origins that are being loaded.
See also: My Ultimate WordPress Speed Guide (I swear it’s good).
That’s it for this one!
Cheers,
Tom
Keep reading the article at Tom Dupuis. The article was originally written by Tom Dupuis on 2021-03-04 23:50:03.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.