Preconnect to required origins – Google Search Console & Core Vitals - Changing the World One Website at a Time

Fixing the “preconnect to required origins” error that is shown in Google Search Console and Google Web Vitals can be done by adding the preconnect script <link rel=”preconnect” or using a speed plugin listed below

If you have ever run your site through Lighthouse or Google PageSpeed Insight, you might have come across the recommendation to “Preconnect to required origins”. So if you have received the same recommendation and are searching for a solution you have come to the right place. In this article, we will discuss why it is critical for web performance and how you can preconnect the required origins on your site.

Let’s get started!

What is preconnect?

Preconnect is a way to establish an early connection to third party origin during the loading process. By using a preconnect in the browser and establishing a link with a third party domain before the loading. When you load the page it saves time by eliminating round trips and loads the page faster. Unlike pre-fetch, preconnecting should be used sparingly. You can’t pre-connect all the third party origins on your site. But you can prefetch all the third-party origins.

Why preconnecting to required origins is important for web performance?

Adding preconnection to required origin means you are telling your browser that you need these resources as soon as possible. When a browser sees the preconnect hint, it establishes the connection as soon as possible, saving your time by downloading the resources early.

Confused?

To better understand, first you should know how a browser requests a resource from a third-party origin. So in order to request a resource from another server/domain, it establishes a connection through the following procedure.

First, it looks up the domain name and resolves it to an IP address. After that, it sets up a connection with the server and encrypts it for security. During all these three steps the server exchanges pieces of data with the browser. This journey of exchange of data between server and browser is called a round trip. And each round took significant time to exchange data. Establishing a connection requires three or more round trips and consequently slows down the page loading. But with preconnecting, your browser establishes the connection early before the loading. Since the set-up process has been completed by the time the browser requested them, ultimately the sources will load much faster.

By adding preconnects request to important third party origins you can speed up your site by 100–500 ms. You may take this time as a small duration, but it makes a significant difference in your site performance and provides a better user experience.

How to preconnect to required origins to make your site faster?

There are various ways to add the preonnect script to your site. You can add preconnect both manually and by using a plugin if you are using WordPress. Both methods are easy and convenient. Also, you don’t need much experience. So which one you prefer depends on your if you are ok with adding code snippets to your website. Below I have listed the best suitable method that you can use.

Manual Method

Adding a preconnect by the manual method is really simple and effortless. All you need is to add the code in the link tag and paste it to your function.php file. Replace the third-party domains with the ones you want to preconnected. Also, choose whether you want to cross-origin or not.

For example “http://google-analytics.com” is the third party domain that your page intends to connect to it would be <link rel=”preconnect” href=”http://google-analytics.com” crossorigin>. Here are some more examples

Using Plugins

Another efficient way to do this job is by using a plugin. Since many people don’t like to work manually, using a plugin is a perfectly good choice if you don’t want to add code by hand. Several plugins are available that can add preconnect to your site. Below I have listed some of the convenient plugins that can do this task efficiently. Let’s take a look.

Wp Rocket

If you’re using CDN URL (in the CNAME field of the CDN tab) and Google Fonts (fonts.gstatic.com), Wp Rocket is a perfect choice. It adds preconnect automatically. All you need is to install and activate the plugin. However, Wp Rocket doesn’t allow you to preconnect other domias. So if you want to preconnect other domains you need to install other puns or add the preconnect manually.

Pre* Party Resource Hints

This is another amazing WordPress plugin that allows you to add preconnect, prefetch, preload, and even pretender. So if you want to preconnect domain fonts and CDN’s Url, Pre*PArty Resource Hints is the best choice for you. It is free and effortless to use. Below I have added some other amazing plugins that you must want to try.

Things to consider when preconnecting to required origins

Don’t use too many preconnects, it can negatively affect your page speed. Make sure to preconnect to critical resources only. For all other third party domains prefetch is the best choice. Using 2 preconnect for the most critical third party domain is the best practice.
Don’t preconnect to third party origins that are being delayed and not loaded, because preconnect blocks any connection that is not used within 15 seconds .
Don’t preconnect to resources that are present on your site because prconnect is only effective for third party origins.

The Bottom Line

Here you see using a rel=”preconnect” is an important tool that can boost your site speed and performance. Check your site for critical third party origins by running your site through Lighthouse or Google PageSpeed Insight. There are general recommendations on domains to preconnect. So its best to go with whats suggested. Again don’t reconnect too much because Google says “preconnecting too many resources can negatively affect your site performance and cause it to slow down”. So limit the number of preconnect and only add the critical one.

Don’t forget to share your feedback in the comment section below. I would love to hear from you guys.

Need Help?

Know your websites slow and worried about Google reducing your visibility due to preconnecting issues and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.

Preconnect to required origins – Google Search Console & Core Vitals

We Can Help, Schedule a Call Now