Optimizing Javascript loading

With the evident increasing prevalence of Web-2.0-styled pages and designs, there is also an increasing complexity in the use of Javascript in web pages. A common use for the language, is to create Javascript libraries, such as jQuery, Prototype and MooTools, or other scripts which improve the whole user experience of the site.

But another increasing prevalence amongst web design is the constant optimization of pages – whether that be to make the markup of the page more semantic, pass the W3 Validator or reduce the loading time of the page, for example.

Decreasing loading times is a common optimization for web pages, but with the increase in the amount of rich content and Javascript, this appears to only exacerbate the problem. Some Javascript files can be hundreds of Kilobytes large – this increases the loading time of your webpage, which, if too long, may cause users to navigate away. Also, if the script elements are placed between the head tags, they delay the loading of the rest of the page (since pages are loaded in a top-down fashion), and will only show a blank page since the content is placed between the body tags, which come after the head tags. This also makes the user think that the page is not loading, which will either cause them to refresh or leave your site.

So what can you do to add rich content to your webpage, whilst maintaining a fairly speedy page load? Surely one is a tradeoff for the other?

Minification and Obfuscation

Minification and Obfuscation are two ways that you can reduce the size of your Javascript code; they are similar, but slightly different.

1. Minification is about reducing the size of your code, whilst maintaining its functionality. Such methods of minifying include removing blank spaces, carriage returns and comments, all of which can reduce the filesize drastically, and this change can often be rather substantial for large files (since they tend to have more comments and other characters which can be stripped).
2. Obfuscation is about removing the meaning from the code. Often variable and function names are changed to alphanumeric values, such as a, b, c etc, with the intent that anyone who wants to take a look at your source code will have a harder time reverse engineering it, and discovering how it works (Note that although this hinders people, it won’t prevent them from reverse engineering your code, if they have enough time to do so). Obfuscation normally leads to minification, since variable and function names are shortened, and often parts of the minification process, such as stripping spaces and comments is done through obfuscation to make the code harder to read.

To see an example of this, take a look at the jQuery source code. The original file, unminified, is ~118KB. However, the minified version is ~56KB – 47% of the original file size. As you can see, minification can seriously reduce the size of your code, and in the case of jQuery, more than halving the file size.

Also take note that obfuscation or minification are better done server-side on demand, rather than having to manually minify your scripts every time you make a change to them and upload these – take a look at the minify PHP application, which can be used to minify Javascript files server-side.

Dynamic Loading

Another favourite of mine in reducing the size of the scripts that you have to serve to the user is through dynamic loading. This is whereby you have a loader script which only loads the required Javascript in order for your page to run. This is generally more efficient, because only the scripts that are needed are loaded, so means that the page loads faster and reduces bandwidth consumption.

The basic principle is:

1. The page loads a small Javascript loader script, of minimal size.
2. “Modules” (other Javascript files) are loaded into the page using this loader script either when the page loads, or when they are needed.
3. Optionally, the loaded files are kept track of, so that any subsequent calls to load the scripts do not actually load the scripts again.

Implementation:

This can be implemented quite easily; the basic idea is that script tags are added to the page DOM, which will cause the script to be loaded into the page. Of course, this can be done several ways; some implement it using the document.write function:


function loadScript(path)
{
document.write('');
}


However, this isn’t a good way to do it; using document.write is a bad practice and the better way to do it is to create a script element and add it to the DOM:


function loadScript(path)
{
var s = document.createElement("script");
s.type = "text/javascript";
s.src = path;document.body.appendChild(s);
}

It is also faster than using document.write (on Opera and Safari at least), although despite being slower on other browsers (naming no names), it is a much cleaner method of adding the object to the DOM.

Despite being a good way of managing dynamic loading of scripts, if you have to load lots of scripts in most cases, it increases requests to the server and increases the amount of objects on the page, which is less efficient than bundling them into one file and serving that directly.