{"id":4721391,"date":"2022-09-06T16:18:04","date_gmt":"2022-09-06T14:18:04","guid":{"rendered":"https:\/\/wp-rocket.me\/?post_type=core_web_vitals_hub&p=4721391"},"modified":"2022-09-20T12:20:19","modified_gmt":"2022-09-20T10:20:19","slug":"preconnect-to-required-origins","status":"publish","type":"core_web_vitals_hub","link":"https:\/\/wp-rocket.me\/google-core-web-vitals-wordpress\/preconnect-to-required-origins\/","title":{"rendered":"How to Preconnect to Required Origins on WordPress"},"content":{"rendered":"

Are you wondering what \u201cPreconnect to required origins on WordPress\u201d means on your Lighthouse\u2019s report? Preconnect is a way to tell your browser that you\u2019ll be needing resources from an external website pretty soon.<\/p>

\"Lighthouse
Lighthouse (PageSpeed Insights) report for Preconnect –  Source: PSI<\/a><\/figcaption><\/figure>


Preconnect<\/a> establishes an earlier connection to third-party domains, reducing the 3rd party code’s impact on performance. Lighthouse is an effective performance tool<\/a> that tells you which key requests are not using the Preconnect hint (<link rel=”preconnect”>) yet. <\/p>

In this article, you\u2019ll learn what Preconnect is, its impact on performance, and how to add the Preconnect hint to the right third-party domains. At the very end, we\u2019ll also share the best WordPress plugins you can use to initiate Preconnect on your website. <\/p>

What Is Preconnect?<\/h2>

A Preconnect (<link rel=”preconnect”>) hint informs the browser to make a proactive and early connection to third-party domains. It means that your page intends to establish a connection to another origin and that you want to launch the process as soon as possible. This can save visitors time downloading a page by eliminating unessential data round trips between the browser and the server.<\/p>

\"Preconnect
Preconnect explained – Source: WP Rocket <\/a>
<\/figcaption><\/figure>

For example, adding Preconnect to an external domain looks like this: <\/p>

<link rel=\"preconnect\" href=\"https:\/\/adomain.com\"><\/code><\/pre>
When using \u201cpreconnect\u201d, the browser knows that the page intends to connect to adomain.com. It can get started to retrieve content from there as soon as possible. <\/p>
To tell the browser to which domain it should connect, you need to identify which third-party domains are involved first. <\/p>
What Are Third-party Domains?<\/h3>
Third-party domains that should be set as preconnected are YouTube videos, CDNs, Image CDNs, Web fonts, Facebook Connect, or popular stats tools like Google Analytics. <\/p>
For example, adding Preconnect on a Google font should look like this: <\/p>
<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<\/code><\/pre>
Viget.com<\/a> runs an interesting performance comparison with and without using a Preconnect hint on the Google fonts. When using Preconnect (on the second waterfall chart), we saw three major improvements:<\/p>