In a recent post I talked about combating javascript bloat to improve your site’s loading times, which basically boiled down to reducing the number and size of requests needed to be made by the browser to download all of your site’s javascript. That approach is fine, but I was still a bit frustrated that even though you can easily make big savings in download times, the delay can still be fairly large.
A totally different approach to take is to delay the loading of your javascript files until after your page has loaded, allowing the browser to actually display something to the user before it even starts downloading the javascript. This have the effect of making your site look to the user like it has finished loading and is ready and waiting when actually behind the scenes things are still happening out of sight. A bit “sneaky” maybe, but as is often the case its all about the user’s perception of speed and responsiveness rather than what the system is actually doing…
So lets look at some code (please excuse the strange formatting - I’m still working on sorting out WordPress’s treatment of the <code> tag…) which I’ve tested in Firefox 2, Opera 9 and IE7:
<head>
<script type="text/javascript">
// <![CDATA[
var jsLoadDelay = 2500;
setTimeout("loadAllScripts();",jsLoadDelay);
function loadAllScripts() {
loadScript("script1.js");
loadScript("script2.js");
}
function loadScript(url) {
var headElement = document.getElementsByTagName("head")[0];
var scriptElement = document.createElement("script");
scriptElement.setAttribute("type","text/javascript");
scriptElement.setAttribute("src",url);
headElement.appendChild(scriptElement);
}
// ]]>
</script>
</head>
Here we have placed the code into the <head> section of our hypothetical page, where the loadScript() function is used to dynamically create new <script> tags, which the browser will then parse. The loadAllScripts() function just calls the loadScript() function as many times as you have external javascript files. After the delay has passed the scripts will be loaded in and be ready for use!
One point to note here is with the value of the jsLoadDelay variable. For this example I have set it at 2500ms (or 2.5 seconds) but you might want to tweak that value a bit. The important point to remember is that you want to allow enough time for the browser to have loaded in all/most of your page, but not wait so long that the user will have finished reading the page and “getting their bearings” and so start trying to use functionality that hasn’t loaded yet!
As an alternative to using a couple of seconds of delay, it might be worth using a much shorter delay (say 500-1000ms) and calling the setTimeout() function at the end of your page; the idea is here that the browser wont have as much left to do once it gets to that point of the page. I’ve not tested this to death in a live situation though, but it works fine in all the major browsers so please let me know how it goes if you do use it!
March 14th, 2007 at 6:25 am
Nice blog.
BTW, your scripts are a bit bloated, you can still simplify them for more efficiency.
March 14th, 2007 at 5:53 pm
I suppose I could save a few bytes by cutting the variable names down to single characters and putting it all on one line, but this is just an example for clarity’s sake.
Other than that I am not sure what other optimisations there are - what did you have in mind?