As web applications and sites have become much more dynamic in nature, many often do so at the expense of performance – be it load times or response times. Typically, this has to do with the number of external resources (such as CSS and JavaScript) that are included on a given page.
Now a days, JavaScript is a major player in the web, but there are a number of factors of JavaScript programming that can hinder the performance of a page. If you’re working on a project that contains a number of JavaScript files, consider minifying the scripts before serving them to your users.
It won’t protect you from poor coding, but it can definitely improve performance. It’s easy to do, too.
Code It
There are typically three ways in which JavaScript can be included on page:
As an attribute on an element:
Inline somewhere in the page:
Or in a separate file:
Although all three options are technically functional, it’s a best practice to keep your JavaScript source files outside of the markup and in their own files.
Combine It
Most modern applications do not simply refer to a single JavaScript source file – they typically span multiple files. In fact, it’s not at all uncommon for some scripts to be imported from other serves (such as Google-hosted libraries).
But for maximum performance, it’s good to include them all into a single file. A good rule of thumb when it comes to combining scripts into a single file is to order them in the same way that they are ordered in the markup.
Specifically, the first imported script should be the first block of code in the file; the last imported script should be the last block of code in the file.
Minify It
Once you’ve abstracted all of your JavaScript into a single file, it’s time to minify. Simply but, minification is the process of elimination white space, comments, and characters unnecessary for the browser to use when parsing your code.
There are a number of free tools available (some of which we’ll look at in a future post) but my preferred utility is the web-based implementation of Douglas Crockford’s JSMin.
It’s easy enough: paste your source code into the “code” textarea on the site, select your level of minification (conservative is a safe bet if you’re new to this). Here’s my code prior to minification:
if(bInputIsValid) {
$.post('./php/sendmail.php', {
name: $('#email-name').val(),
email: $('#email-address').val(),
subject: $('#email-subject').val(),
message: $('#email-message').val()
}, function(sData) {
if(sData === 'success') {
$('#email-success').modal();
$('#email-form').get(0).reset();
fadeToggle($('#email-container'), $('#description'));
} else {
$('#email-failure').modal();
}
});
} else {
$('#email-failure').modal();
}
Next click on JSMin. The minified source will be returned:
if(bInputIsValid){$.post('./php/sendmail.php',{name:$('#email-name').val(),email:$('#email-address').val(),subject:$('#email-subject').val(),message:$('#email-message').val()},function(sData){if(sData==='success'){$('#email-success').modal();$('#email-form').get(0).reset();fadeToggle($('#email-container'),$('#description'));}else{$('#email-failure').modal();}});}else{$('#email-failure').modal();}
From there, copy the code, paste it into a separate file, and save it. Now you can replace all of the various script references with a single file in the head of your page.
One important thing to note is that once a script is minified, it’s difficult (though not impossible) to de-minify it. As such, it’s always a good practice to maintain a working copy of the original source and only minify once you’re ready to roll to production.
John Saddington says
wah wah.
Phillip Gibb says
how much of a speed improvement would that give you?
would it be worth the effort of digging out all the JS and recoding to use the single file?
I suppose a good think to do is to use Google’s Page speed and do a before and after investigation.
I know in my blog I have too many javascript files that need to comply to what you speak about here, there are also too many DNS lookups because many of the scripts are off site.
Tom says
In my experience, speed is contingent upon several factors two of which are file size and quality of the code.
Writing JavaScript can be tricky because there are a variety of ways to do the same exact thing many of which can lead to serious memory leaks or just poor performance.
Assuming that the source is well-written, minifying the code and combining it can result in serious performance benefits because you’re essentially doing a single request to download all of the code rather than multiple ones. Ideally, the combined, minified file size should be less than what you currently have. So yeah, performance can be significant.
And yeah, Google Page Speed and Yahoo’s YSlow are great for testing just that.