Why Your JavaScript Should be Compressed with the YUI Compressor

Yesterday I listened to Scott Hanselman and Jeff Atwood discussing Website Optimization on Hanselminutes and Scott asked Jeff why external JavaScript files should be compressed for speed and performance of web sites and web applications.  One thing that Jeff didn’t answer with that I think is worth noting is that the YUI compressor that Jeff uses – and which I use – happens to have the Java-based Rhino JavaScript engine in it.  The YUI compressor basically reads in your JavaScript file, parses it with a JavaScript engine and then outputs optimized code that will allow (almost?) all JavaScript engines in different browsers to parse and execute your JavaScript code faster than it would have had you not run the code through the YUI compressor.  Here are a few tidbits explained:

  • The YUI compressor doesn’t require you to pre-validate your code with tools like JSlint, which are nice, but not very friendly for beginner or pressed-for-time developers.  The JSlint site puts it well: JSLint will hurt your feelings.  I can deal with some hurt feelings myself, but managing browser quirks like IE’s inconsistent handling of ‘==’ verses ‘===’ means JSLint isn’t as handy as it could be for large files with lots of comparison operations.  I like well written code.  No.  I love well written code.  Not all code shoppes have time for syntax evaluation – if it works they’ll ship it – and YUI Compressor works great for this situation.  You can use the ‘-v’ parameter when executing the compressor at the command prompt to have it output any hints or suggestions for better syntax or potential errors.
  • The compressor optimizes functions and classes by managing variable instantiation and reducing the number of places in the code where this sort of memory allocation has to happen so that the beginning of the function contains all variable instantiations and your code can then execute without extra overhead for inline instantiations (especially if someone made the bonehead move of instantiating a variable in a loop!).
  • The compressor creates files that have no comments in them so JavaScript parsers  can parse a file that has been parsed and then output by a parser in parser optimized form.  The output code has a whole lot less fluff and generally looks like what a parser would hope a file would look like.  To make a comparison that would be like me taking my thoughts, putting them into a brain just like yours, having that brain output the words perfectly so that you could read them and understand them without any questions and the fewest number of possible words.  Its a JavaScript communications breakthrough.
  • The YUI Compressor can also be integrated with a build script so that your build engine (such as Ant or Nant) could automate the creation of the compressed or optimized files.

I have personally found the YUI Compressor to be invaluable and it has helped improve the loading time of the web applications that I work on substantially.  Being able to tell users (and the sales channel) that the slower loading web application has been improved to load 27% less data (while adding features) almost two years ago was a major win.  Watching their faces as I demonstrated how much faster the code was was icing on the cake.

Does everyone need to use the YUI compressor for every project?  Maybe not.  But I believe that it is probably the best tool available at this time to help professional web application developers to squeeze out that extra bit of performance without hand-tweaking code that could otherwise be thousands of lines of code to evaluate.  I have more performance optimizations I will find, I’m sure, but using YUI Compressor is a no-brainer and I hope you’ll find it gives you peace of mind and mind blowing performance improvements when it comes to file download sizes and speeds.