You can find the entire working code here.
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.
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.
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=”//sooraj.io”>
Assume that we would be redirected to sooraj.io 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.
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=”https://www.carrom.io">
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.
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_FAILURE
This 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.
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">
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.
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.