Pesky External Script Slowing Things Down?

Problem: site stalls at some point while waiting on a script to load.

Reason: The script is referencing a different domain than your own, and if that domain is taking a while to load, your page cannot proceed until it's loaded. This is a problem.

Solution: If the location of the code itself is not important (i.e. code doesn't add any visible elements to the page), place it as far down on the page as possible. That simple change will allow most of the page to load immediately for use - even though the offending slow script isn't done yet.

Alternatively: If the code generates some sort of html and needs to be put in a specific place (i.e. live chat module or site seal) the following tip is very handy indeed. It relies on the "domready" function of MooTools (a supertastic Javascript library) that will only start the slow script after the whole page has loaded. We are using this on our contact us page for the live chat and skype scripts.

1. Download and install MooTools (it's awesome)

2. Replace your module code with something like:

<div id="whereTheCodeEndsUp"></div>

3. Place the "module" code near the bottom of the page inside of something like:

<div id="whereTheCodeStarts" style="display: none;">
	<!-- Module Code here -->
</div>

4. Place the following code directly following the call for mootools.js:

<script language="JavaScript" type="text/javascript">
	window.addEvent('domready', function() {
	$('whereTheCodeEndsUp').innerHTML = $('whereTheCodeStarts').innerHTML;
	$('whereTheCodeStarts').innerHTML = "";
});
</script>

There are many different ways to accomplish this type of thing, but this is pretty quick — especially if you already have MooTools installed.