Publishers of technology books, eBooks, and videos for creative people

Home > Blogs > Loading JavaScript faster, Five JavaScript Tips in Five Days

Loading JavaScript faster, Five JavaScript Tips in Five Days

Using JavaScript to turn your Web site into a Rich Internet Application is a smart and accepted development method these days. But lots of JavaScript means more for the user to download, creating an immediate performance hit. In this post I discuss three ways to make your JavaScript code load faster in the user's browser.

More dynamic, Ajax-y Web sites require much more JavaScript (and CSS), especially if you're using a framework, meaning more data for the user to download, outside of any content. And even though JavaScript is just plain-text, a relatively compact framework can be over 100KB! There are three quick and easy ways to minimize the impact that lots of JavaScript code has on the site's performance.

Speaking of minimize, the first thing you can do is minify your JavaScript. Minification is the process of stripping anything unnecessary from a file, thereby resulting in a smaller file size. The two main targets are comments and white space (spaces, blank lines, and tabs). While both are vital to the programmer looking at the source code, neither are required by the Web browser to run that same code. If you like killing time, you can manually go through a file and cut out the comments and white space, but the prudent route is to use one of the many pre-built minifiers available. Two popular choices are JSMin and the YUI Compressor. The former was created several years ago by JavaScript guru Douglas Crockford and is available in many formats: a stand-alone Windows executable, a PHP library, C code you can compile yourself, etc. The YUI Compressor is released by Yahoo! and is written in Java. This means you'll need to use the command-line invocation of the Java runtime to use the compressor, but the instructions are clearly laid out in the corresponding documentation.

When you're minifying JavaScript code, however you choose to do it, make sure you use a copy of the file, as the effects of minification cannot be undone. When using a framework, see if it's available in an already-minified format to save you the extra step.

The second and third ways to improve the handling of JavaScript requires the ability to alter how the Web server handles JavaScript files. If you're using a shared hosting plan, you may or may not have this option (check with your hosting provider). With the popular Apache Web server, you can use an .htaccess or .conf file to tell Apache to send JavaScript files to the browser in a compressed format:

<IfModule mod_deflate.c>
<FilesMatch "\.js$">
SetOutputFilter DEFLATE

That code checks if the mod_deflate module is enabled (the older mod_gzip can be used, instead). If so, then any file that ends with .js should be output using the deflate filter, meaning that it'll be compressed by Apache, to be decompressed by the browser. If you're concerned about supporting older browsers that can't handle compressed JavaScript, see the Apache documentation for additional lines to add to the above.

On a similar note, you can improve the load performance for people revisiting your site by making sure that the JavaScript is being properly cached in the Web browser. There are many tricks for accomplishing this, but again I'll turn to Apache. In an .htaccess or .conf file, you set a long-distance expiration date specifically for JavaScript files:

<FilesMatch "\.js$">
ExpiresActive On
ExpiresDefault "access plus 1 years"

The only downside to this is that if you make any changes to the JavaScript file, you'll need to rename it (and change all the references to it) in order for the changes to be reflected.

So there's a three-step process to improved JavaScript loading in the browser: minify, compress, and cache!

For more on related topics, please check out my books. And be sure to check back here each day this week for more JavaScript tips.