Blog post
Blog Post
Using Prefetch as a Proactive Approach
Using a prefetch technique can help avoid the performance problems that occur when you rely solely on a cache method, and help enhance the UX.
Paul The Octopus was known as an animal oracle who could predict the result of a football match. He made accurate predictions for the matches played in the 2010 FIFA World Cup.
What if a browser could do the same thing? What if it anticipated the next page that the user was going to visit and downloaded it in advance? If that happened, it would help download critical resources ahead of time and significantly affect its performance.
One might say, ‘isn’t that what cache is for?’ Well yes, it is. Caching helps browsers avoid making expensive HTTP calls and delivers needed resources from the disk cache. However, it presents many challenges on modern websites and situations, where caching may not help:
- First-time visitors: Cache only helps if the site is visited for a second or third time by a user. If you visit a site for the first time, caching would have not kicked in.
- Expired cache: 69% of resources don’t have any cache headers or are cacheable for less than a day. If the user is visiting a page the second time and the cache has expired, then an HTTP request is needed to check for a fresh resource. Let’s assume that the web server states that the cache is valid, then network delays could factor in and make the pages load slowly.
- Purged cache: If browser starts caching resources for every website, it’s possible that the browser will purge a website’s cache to make room for another.
- Cleared cache: Cache gets cleared very frequently. It’s often done by the user, as well as some tools on your computer such as an antivirus program.
To address issues presented by caching, we need to do something more; this is where a pre-browsing or predictive browsing/prefetching, technique comes into play.
Prefetching defined
Websites today are driven by dynamic content and multimedia. A single webpage may load multiple images and videos from different sources which could result in long wait times and a poor user experience.
Modern browsers, such as Chrome, address this challenge by downloading the content in advanced. Different content, which will most likely be accessed by the user, gets downloaded in the background and becomes instantly available when the user needs to interact with it. This performance optimization technique is called pre-fetching, and it can help in reducing DNS lookup times, TCP connections, HTTPS handshakes, etc.
A few methods in practice today include:
- DNS Prefetching
- Link Prefetching
- Prerendering
Types of prefetching
1. DNS Prefetching: Usually, a domain lookup takes anywhere between 1 milliseconds to several seconds, depending on caching done at different levels involved in DNS resolution process. DNS prefetching reduces domain lookup times by resolving different domains, such as Google Analytics or other social media domains a that need to load different resources on the webpage in advance.
Browsers such as Chrome, Firefox, etc., allow DNS prefetching by default; this allows a page to resolve different domains, which deliver content (such as eternal JS, images, etc.) on the page, in advance. Although modern browsers support DNS prefetch, it is still not available on mobile browsers and older IE versions. Also, if an external file has references to other domains, then the browser will not prefetch those until the external file has been downloaded and parsed. In such cases, we can explicitly ask the browser to do a DNS prefetch by specifying DNS-prefetch in your page’s <head> tag as shown below:
_<link rel=’dns-prefetch’ href=’http://abc.com’>
_
Now, when the browser parses the page and comes across this HTML tag, it immediately performs DNS lookup in the background for the specified domain. When the resource from this domain is called, it only requires resource download and no more DNS lookup.
Let’s take an example of a user visiting Google Search and searching for “Flipkart iPhone 7.” It is very likely that the user will click on the link www.flipkart.com in the search results. In this case, Google can prefetch DNS for this domain which will help save DNS lookup time when the user visits www.flipkart.com.
The snapshot below illustrates DNS prefetch implemented on their pages:
2. Link Prefetching: It is a technique which downloads the entire resource including font, images, etc. If we are confident that the user will navigate to flipkart.com and we are aware of the site’s critical resources, then we can download these resources in advance using prefetch.
<link rel=’prefetch’ href=’http://www.flipkart.com/critical.js’>
Currently, its implementation is not consistent, and its specs are vague. So, you might see different implementation by different browsers such as:
- Firefox downloads one prefetch at a time whenever it is idle. Chrome, on the other hand, downloads up to 10 resources in parallel.
- Android browser, Firefox browser, and Firefox mobile browser starts prefetching after “window.onload” but Chrome does it immediately which impacts the page’s resource download as it utilizes current TCP connections.
It is best to prefetch only those resources that are critical to the page and cacheable.
3. Prerendering: This is a next level technique which downloads the entire webpage content and caches it in the background. With prerendering, the browser creates DOM tree, applies CSS, executes JS, etc.
In the same example that we considered above, if we are certain that the users next action would be to visit www.flipkart.com, then we can prerender the entire webpage like this:
_<link rel=’prerender href=’http://www.flipkart.com/’>
_
When the browser encounters this, it will load the webpage and all the necessary resources in a hidden tab. If the user visits the specified URL, then the current tab is replaced with the new tab making the webpage visible instantly. Google Search has had this feature for years under the name Instant Pages. Microsoft recently announced they’re going to implement a similar feature for prerendering in Bing on IE11.
The following image illustrates the browser support for the pre-browsing techniques mentioned above:
It is very important to proactively monitor webpages to ensure if this performance optimization technique is working or not. Catchpoint’s digital experience intelligence platform helps you monitor it actively (synthetic monitoring) and passively (real user monitoring).
April 28, 2017
Ankit Kumar
This is some text inside of a div block.