Definition
Rel=”Preconnect” is an attribute attached to the <link> parameter that requests the browser to establish a connection with an external domain right at the beginning of a page loading process in order to speed up the setup.
Earlier in this blog, we talked about Preload and Prefetch scanners. You may remember that a Preload scanner is a way to request the browser to load a particular element as soon as a page is loaded. This way, your browser can load the relevant stylesheets or featured images first before parsing through the rest of the HTML script.
The reason we use preload scanners is that the browser parses your HTML script line by line.
That is, it starts with the <HTML> tag, moves on to parsing the <head> section, then the <body> section, and so on.
So, if you have a CSS element invoked somewhere in the middle of the page, you could force the browser to parse half of your HTML page, and start loading the stylesheet only after half of your page has been loaded.
This is a problem because your HTML page could then start loading the stylesheet which could cause the already-loaded part of your website to bounce around – causing serious layout shifts.
So, how is this all related to this article?
Well, let me explain. Sometimes, your stylesheets or JS codes could be hosted on a different domain. For example, if you use Google fonts for your website, you could be invoking a <link> statement like this
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">Now, in order for your browser to load this font from the GoogleAPIs website, it has to first set up a network connection with the particular domain and start downloading the stylesheet only after that.
There is no guarantee on how quickly the network connection can take. If your visitor is in Australia, and the website is requesting a connection with a domain located in London, then you can be sure that merely setting up contact with this domain can take a few microseconds (not including the time it takes to download the stylesheets from there).
Rel=Preconnect is a way for you to speed up this process. This attribute requests the browser to establish the connection with this external domain right off the bat when the page is loaded. This way, when you want to download the stylesheet or any other script, it can happen almost as fast as downloading something from your own server.
Can Rel=Preconnect Slow Down The Website?
Here is the thing – Rel=Preconnect is a double-edged sword. When used judiciously, you could make sure that you shave off crucial seconds off the page loading process.
However, it is important to note that using rel=preconnect in your code also means that you are diverting resources meant for parsing the HTML code toward setting up the external connection.
If an external resource is not absolutely critical, then avoid using rel=preconnect since it can slow down the loading of the rest of the page. In such cases, when you run a Lighthouse report, you could see a message like this:
Can You Use Preconnect and Preload Together?
Yes, both Preconnect and Preload can be used together. The Preconnect flag merely indicates to the browser that an external connection needs to be established. If you would like the particular file to be loaded too at the same time, you may use the Preload scanner together using a command like this:
<link rel=”preconnect preload” href=”https://www.example.com”>Some browsers may not recognize “Preconnect” as a valid flag. So, using preload in conjunction with Preconnect may be a good idea.
Is Your Preconnect Working?
Here is a step-by-step instruction to checking how your browser goes about loading a webpage.
- Step 1: Launch Google Chrome and enter chrome://net-export/ in the address bar
- Step 2: Click ‘Start Logging’. You will be asked to save the log file in your local desktop. Pick a location and save.
- Step 3: Open a new tab and enter the URL you want to monitor
- Step 4: After the page has loaded (or at least partly loaded), go back to the first tab and click ‘Stop Logging’
- Step 5: Now, enter https://netlog-viewer.appspot.com/ in the address and hit ‘Enter’
- Step 6: Click ‘Import’ and pick the log file from your local desktop
- Step 7: Click on the ‘Events’ tab to take a look at the sequential stream of events and check if the preconnection happened as you had envisaged.
There are other ways to do the same process using the Inspect window of your browser. Check this article from Andy Davies for more.
Anand Srinivasan is the founder of CWVIQ, and has been in the internet media space for over 15 years. He has previously served as the AVP of Products and Head of Business at popular media portals. He has worked with several SaaS and enterprise businesses as an external consultant for their SEO marketing campaigns.