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, 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:
<link rel="prefetch" href="/uploads/images/pic.png">
- HTTP Header:
Link: </uploads/images/pic.png>; rel=prefetch
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/">
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.
Chrome Prerendering Src: chromium.org
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.
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.