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
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.
12 thoughts on “How to Speed Up WordPress with Preconnect”
One of the lesser-known features of AO, thanks for sharing it with the world Daan! 🙂
The pleasure is al mine, Frank!
Thanks for this useful tip. If we are also using something like WP Rocket, could this collide with it or do we need to do anything differently?
I don’t think it would collide. Just make sure that you purge the CDN after making the changes, because this setting alters the source code! And it should all be good.
thanks for tip using preconnect
My pleasure, Sawal!
Daan is a man who actually walks the walk- doesn’t just talk. A talented developer, to say the least!
Thanks for the compliment, Philip!
I’ll get back to your email ASAP.
Ok. Waiting to hear from you Daan.
Finally i find it! Thanks daan, you are awesome!
No problem! 🙂 Happy I could help!