Delaying external javascript/content loading on a website…

One customer of ours, has a considerable amount of content which is loaded from third parties (generally adverts and tracking code). To the extent that it takes some time for page(s) to load on their website. On the website itself, there’s normally just a call to a single external JS file – which once included includes a lot of additional stuff (flash players, videos, adverts, tracking code etc etc).

On Tuesday night, I was playing catchup with the PHPClasses podcast, and heard about their ‘unusual’ optimisations – which involved using a loader class to pull in JS etc after the page had loaded. So, off I went to phpclasses.org, and found contentLoader.js (See it’s page – here).

Implementation is relatively easy, to the extent of adding the loader into the top of the document and “rewriting” any existing script tags/content so they’re loaded through the contentLoader.

<script src="/wp-content/themes/xxxx/scripts/contentLoader.js" type="text/javascript"></script>
<script type="text/javascript">
var cl = new ML.content.contentLoader();
// uncomment, debug does nothing for me, but the delayedContent one does.
//cl.debug = true;
//cl.delayedContent = '<div><img src="/wp-content/themes/images/loading-image.gif" alt="" width="24" height="24" /></div>';
</script>

And then adding something like the following at the bottom of the page :

<script type="text/javascript">
cl.loadContent();
</script>

And, then around any Javascript you want to delay loading until after the page is ready, use :

<script>
cl.addContent({
		    content: '' +'' + '<' + 'script type="text/javascript"' + ' src="http://remote.js/blah/blah.js" />' ,
		    inline: true,
		    priority: 50
		});
</script>

You can control the priority of the loading – lower numbers seem to be loaded first. You can also specify a height:/width: within the addContent – but I’m not sure these work.

For all I know there may be many other similar/better mechanisms to achieve the same – I’m pretty ignorant/clueless when it comes to Javascript. It’s a bit difficult for me to test it – as I have a fairly quick net connection – however it seems to move content around when looking at the net connections from FireBug, so I think it’s working as expected.