Speeding up your website using Prefetching techniques
Rendering the page quickly is a must have in today’s fast-paced world. Most of the websites carry out a basic checklist to make your website faster. There are tools out there like Page Speed Insights from Google that checks your website and suggests what can be improved on your website so that the website renders faster.
When talking about page speed the basic things that most of the developers do are minification of assets, gzipping the files and compressing the images.
On an advanced level, there are steps like caching, using a CDN to distribute the resources, writing the first-fold CSS inline, code-splitting, eliminating render blocking JavaScripts etc.
But there are few other techniques that most people don’t talk about when talking about making your webpage faster. These performance enhancing techniques are generally known as prefetching techniques. It’s a simple way to tell the browser — Hey browser, I will definitely need resources X, Y and, Z at some point. So go fetch that now itself, so that when It’s requested we can load it fast.
These techniques let us do the work ahead of time. Different prefetching techniques are dns-prefetch, prefetch, pre-connect, and pre-render.
Here is a sample react-app to demo all the mentioned techniques and here is the link to the Github repo. We will be referencing code from the repo for a better understanding of the concepts.
DNS-Prefetch
A dns-prefetch tells the browser that we would need a few resources from a particular URL, and the browser can start the DNS resolution as quickly as possible. Let’s look at the code.
<link rel=”dns-prefetch” href=”//soorajchandran.me”>Assume that we would be redirected to soorajchandran.me at some point of the user journey. We can add the above line in the head section of our code. Once the browser completes parsing the document, it starts with the DNS resolution for soorajchandran.me. Thus the further requests to soorajchandran.me for resources become slightly faster.
You can see it here in the code example. Using a dns-prefetch can save a lot of time with redirects and on mobile devices where internet speed might be less.
Pre-connect
For a browser, actions like DNS resolution, TCP (Transmission Control Protocol ) handshake and TLS (Transport layer security) negotiations are costly actions.
Pre-connect is similar to a DNS-prefetch, but it also carries out the TCP handshake and TLS negotiations optionally. This saves user’s time by eliminating round-trip latency.
By including the following code in the head section of your website, you can pre-connect a webpage.
<link rel=”preconnect” href=”http://thetrixieapp.com">Pre-render
Pre-render is the mother of all prefetching techniques and must be used carefully. Pre-render tell the browser to load all the assets from a certain webpage with the below code.
<link rel=”prerender” href=”https://github.com/soorajchandran">In effect, the page at https://github.com/soorajchandran is invisibly loaded and kept by the browser. When the navigation happen to this page from the current page, the browser can readily load the pre-rendered page, thus making a better user-experience.
Something that must be taken care when using pre-render is, only use this if you are absolutely sure that a webpage is required at some point in the user journey. Else we will end up loading useless resources.
In our code example, we can see that here, and https://github.com/soorajchandran is pre-rendered in the demo.
Link Prefetch
A prefetch is used when we are certain that a resource will be used at some point of the user journey. Do not confuse dns-prefetch and prefetch, since both of them are used differently and for different reasons. A most common use case is prefetching images that might be requested at some point. Once the page finishes loading, the browser will start to prefetch the image at http://soorajchandran.me/images/logo.png.
In our code example here, you can see the following line.
<link rel=”prefetch” href=”http://soorajchandran.me/images/logo.png">When this line is encountered the browser requests the image from the specified URL, downloads it and store it in the browser cache.
Be careful, not to prefetch huge resources, your browser will give you the following error:
Failed to load resource: net::ERR_CACHE_WRITE_FAILUREThis means that the resource we tried to prefetch is too huge to be written to the browser cache. Also, just like pre-render, only use prefetch if you are absolutely sure that the resource will be used at some point.
Bonus
Let’s also take a quick look at preload, although this doesn’t fall under the prefetching techniques. ( No strict separation exists )
preload is a relatively newer web standard, that allows preloading resources.
Take a look at the below code example:
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto" as="font">Assume that we use, Roboto font at some place on our webpage, and the font is loaded from a CSS file. Normally a browser would only load files that are referred by the HTML document. preload lets us load the resources that are initiated via CSS or JavaScript.
Let’s also have a look at few tools that might come in handy when you are building a cutting-edge web application that requires top-notch performance tuning.
Paint API
Paint API enables developers to measure the time for First Paint (FP) & First Contentful Paint (FCP) — the first key moments in loading that they care about.
Lighthouse
The Lighthouse is an open source tool built by awesome developers at Google. From the official website:
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
It can be accessed from the Chrome Dev tools.
Pro tip: All the above techniques are used to make a good webpage great. Start by implementing the basic techniques and then go to the advanced techniques.
Most common use cases of implementing prefetching techniques are in progressive web apps where performance matters a lot and mobile devices where internet speed can vary. Rendering important parts of the page in a sensible manner can also help make the user experience better, thereby increasing the conversion and engagement rates.
Here is how Housing.com used above techniques and more to speed up their website.
Not every technique listed above are supported across all browsers. ( Latest version of Chrome was used to build the demo ). You can see the browser support for each technique in the below links:
Prefetch | Preconnect | Dns-prefetch | Prerender | Preload
Originally posted in sooraj.io
