What is Preconnect and How to Preconnect Resources in WordPress?

Resource hints are a type of WordPress optimization techniques you can use to improve the client-side performance of your website. These hints tell the browsers on how users will likely request resources like fonts, images and scripts while interacting with your site. Browsers can employ resource hints in advance by anticipating the user’s intended behavior. When the browser detects these resources, it will make requests for them as needed. The process involves DNS lookups, TLS and HTTP connections, submitting the request, and subsequently obtaining the response. Preconnect is one of the resource hints for optimizing your WordPress site. In this article, we will explain more about preconnect and how to preconnect resources in WordPress site.

What is Preconnect?

A webpage contains multiple links both internal and external. If you use SEO plugins like Yoast SEO, it will in fact force you to add an external link in your post to get the green signal light. However, external links embedded on your page or opening an external link from your page can be slow due to various reasons. When a user click on an external link, browser needs to establish an HTTP connection. To do that it needs to perform a DNS lookup, create a TCP connection, and negotiate a secure TLS connection. In order to improve the loading time of external links on your page, you can use preconnect option with link meta tag and perform all these tasks in background.

Preconnect is a way to instruct browsers to establish a proactive HTTP connection to an external domain that you linked on your page.

Below are some of the major hints you can provide browser to speed up your WordPress sites.

• Preconnect
• Preload
• Prefetch
• DNS Prefetch
• Prerender

Out of all, DNS Prefetch and Preconnect performs similar function of DNS lookup of external links in your page. However, preconnect also resolves the SSL and initialize the connection. Therefore, it is more effective to load external resources faster when clicked.

Type of Resources You Can Preconnect

Resource hints like preconnect helps to reduce the round trip time and, as a result, saves the total time required to download a page. Preconnecting makes the connection to a third-party service ahead of time and improves performance of the connection. You can preconnect many types of resources to speed up loading of connected pages:

• Scripts like jQuery, Google Analytics, Google AdSense, etc.
• Stylesheets like font files from Google Fonts and other third-party websites
• Media files embedded from third-party domains like YouTube videos

The best practical example is to preconnect Google Fonts domains fonts.gstatic.com and fonts.googleapis.com when using Google Fonts on your site.

Checking Preconnect Issues in Your Site

If you want to check whether your site has any preconnect problems, go to Google PageSpeed Insights tool and test your page. If there are no problems, you will see “Preconnect to required origins” under “Passed Audits” section like below.

If you are using fonts and external stylesheet on the entire domain and not using preconnect, then you will be seeing this under “Opportunities” section.

Preconnect Resources in WordPress

There are many ways to preconnect resources in WordPress site. Generally, you can use link meta tag in the header section to add these instructions. There are also many free and premium WordPress performance optimization plugins available for this purpose. We will explain all these methods in detail in the following sections.

1. Manually Preconnect Resources in WordPress with Meta Tags

As mentioned, preconnect is a parameter for rel attribute in link meta tag. You can manually insert these link tags in the header section for connecting external domains that you frequently use on your site. Let us take an example that you have plenty of YouTube videos embedded on your site. In this case, simply, add the following meta tags between before the end of </head> tag.

<link rel="preconnect" href="https://www.youtube.com">

This will preconnect youtube.com and initialize the setup before even the users click or view the video. Similarly, below are some of the popular external domains that WordPress theme and plugin developers connect for using shared resources. Make sure to use only the used items in your site and not all of them.

<link rel="preconnect" href="https://www.youtube.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://static.doubleclick.net">
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://googleads.g.doubleclick.net">
<link rel="preconnect" href="https://www.google-analytics.com">

As you can see, you should mention crossorigin attribute for preconnecting fonts. Otherwise, only DNS prefetch will be done instead of preconnect the link and to establish a connection. Once, you have the list of preconnect resource hints, login to your WordPress admin panel. Go to “Appearance > Theme Editor” and select your active theme. Click “header.php” file and paste the code before the closing header </head> tag.

Save your changes by clicking on “Update File” button. You can check the page source of any pages on your site to confirm these links are available in the header. If not, make sure to clear the cache on your site and check again.

Now, you can check back in Google PageSpeed and other speed measure tools that preconnect issue is in passed or in green.

Note that you can’t use preconnect link type with HTML tags like <a>, <area> and <form>.

2. Preconnect Resources in WordPress with Free Plugin

Though the above method is easy to implement, there are two drawbacks with that. One is that you need to know the domains for preconnecting and other is to edit the header.php file. Editing header file of your theme is not recommended as the changes will be wiped off when you update theme. Alternate option is to use plugins like Insert Codes in Headers and Footers. However, instead of doing that you can find a direct plugin for preconnecting resources. After checking we found a plugin that can help you to achieve all the resource hints. The free plugin we will use in this article is the “Pre* Party Resource Hints”. It allows users to quickly and automatically incorporate resource clues to speed up page load times. Some of the resource hints supported by this plugin include DNS prefetching, prerendering, preconnecting, prefetching, and preloading.

After installing and activating the plugin from the WordPress “Plugins” section, you will see a new menu, “Pre* Party,” on the sidebar. To implement preconnect on your WordPress site;

• Click on the ‘Pre* Party’ menu on the dashboard.
• Scroll down to the “Add New Resource Hint” section and enter the external domain of the target resource hint in “Domain or URL” field. For example, you can enter https://fonts.gstatic.com for Google Fonts or https://www.youtube.com/ when you have embedded YouTube videos on your site.
• Check the preconnect radio button and the crossorigin checkbox. Remember to select crossorigin option only for fonts file and uncheck for other resources.
• You can leave the “as” and “MIME type” as blank. The plugin will automatically add MIME type in the link tag using “type” attribute. Generally, “as” attribute is used for preloading and hence you can leave that as blank for preconnecting domains.
• Click the “Insert Resource Hint” button at the bottom of the page to apply the changes.

You can manage all created resource hints on the same page and delete them individually or in bulk when you no more need them.

The best part of this plugin is that you can enable automatic preconnect feature instead of manually adding resources. Click the “Pre* Party” menu, select the “Settings” tab, scroll down and check the “Enable Auto Preconnect” checkbox. Scroll down and click the ‘Save Changes’ button to apply the new configurations, as shown in the image below.

Disable the next option for allowing unauthenticated users to set preconnect hints and anytime you can reset the preconnected links by clicking on the “Reset” button.

3. Preconnect in WordPress with Premium Plugins

There are many premium plugins offer preconnect as an in-built feature to speed up loading of linked resources. However, you have to manually add these resource hints when using these plugins. For example, Perfmatters plugin helps you to prefetch, DNS prefetch, preload and preconnect resources used on your site. Similar to Pre * Party Resource Hints plugin, you can enter the domain name and insert in the header section with link tag. You can also select crossorigin for preconnecting fonts.

Final Words

Depending upon the usage and setup, you can use different methods to optimize your WordPress site. Some of the most popular optimization methods include caching, SEO plugin and CDN. However, many users are not taking advantage of the resource hints like preconnect to speedup connecting external domains. As explained above, you can use preconnect resource in WordPress site by manually inserting code or using premium or free plugin.