From the Blogosphere
Using Prefetch | @DevOpsSummit @Catchpoint #DevOps #APM #AI #Monitoring
It is very important to proactively monitor webpages to ensure if this performance optimization technique is working or not
By: Mehdi Daoudi
Aug. 12, 2017 12:00 PM
Using Prefetch as a Proactive Approach
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:
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.
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:
Types of prefetching
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:
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.
Currently, its implementation is not consistent, and its specs are vague. So, you might see different implementation by different browsers such as:
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:
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 measurement).
Latest Cloud Developer Stories
Subscribe to the World's Most Powerful Newsletters
Subscribe to Our Rss Feeds & Get Your SYS-CON News Live!
SYS-CON Featured Whitepapers
Most Read This Week