I previously wrote an article on using mod_deflate to compress elements of your web page on the fly when based on an Apache server. However, there are additional ways to reduce the size of your web pages, such as using CSS shorthand tricks (article coming soon) and if you use Javascript this too can be compressed in several ways. In this article I will look at some of the best ways to reduce the size of your Javascript files.

This article assumes that you are using external Javascript files rather than in-line Javascript within your HTML page.

Worth noting is that some compressed Javascript files have been known to cause problems on very old browsers, therefore this is a risk you have to weigh-up. Modern browsers are able to cope with compressed Javascript files as long as the compression itself doesnt’ cause bugs. It is highly advisable to scan your website statistics to see the most common browsers coming to your website, this will give you a better idea as to which type of compression to choose.

I came across a great utility that lets you paste in your Javascript code and then compare the results with a variety of different compression methods. CompressorRater shows you the best method, and you may well agree that combining white-space removal with mod_deflate or mod_gzip is a better solution than some of the regex compression options available. This is a decision each designer needs to make depending on their needs and requirements. In my case the recommended compression was removing white-space with JSMin and using mod_deflate/mod_gzip on the server-end.

Three Compression Methods

• Packer - Packer is probably the easiest method for new users. The interface lets you copy and paste your Javascript code into the page, then simply hit the pack button, and you will see the compressed version below. You are also shown the final file size and compression ratio. I tested this method and made a 50% saving on the original file size.
• ShrinkSafe - I haven’t personally tested this method, but I have heard good things about it. One of the advantages of this compression utility is the many options available:
  • removing comments
  • collapsing line-beginning white-space
  • removing line-ending white-space
  • collapsing multiple blank lines
  • removing all new-line characters
  • removing whitespace around operators
  • removing whitespace near/around curly braces
  • replacing symbols with shorter names (this is how most “obfuscation” is done)
• JSMin - This simple program works well and was the recommended method for my Javascript file. The program works by removing unnecessary white-space. Combined with server-side compression, this should be a safe solution that doesn’t compromise users with older browsers by obfuscation (replacing symbols with shorter names) .