Technofriends

This post describes an interesting concept called “Link Prefetching in Web Pages”. It talks about the ways to design Prefetching within your webpages and also talks about the issues attached with it.

What is meant by Prefetching in Web parlance?

In order to understand Prefetching, we need to understand how a web page with multiple objects like images, stylesheets etc is loaded by a Browser. In a usual scenario, we always have a web page designated as the HTML rendered by the browser. This webpage then has the embedded objects like images ( jpeg,gif,png etc) , stylesheets ( css ) etc. When the user makes a request for such a webpage, the first thing a web browser does is load the HTML. The browser then parses the HTML and asks for the different objects in a top-down fashion.

Skeleton of a Web Page.

The above figure explains the request flow for a hypothetical web page with HTML, Images, FLV, Javascript and CSS. The numbers written against the component refers to the way they would be requested by the browser.

So if you have a script written at the top of the web page, that will get loaded first, then whatever next. What is important to understand is that the next request from the browser is made only when the first request has completed. This ways, the browser waits for the first object request to complete before issuing the next request. This leads to a lot of wait time, which in turn can make your website appear to be slow.

With Prefetching, the web browser tries to resolve this issue. When Prefetching is enabled, the browser requests for the first object (i.e. the html) and while it delivers and renders the response to the end user, also parses the HTML to figure out the next subsequent requests. It then makes those requests Asynchronously and stores the result in its browser cache. Therefore, the wait time between the two results is reduced. When the user actually asks for that content, all the browser has to do is give that object from its Cache. The object appears immediately, thereby giving an impression to the end user that the website is indeed fast. Read more about How to get data from the browser cache in Firefox.

How to design my HTML to enable link Prefetching?

The browser looks for either an HTML link tag or an HTTP Link: header with a relation type of either next or prefetch. An example using the link tag follows:

<link rel="prefetch" href="/https/technofriends.wordpress.com/images/big.jpeg">

The same prefetching hint using an HTTP Link: header:

Link: </images/big.jpeg>; rel=prefetch

The Link: header can also be specified within the HTML document itself by using a HTML meta tag:

<meta http-equiv="Link" content="&lt;/images/big.jpeg&gt;; rel=prefetch">

Please note that even if you dont have these special tags in place, some browsers/ applications can still prefetch your links.

I am a Web Administrator, How can i identify Prefetch requests from the Browser client?

Yes. Firefox sends a special request header X-moz: prefetch for Prefetch requests. You can setup your server to track these requests seperately or block them totally, as the case may be.

If you are a web admin and seeing lot of traffic on your server, firstly identify Prefetching requests from your Server Access Logs and then in order to take control of the situation related with prefetching process, decide upon a rescue strategy.

Do i need any special kind of Browser for the Prefetching to work?

Almost all the web browser these days, support Prefetching. All you need to ensure is that your browser supports prefetching and it is enabled. Test if your browser supports Prefetching.

Are there any issues with Prefetching?

There are no serious issues attached with Prefetching but yes, you may find your bandwidth being utilized for content which you might never actually view. 

The other issue is related to prefetching of certain links with topics which might be illegal in your geography.

Your Web site statistics data may become less reliable because of statistics registered for page hits that were never seen by the user

Can i disable Prefetching in Firefox? How do i disable Prefetching in Firefox?

Yes. Though, by default Prefetching is turned on in Firefox, but it can be disabled by following the steps mentioned below.

1.) Open the Firefox browser

2.) Type about:config in the address bar and press Enter

3.) Scroll down the resulting preference list to network.prefetch-next

Disabling Prefetching in Firefox

4.) Double click network.prefetch-next so the value is set to false.

5.) Close Firefox and restart it to enable the change.

Can you list any other Softwares or Add-ons which use Prefetching technique to help me gain some time?

Well, there are many but the two most famous one’s are Google Web Accelerator and an interesting Firefox Add-On for speeding up Firefox called FasterFox.

References: Mozilla

Also Read: Firefox 3.1 to add Private Browsing feature

[How-To] Open Firefox Bookmarks Using Keywords

Mozilla Firefox: Get the data from your Cache

Do you store your passwords using Firefox?

You can follow me on Twitter at http://twitter.com/vaibhav1981

Filed under: Firefox, Uncategorized | Tagged: Browser Cache, Browser Requests, Fashion, Html Browser, Html Images, Leads, Loaded, Lot, Object Request, Performance, Png, Prefetching, Skeleton, Slow Browser, Software, Tips, Tools, Tricks, Wait Time, web, Web Browser, Web Page, Web Pages, Web Parlance, Webpage, Webpages | 1 Comment »