	Login		Register

Fast Page Loading Tutorial - Fast Page Content Loader package blog

Recommend this page to a friend!

Stumble It!

Bookmark in del.icio.us

	All package blogs		Fast Page Content Loader		Fast Page Content Loader package blog				Fast Page Loading Tut...

	Post a comment		See comments (2)		Trackbacks (0)

>> Next: Load Page Content Fas...

Author: Manuel Lemos

Posted on: 2010-10-20

Package: Fast Page Content Loader

This article is a tutorial on how to make Web pages load faster using the Fast Content Loader object.

By Manuel Lemos

manuellemos.net
<email contact>

Introduction

Determine which content loads slowly

Setup

Delaying slow content

Loading slow content at the end of the page

Browser compatibility issues

Introduction

A common reason for why some Web site pages take too long to load is that they include content that is retrieved remotely using JavaScript, such as advertising and widgets.

The content loader object described in this article provides a workaround to make the page content be loaded in a way that the remote content is loaded after the main page content, thus reducing the user perception that the pages are slow, thus leading to eventual increase in the user satisfaction.

This tutorial explains how to use this JavaScript object achieve that goal.

Determine which content loads slowly

The first thing you need to do is to determine which content in your page loads too slow and is delaying the presentation of the rest of the page. That is the content that may be worth delaying the load until the rest of the page is loaded.

In general all content embedded in the page using JavaScript code retrieved from remote sites halts the page loading and rendering until the remote JavaScript code is executed.

If you have embedded remote content using image or inline frame tags, that may not be worth delaying because the current generation of browsers already loads that type of elements asynchronously. Therefore those elements usually do not delay the load of the rest of the page.

Setup

Once you determined which remote content is worth delaying, you just need to replace original HTML with new HTML with JavaScript that uses the content loader object.

The first thing you need to do is obviously include the object JavaScript file in the Web page. This may be inserted in the page head section but may also be inserted in posterior position, for instance in the position right before the first element of the page that will be delayed.

 
 <script type="text/javascript" src="contentLoader.js"></script>

Then you need to initialize an instance of the content loader object and eventually set a few variables to customize its behavior.

 
 <script type="text/javascript"><!--

  var cl = new ML.content.contentLoader();

Do we want to see debug messages in the browser console or alert window?


  cl.debug = true;

You can also define default content that will be displayed until the actual content is loaded, like for instance an animated image to let the user know that the content will load soon.


  cl.delayedContent = '<div style="text-align: center">' + 
   '<img src="http://ajaxload.info/images/indicator.gif"' +
   ' width="32" height="32"></div>';

 // --></script>

Delaying slow content

Now that you setup the content loader object, you can replace the slow content tags to delay its load. Lets say for instance that you have a Twitter "Like" widget defined by HTML like this:


 <a href="http://twitter.com/share" class="twitter-share-button"
  data-count="horizontal" data-via="jsclasses">
 <img src="http://ajaxload.info/images/indicator.gif"
  width="32" height="32" alt="ReTweet" align="middle" border="0">
  ReTweet</a>
 <script type="text/javascript"
  src="http://platform.twitter.com/widgets.js"></script>

You need to convert this HTML to tags with JavaScript code like this:


 <script type="text/javascript"><!--
   cl.addContent({
     content: '<a href="http://twitter.com/share"' +
       ' class="twitter-share-button" data-count="horizontal"' +
       ' data-via="jsclasses">' + 
       '<img ' +
       ' src="http://ajaxload.info/images/indicator.gif"' +
       ' width="32" height="32" alt="ReTweet" align="middle"' +
       ' border="0">' +
       'ReTweet</a>' +
       '<' + 'script type="text/javascript"' +
       ' src="http://platform.twitter.com/widgets.js"></' +
       'script>',
     inline: true
   });
 // --></script>

Here the content string was broken into multiple lines to make this article look better, but usually you do not need to do that.

The only thing you need to do is to break the HTML tags <script> and </script> into '<' + 'script>' and '</' + 'script>', so browsers do not confuse those tags in the string with the beginning or the end of JavaScript code sections.

You should repeat this procedure of replacing the original tags of slow content by delayed content JavaScript code tags until all slow content tags are replaced.

Loading slow content at the end of the page

The last step is to define the position in the page where the slow content should start loading. Usually it is the last thing in the page but it can be places before that position if you want slow content to start loading sooner.


 <script type="text/javascript"><!--

  cl.loadContent();

 // --></script>

This last call to the content loader object will insert in the page the previously defined slow content inside hidden <div> tags. The object will wait whatever time it takes the browser to load the remote content.

Once the slow content loads, the object moves the DOM nodes of the just loaded slow content to the original positions. The the slow content starts appearing where it should, but without delaying the load the rest of the page.

Browser compatibility issues

The slow content loading procedure works fine in all browsers but for some reason under Internet Explorer and Opera the content may end up being loaded outside the hidden <div> tags added to the page by the loadContent function.

This is somewhat unexpected. So far no workaround was found to solve this problem. Therefore, in the current version of the object, when the browser is Internet Explorer or Opera, the object does not delay the loading of the slow content. Instead, it just inserts the content exactly where it was originally intended to appear. For these browsers the content will still slow down the load of the page as before.

If you have any ideas of how to avoid this problem of Internet Explorer and Opera, please post a comment to this article so you can help improving the content loader object browser support.