Improve page load times by compressing code; or, "mnfy ur JS"

Posted on Dec 27, 2010 in IT, Web Dev | 0 comments

Introducing “thick clients”

Long live the “thick client”: web applications that are powered primarily though javascript code running within the web browser itself instead of code executed on a server and sent back to the browser. Perhaps a better way to define a thick client is with an example: Google’s e-mail service, Gmail, is perhaps the most sophisticated and widely-used thick client. Javascript code builds the user interface and handles all the interactivity, while the server is responsible only for delivering the necessary data (in this case, a user’s e-mail messages). The result is a browser-based experience that rivals desktop software, all without any page refreshes.

What makes thick clients a great model for web applications? A few reasons, but primarily because it transfers the effort of building the UX to the client. This greatly reduces server load because the server isn’t busy building HTML pages and sending it over the wire back to the client. Consequently, it also reduces bandwidth use. HTML code is verbose (and can be very verbose if it’s not written efficiently), so having the client build it cuts down on bytes transferred. This reduced bandwidth and server use allows web applications to scale much more efficiently and at reduced cost.

What is javascript minification and why is it important?

Why am I on about thick clients when the post is about compressing javascript code? Because thick clients require an initial download of a significant amount of javascript. This can include open-source frameworks like jQuery, YUI library, and dojo as well as application-specific libraries for data access, authorization, etc. as well as the web application’s own logic. It can add up to many dozens or even hundreds of kilobytes of data, and that impacts user experience (translation: your users have to wait for your app to load, and that’s not good).

To combat this negative consequence of thick clients—or any web site that happens to use a fair bit of javascript—it’s a good practice to minify your javascript code. Minifying javascript is an interesting process. To understand its two primary benefits, you should first realize that writing good, understandable and maintainable javascript (any code, really) requires copious comments, liberal use of whitespace and indentation, and verbose variable and function names.

1. Reduced file size – Those coding practices add more bytes to the code—often a lot more. Minification eliminates bytes by stripping all comments and unnecessary whitespace, neither of which is required by the javascript interpreters in web browsers. More impressively, javascript minifiers replace variable and function names with short tokens to further reduce file size. For example, a function called alertUserToExcessiveLoginAttempts() might be changed to simply a()—quite a reduction. (Renaming in this way only works if you avoid using the javascript function eval() and statement with, both of which are vilified for their blocking of javascript minifying, among other issues.)
   A real-world example of the file-size benefits of minification is the jQuery framework’s two file sizes. As of this writing, the latest version is 1.4.4 and its changelog page shows the full framework weighing in at 179kb, while the minified version is only 26k—a mere 14% of the uncompressed size! Reducing overall data transferred is especially important when dealing with mobile devices where data pipes are much smaller and metered.
2. Obfuscation - Though not foolproof (here’s a library to inflate compressed javascript) it does help keep your code from being read and understood by a person. Is that important? Depends on your needs. I don’t think it’s important, as any sensitive business logic should be sequestered away on the server and exposed properly through a web service. But if you’re concerned that other developers might steal your proprietary indentation method or laugh at your variable names, minifying will help.

Enough already, how do I minify my code?

Glad you’re on board with the benefits of minified javascript. So how do you do it? You can pick from a few different options. I’ve not tested the relative benefits of each, although others have. Here are the couple I have used:

• Yahoo’s YUI compressor
• JScompress (I like this tool’s simplicity: one textarea for input, another for minified output)
• Packer (Another simple interface)
• JSMin – (includes a great description of what minification steps are taken)

Just keep a separate copy of your unminified code locally (and probably in your development environment) and deploy your minified version—typically identified with a “.min.js” appended to the filename—to your web application.

Related: If you liked this, check out:

1. Mock-​​up to valid XHTML: how to build a web page — part 1 What an auspicious title! I recently had an opportunity to...
2. Konami Code Flashback Who remembers the “Konami code” from the good ol’ Nintendo...
3. Mock-up to valid XHTML: how to build a web page – part 2 This is the second in a two-part series on the...
4. The short answer is always "Yes" The short answer is always "Yes." Great advice I've integrated...
5. IT nightmare: maxperip in courier-imap This post is for those of you loooking to resolve...