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 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 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 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.
prefetch is used when we are certain that a resource will be used at some point of the user journey. Do not confuse
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">
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.
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 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.
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:
Originally posted in sooraj.io