top

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 the ways to improve the speed of the website so that the website renders faster.When talking about page speed the basic thing 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 boost up the website performance with prefetching 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 that helps to achieve a lightning fast website using prefetching. We will be referencing code from the repo for a better understanding of the concepts.The very first step to speed up website performance is by using DNS prefetching techniques with added advanced levels of web performance.DNS-PrefetchA 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.<!DOCTYPE html> <html lang="en"> <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"     crossorigin="anonymous">     <link rel="dns-prefetch" href="//soorajchandran.me">     <link rel="prerender" href="https://github.com/soorajchandran">     <link rel="preconnect" href="http://thetrixieapp.com/">     <link rel="prefetch" href="http://soorajchandran.me/images/logo.png">   <title>Prefetch Demo</title> </head> <body>   <noscript>     You need to enable JavaScript to run this app.   </noscript>   <div id="root"></div> </body> </html> In the above example, you can see how to use dns-prefetch to speed your web load time, that can save time to redirect on mobile devices where internet speed might be less.Pre-connectFor 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-renderPre-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 navigation happens 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.<!DOCTYPE html> <html lang="en"> <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"     crossorigin="anonymous">     <link rel="dns-prefetch" href="//soorajchandran.me">     <link rel="prerender" href="https://github.com/soorajchandran">     <link rel="preconnect" href="http://thetrixieapp.com/">     <link rel="prefetch" href="http://soorajchandran.me/images/logo.png">   <title>Prefetch Demo</title> </head> <body>   <noscript>     You need to enable JavaScript to run this app.   </noscript>   <div id="root"></div> </body> </html> In above code example, we can see that here, and https://github.com/soorajchandran is pre-rendered in the demo.Link PrefetchA 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.<!DOCTYPE html> <html lang="en"> <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"     crossorigin="anonymous">     <link rel="dns-prefetch" href="//soorajchandran.me">     <link rel="prerender" href="https://github.com/soorajchandran">     <link rel="preconnect" href="http://thetrixieapp.com/">     <link rel="prefetch" href="http://soorajchandran.me/images/logo.png">   <title>Prefetch Demo</title> </head> <body>   <noscript>     You need to enable JavaScript to run this app.   </noscript>   <div id="root"></div> </body> </html> In above code example, 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.BonusLet’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 APIPaint 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.LighthouseThe 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 tips provided to improve web performance with prefetching techniques, that used to make a good web page 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
Rated 4.0/5 based on 34 customer reviews
Normal Mode Dark Mode

Speeding Up Your Website Using Prefetching Techniques

Sooraj Chandran
Blog
24th Apr, 2018
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 the ways to improve the speed of the website so that the website renders faster.

When talking about page speed the basic thing 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 boost up the website performance with prefetching 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 that helps to achieve a lightning fast website using prefetching. We will be referencing code from the repo for a better understanding of the concepts.

The very first step to speed up website performance is by using DNS prefetching techniques with added advanced levels of web performance.


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.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
    <link rel="dns-prefetch" href="//soorajchandran.me">
    <link rel="prerender" href="https://github.com/soorajchandran">
    <link rel="preconnect" href="http://thetrixieapp.com/">
    <link rel="prefetch" href="http://soorajchandran.me/images/logo.png">
  <title>Prefetch Demo</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
</body>

</html>

In the above example, you can see how to use dns-prefetch to speed your web load time, that can save time to redirect 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 navigation happens 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.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
    <link rel="dns-prefetch" href="//soorajchandran.me">
    <link rel="prerender" href="https://github.com/soorajchandran">
    <link rel="preconnect" href="http://thetrixieapp.com/">
    <link rel="prefetch" href="http://soorajchandran.me/images/logo.png">
  <title>Prefetch Demo</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
</body>

</html>

In above 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.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
    <link rel="dns-prefetch" href="//soorajchandran.me">
    <link rel="prerender" href="https://github.com/soorajchandran">
    <link rel="preconnect" href="http://thetrixieapp.com/">
    <link rel="prefetch" href="http://soorajchandran.me/images/logo.png">
  <title>Prefetch Demo</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
</body>

</html>

In above code example, 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.


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 tips provided to improve web performance with prefetching techniques, that used to make a good web page 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

Sooraj

Sooraj Chandran

Blog author

Software Engineer, Javascript Fanatic, UI/UX, Open source contributor.

Leave a Reply

Your email address will not be published. Required fields are marked *

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount