Saturday, August 25, 2012

PreRendering in google Chrome to improve Browsing Speed

You can get your web page displayed in an instant, well the moment you click, is it not awesome? Prerendering and Prefetching of web pages in Google Chrome is the solution. The page view will be almost instant... 

Contents:

Where should you Apply PreRendering and PreFetching

Case #1: Lets say you are reading a lengthy news article which has been split to multiple pages. It takes some time for the page to load when user click on next button.

Case #2: There are web pages where in you have Tabs with hidden content. user clicks on a tab and it can take time to load the page.

Case #3: Your blog has multiple posts, If user is surfing through your posts, he might click on "Next" page of your blog to dig in deeper.

In the above cases, there is some delay before user performing the action and Page is loaded. The main objective of prefecthing and prerendering is to minimize or completely remove this delay.

The Web master, anticipates that user will "most probably" click on that link and will instruct the browser to prerender/prefetch the page background, even before user clicks the page, saving valuable time and to improve browsing experience.

Note: PreFetching and Prerendering are advanced features, calling them in wrong places can give degraded experience to the users and higher bandwidth, slow loading and resource costs.
You should be confident enough that user will click on that link in order to preload the content.

What is PreFetching

PreFecthing is a feature that is currently supported in Firefox. It will "Fetch" all HTML part of the page before hand. This provides some performance improvement, but the actual resource & time cosumers and the JS files, CSS and rich Media and they are not loaded. So the performance improvement is not noticable.

What is PreRendering

PreRendering is a extension of PreFetching, Instead of just fetching the HTML, it does the necessary work to render/display the page to user in the background. When user clicks on the link / Tab, the page loads almost instantly. You can imagine this as if user already clicked on that link in the page and it is loading in background while the user is reading the article.

How to PreFecth and PreRender

As a blog author or developer you might want to prerender a page in order to improve user experience, here is how you do it.

Implementing PreFething and PreRendering is pretty straight forward. All you have to do is put <Link> with appropriate rel parameter values. When ever browser comes across this tag with appropriate rel parameter, it will cosider prerendering.

Prefetch Usage

Pleace the page you want to prefetch in <head> section of your web page, with link to the page to be prefetched.
<link rel='prefetch' href='http://the.page.I.want/to/prerender'>

Prerender Usage

Pleace the page you want to prerender in <head> section of your web page, with link to the page to be prerendered.
<link rel='prerender' href='http://the.page.I.want/to/prerender'>

Will Prerender work always?

Nope. There could be many reasons why prerender does not work. Some of them are...
  • Your chrome broswer version is not updated.
  • You have not enabled "predict network actions to improve page load performance" setting in Chrome.
  • and many such possible reasons.....

Are these Supported by all browsers?

Chromimum versions 13 and above support this feature partially. This concept is still evolving and included in HTML5 specfications

Can I find an example of prerendering?

I implemented prerendering in my web site. For you to get a taste of Google chromes prerendering
  1. Open a new instance of Google Chrome. Make sure you have installed the latest version.
  2. Go to http://www.recurtrix.com
  3. Click on "View Recurtrix Blog" button. You should see the page loading lot faster than it usually does.

Where can you find more information

3 comments


  1. I have definitely picked up anything new from right here. I did however expertise a few technical points using this site, since I experienced to reload the web site a lot of times previous to I could get it to load correctly.

    Corporate Training in Chennai

    ReplyDelete
  2. the site contains a very great article. the information present in this site will be very useful for us. thank you for sharing the blog with us.
    ROI Services in Chennai

    ReplyDelete
  3. Thank you for sharing such a nice and interesting blog with us. i have seen that all will say the same thing repeatedly. But in your blog, I had a chance to get some useful and unique information. I would like to suggest your blog in my dude circle. please keep on updates. hope it might be much useful for us. keep on updating...
    Android training in chennai

    ReplyDelete