Load Page Content Faster by the Right Order - Fast Page Content Loader package blog

Contents

Introduction

The loading priority property

Setting the loading priority

Upcoming developments

Introduction

When you have several elements in the page that you need to delay their load until the main page content loads, sometimes you need to make sure that certain delayed elements are loaded first.

For instance, if you have some Twitter or Facebook buttons at the top of the page followed by a leaderboard banner ad, it may be important for you to make the banner ad load first. This way your site visitors notice the ad first and eventually notice it sooner, thus increasing the chances of having your users click on the ad, so you get more advertising revenue.

The loading priority property

The Fast Page Content Loader object just introduced the priority property. It may be defined per content element. The default priority value is 0. So elements with higher priority value will load first. Those with lower priority value will load later. Elements with the same priority will be loaded by the order they were added for delayed loading queue.

Setting the loading priority

Setting the loading priority for an element is very simple. Just add the priority property to the properties passed to the addContent function. Take a look at this example.

Load the content loader object:

 <script type="text/javascript" src="contentLoader.js"></script>
 <script type="text/javascript"><!--
 var cl = new ML.content.contentLoader();

Define some content, for instance a Twitter button and a AdSense ad:

 var content = 
 {

  twitter:
   '<a href="http://twitter.com/share"'+
   ' class="twitter-share-button"'+
   ' data-count="horizontal" data-via="jsclasses"><img src="http'+
   '://files.jsclasses.org/graphics/jsclasses/twitter.png" width'+
   '="24" height="24" alt="ReTweet" align="middle" border="0">'+
   ' ReTweet</a>\n<script type="text/javascript"'+
   ' src="http://platform.twitter.com/widgets.js"><'+'/script>',

  ad:
   '<script type="text/javascript"><!--\n'+
   'google_ad_client = "ca-pub-2951707118576741";'+
   'google_ad_slot = "5451588426";\n'+
   'google_ad_width = 728;\n'+
   'google_ad_height = 90;\n'+
   '//-->\n'+
   '<' + '/script>\n'+
   '<script type="text/javascript"\nsrc='+
   '"http://pagead2.googlesyndication.com/pagead/show_ads.js">\n'+
   '<' + '/script>\n',

 };

 // --></script>

Add the Twitter button to the page with the default priority:

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

 cl.addContent({
  content: content.twitter,
  inline: true,
 });

 // --></script></div>

Add the ad to the page with priority set to 1 to make it load before the Twitter button:

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

 cl.addContent({
  content: content.ad,
  inline: true,
  width: 728,
  height: 90,
  priority: 1
 });

 // --></script></div>

Make the content elements be loaded at the end of the page:

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

 cl.loadContent();

 // --></script>

Upcoming developments

The loading priority was one of the features that was planned to be added.

Another feature that was planned but it was not yet implemented is one that deals with the layout of the page blocks within which the delayed elements are loaded.

As you may have noticed, the element loading points appear initially empty or with the HTML content defined by the content loaded object delayedContent  variable. However that space does not have initially the width and the height of the content that will be loaded there later.

This fact makes the browser have to layout again and repaint the page elements there to accommodate the delayed content. It does not look nice because it makes the page elements change their positions every time a delayed content element is loaded.

It would be better if the loading block already had the final width and height to avoid the problem of making the browser layout the page again and moving all the elements below.

The content loader object can already get the delayed elements expected width and height when you call the addContent function. That function even generates a div element with the correct width and height to insert the delayed content element.

However, for some reason that I have not yet figured out, the element placeholder div does not seem to honor the specified width and height CSS properties. Maybe that is due to the fact that the div element is empty. I need to investigate further.

Well for now that is all I have in mind for this object development. Feel free to post comments with other ideas and solutions for this project.