How to Speed Up WordPress with Preconnect

Preconnect is one of many ways to improve the performance of your WordPress website. I’ve covered many of these in previous posts and created plugins which optimize various aspects of WordPress.

Although I am the (self-proclaimed) king, no, emperor of hosting files locally, even I must admit that many roads lead to Rome. Today I’ll explain to you how something called ‘Preconnect’ can greatly speed up your WordPress blog.

What is Preconnect?

Preconnect is a resource hint. You might have seen this term before, since I’ve recently implemented the ‘preload’ resource hint for use in OMGF.

A resource hint is basically a way to prioritize resources on a webpage. There are several, but in this post we’ll focus on preconnect.

Using the preconnect link relation type basically means telling the browser: ‘Hey browser! I’m going to download a few things from there, so you might as well establish a connection.‘

What’s important to note here, is that you’re not connecting to the actual file to download it. You’re opening the front door, so you can eventually walk inside to get what you need.

Why does Preconnect speed up WordPress?

Preconnect establishes a connection to the source at pageload. DNS Lookup, Initial Connection and SSL negotiation happen asynchronously. When the browser needs the actual file, it can start downloading immediately without having to wait.

The best way to demonstrate how this speeds up your website, is with a waterfall:

If you look closely at this waterfall, you’ll notice that this is not the kind of waterfall we’re looking for…

I’m sorry, but that was absolutely necessary. I’m sure you’ll understand.

The following graphs will illustrate how the preconnect resource hint positively affects the speed of your website:

Without Preconnect	With Preconnect

The highlighted squares encapsulate all moments where DNS Lookup, Initial Connection and SSL negotiation take place, to emphasize the impact.

Without preconnect, the connections are established one after another. Spanning across the entire 2 seconds of loading time. The last resource is loaded after the last connection is established, resulting in a total pageload time of more than 2 seconds.

As you can see, with preconnect enabled, the connections are established almost all at once! All connections are established within the first second, allowing most  resources to load simultaneously. The remaining resources are loaded in 0.5 seconds after that.

In short, due to preconnect establishing the connections for all 3rd party resources asynchronously, the loading time for my website decreased with ~0.5 seconds!

How to Enable Preconnect in WordPress?

There are several reasons to use Autoptimize and Preconnect is one of them. If you haven’t installed this great plugin yet, do it now.

After activating Autoptimize, its settings page can be found within your WordPress admin-area > Settings > Autoptimize.

Head over to the Extra-tab and you’ll see an option called ‘Preconnect to 3rd party domains’:

All you need to do now is enter a comma separated list of all 3rd party resources your WordPress blog uses and click ‘Save Changes’! The easiest way to generate a list of 3rd party resources is WebPageTest (this is where I generated the above waterfalls — not the actual waterfall); enter your domain, run a test and check the waterfall for any requests to anything else than your own domain. Only include the protocol and domain in the list, like this:

https://www.google-analytics.com, https://www.googletagmanager.com, http://an-insecure-website.com, https://anotherwebsite.com

Summary

In this tutorial I’ve introduced you to the resource hint preconnect. A link relation type which will greatly speed up WordPress if implemented correctly. The example shows that loading time decreased with 25%, which is huge. Especially considering how easy it is to implement preconnect using a WordPress plugin called Autoptimize.