Prefetching

prefetching
What is Prefetching?

Prefetching allows a browser to silently fetch the necessary resources needed to display content that a user might access in the near future. The browser is able to store these resources in its cache enabling it to deliver the requested data faster. Therefore, once a web page has finished loading and the idle time has passed, the browser begin downloading other resources. Once a user clicks on a particular link that has already been prefetched, they will see the content instantly.

Types of Prefetching

There are 3 main types of prefetching that exist. The most popular and widely used method is link prefetching. However, DNS prefetching and prerending are also useful and each serve their own purpose.

Link Prefetching

Link prefetching, as discussed in the previous section, is a mechanism that allows the browser to fetch resources for content that is assumed the user will request. The browser will look for prefetch in either an HTML <link> or the HTTP header Link such as:

  • HTML: <link rel="prefetch" href="/uploads/images/pic.png">
  • HTTP Header: Link: </uploads/images/pic.png>; rel=prefetch

As can be seen in the image below, prefetch has been adopted by most major browsers with the exclusion of Safari, iOS Safari, and Opera Mini.
Browser-Support-Prefetch

DNS Prefetching

DNS prefetching allows the browser to perform the DNS lookups for links on a page in the background while the user browses the current page. This minimizes latency as when the user clicks on a link with DNS prefetch enabled, they do not have to wait for the DNS lookup to take place as it already has.

DNS prefetch can be added to a specific url by adding the rel= tag to the link attribute like so: <link rel="dns-prefetch" href="https://www.keycdn.com/">

Similar to link prefetch, DNS prefetch has also been adopted by most modern browsers.
Browser-Support-DNS-Prefetch

Prerendering

Prerendering is similar to prefetching in that it gathers the resources needed to display a page that the user may navigate to next. Although the main difference is that instead of just downloading the required resources, prerendering actually renders the entire page in the background. The page is hidden, although if the user navigates to the page, the hidden page will replace the current tab and will display the page the user requested.

The diagram below shows a visual demonstration of what happens when prerender is used.

Prerendering-DiagramChrome Prerendering Src: chromium.org

Prerendering is the least supported type of prefetching across the major browsers. Supported only by IE, Edge, Chrome, Opera, and Chrome for Android.Browser-Support-Prerender

Prefetching Example

Popular search engines such as Bing and Google are known for using prefetch to deliver results to users when a search is made. When the user enters their search query, the search engine goes ahead and delivers the results to the user. Based on which results a user typically visits (usually the first or second) the resources for these pages are then prefetched resulting in a faster loading time if the user clicks the link.

Although prefetch is a useful tool for speeding up the web, there are also a few cons to using it. For example, websites such as Google who use prefetch, are using the website owner’s bandwidth to load the page that a user may not actually visit. The same goes for tracking page views in Google Analytics, the user may not actually visit the prefetched site however, a page view will still be recorded.

Conclusion

Prefetching is without a doubt a useful browser mechanism to make use of. It’s ability to fetch resources to deliver content faster while the user browses their current page makes it an appealing feature for both website owners and viewers alike. For more information and a detailed list of frequently asked questions, consult Mozilla’s prefetching FAQ page.

One Comment

  1. Humna Yousaf

    Thanks for this tutorial. The above tutorial really help me to solve my issue. Keep sharing like this so the people can rid of the difficulties.
    -Humna

Leave A Comment?