When referencing resource links on your website, there’s a new keyword you can add to force your page to load that first before anything else. This helps your code from briefly loading incorrectly or not loading in important parts altogether, it’s called preconnect and it fixes those issues known as render blocking. It basically lets the browser know that additional resources are needed to load and that those resources are located at a different origin. 

To use preconnect, simply add it to the rel attribute like this: <link rel="preconnect" href="https://example.com"> And just like that, you have improved the load speed of your site. By default, modern browsers are already trying to load resources as quickly as possible and they are built to guess which resources are needed first. By adding this quick little resource hint, it won’t have to do any guesswork. 

I first noticed the preconnect keyword from Google fonts when I used it recently and wondered what it was all about. After quickly Googling it, I found that there are other keywords that do something similar. I admit, I don’t 100% understand the differences and I will not pretend to on this blog. All I know so far is that with great power comes great responsibility, meaning that not every resource should be preconnected or you might get the 3 Stooges effect. 

Here’s a great write up about it on Medium by Frontend engineer, Fendy Guo who knows much more than I do. Frendy talks about additional resource hints: DNS-prefetch, Preload and Prefetch – all do similar things but just in different formats. It’s a quick read, I suggest you read up on it if you are interested in making your sites faster and more efficient. That’s all from me for now, I hope you found this useful. Thank you for reading and happy coding!