This is part 10 of a multiple part series on web performance improvements. The first Introductory blog can be found here. In previous part we discussed about pro and cons of including Javascript and CSS inline as well as externally. In this part we will discuss how minifying Javascipts and Obfuscation of Code helps us improve the performance of a web page.

The idea behind Minification and Obfuscation is very simple. Lets consider following two examples. In first call the client has requested a file of 3.4 MB. In the second example the client has requested a 2 MB file. With little knowledge about web applications anyone can tell that the time taken will be less in case of second example considering all the environmental factors are similar.

It make it clear that small files = less time.

Minification is the practice of removing unnecessary characters from code to reduce its size. This results in improved load time. In minification process all comments, unneeded whitespace characters (space, newline, and tab) are removed. In case of JavaScript, this improves response time performance because the size of the downloading file is reduced.

Obfuscation is technique of optimizing source code. Like minification, it removes comments and whitespace. On top of minification obfuscation also munges the code. As part of munging, function and variable names are converted into smaller strings making the code more compact, as well as harder to read. This is typically done to make it more difficult to reverse-engineer the code. But munging can help performance because it reduces the code size beyond what is achieved by minification.

Minification or Obfuscation

What should we should choose to optimize code, minification or obfuscation.

• Minification is a safe and fairly straightforward process. Obfuscation, on the other hand, is more complex.
• Because obfuscation is more complex, there’s a higher probability of introducing errors into the code as a result of the obfuscation process itself.
• Since obfuscators change JavaScript symbols, any symbols that should not be changed (for example, API functions) have to be tagged so that the obfuscator leaves them unaltered.
• Obfuscated code is more difficult to read. This makes issue debugging difficult in production environment.

Tools

The most popular tool for minifying JavaScript code is JSMin developed by Douglas Crockford. The JSMin source code is available in C, C#, Java, JavaScript, Perl, PHP, Python, and Ruby. The tool of choice is less clear in the area of JavaScript obfuscation. Dojo Compressor OR ShrinkSafe is one of the best.

Example

Following image shows two scripts of different sizes, 50K and 401K, and effect of minification and obfuscation on them.

We can conclude following points from the above figure:

• The smaller script of size 50K was reduced to 13K and 12K respectively after minification and obfuscation. The file download time reduced to 481ms and 471ms respectively after minification and obfuscation when compared to 581ms time of normal file size download time.
• The bigger script of size 401K was reduced to 131K and 128K respectively after minification and obfuscation. This is significant reduction in size. The file download time reduced to 769ms and 755ms respectively after minification and obfuscation when compared to 1112ms time of normal file size download time.
• Obfuscation gives better results in both cases. It further reduces the size then minification and thus takes less time.
• Minifying scripts reduces response times without carrying the risks that come with obfuscation.

Best of way out

There are a couple other ways to squeeze waste out of your JavaScript.

• Inline Scripts

Inline JavaScript blocks should also be minified. Though this practice is less evident on today’s web sites. In practice, minifying inline scripts is easier than minifying external scripts. Whatever page generation platform you use, there is a version of JSMin that can be integrated with it. Once the functionality is available, all inlined JavaScript can be minified before being echoed to the HTML document.

• Gzip and Minification

Using gzip can typical reduce the size of a file by 70%. Gzip compression decreases file sizes more than minification. It’s interesting that obfuscation and gzip perform about the same as minification and gzip, another reason to just stick with minification and avoid the additional risks of obfuscation. Gzip compression has the biggest impact, but minification further reduces file sizes. As the use and size of JavaScript increases, so will the savings gained by minifying your JavaScript code.

Minifying CSS

The savings from minifying CSS are typically less than the savings from minifying JavaScript because CSS generally has fewer comments and less whitespace than Java-Script. The greatest potential for size savings comes from optimizing CSS—merging identical classes, removing unused classes, etc. The best solution might be one that removes comments and whitespace, and does straightforward optimizations such as using abbreviations (like “#606” instead of “#660066”) and removing unnecessary strings (“0” instead of “0px”).