You’re almost ready to hit the ‘go live’ button on that fast, shiny new site. Your last task is to add in analytics and live chat to improve the experience for your users.
Then suddenly, disaster strikes. Your performance just plummeted and your once lightning fast site is now slow and sluggish. What can be done to fix this? Pre-browsing.
Pre-browsing is a feature that modern browsers can use to improve the speed of pages that have to make requests to 3rd party sites. Let’s illustrate it like so: you’re going to McDonald’s for dinner (nobody is judging you). You arrive, then have to order, pay and wait for your food to be prepared. What a nightmare! Fast food? Pffft.
However, McDonald’s have recently implemented an app that allows you to order and pay ahead. That way, by the time you arrive, your order is already waiting for you to collect it. Now that’s fast food!
Pre-browsing is exactly that McDonald’s app. Usually when a browser encounters a link on a site to external content, it has to connect to that external URL and perform a secure handshake with it before it can actually start fetching anything. With pre-browsing, we ask the browser to do all the greetings ahead of time. That way, by the time the script is requested, we’re all good to go. Believe it or not, this can cut your load times in half, especially if you have to use a fair amount of analytics software, facebook pixel, or live chat.
“Sounds awesome” you say? So how do you go about implementing it? First of all, you need to decide which external sites you want to pre-browse. If you add sites you don’t actually need, that will actually slow down performance! The easiest way to do this is by running a performance test with a tool like Lighthouse. This will provide feedback on all sorts of metrics, but you’re looking for the one titled ‘Preconnect to required origins’. Under that title is a list of URLs that you’ll want to pre-browse. Simple, no?
Copy each of those URLs into the
<head>≤/head>
of your web pages, wrapping them in the following code:
<link rel="preconnect" href="[PUT THE URL HERE]">
And that’s it! Run the Lighthouse test again, and you should see performance go back up instantly.
And that’s it! Run the Lighthouse test again, and you should see performance go back up instantly.
If you’d like to learn more about pre-browsing, check out this CSS-Tricks article.