JavaScript Compression Tools Comparison

JavaScript compression consists of two processes: minification and obfuscation. Minification is a process of removing comments and unnecessary whitespace from a file. Obfuscation is a process of modifying code, changing the names of variables, functions, members, etc. to reduce the size of code. The following are some popular JavaScript compressors:

• Microsoft Ajax Minifier
• Closure Compiler
• YUI Compressor

It’s very hard to say which one is better. That’s why during my projects, I always try to use all three and compare the output based on different facts. Here I’m going to share the output from one of my projects.

Before going to jump into scenarios, I want to talk about how to use these tools. Here are some command lines that you can use for compression:

Microsoft Ajax Minifier

Simple: ajaxmin script.js -o script-microsoft.js

Hypercrunch: ajaxmin -h script.js -o script-microsoft-h.js

Hypercruch Combine Literals: ajaxmin -hl script.js -o script-microsoft-hc.js

Google Closure

You can use online tool

OR

Simple: java -jar compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --js script.js

Whitespace: java -jar compiler.jar --compilation_level WHITESPACE_ONLY --js script.js

Advance: java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js script.js

YUI Compressor

You can use online tool

OR

Simple: java -jar yuicompressor-2.4.2.jar script.js -o script-yahoo.js

Minified Only: java -jar yuicompressor-2.4.2.jar script.js --nomunge -o script-yahoo-m.js

Disabled Optimizations: java -jar yuicompressor-2.4.2.jar script.js --disabled-optimizations -o script-yahoo-o.js

Preserve Unnecessary Semicolons: java -jar yuicompressor-2.4.2.jar script.js --preserve-semi -o script-yahoo-s.js

During one my recent SharePoint internet site project I tried all three compression tools to compress JavaScript files. The following are the result comparison for one of those JavaScript files.

	File Name	Original Size	Compressed	Compressed & Gzip
YUI (Simple)	Script-1	191 KB	77 KB	23 KB
YUI (Minified Only	Script-1	191 KB	94 KB	26 KB
YUI (Disabled Optimizations)	Script-1	191 KB	77 KB	24 KB
YUI (Preserve Unnecessary semicolons)	Script-1	191 KB	78 KB	24 KB
Closure (Simple)	Script-1	191 KB	74 KB	40 KB
Closure (Whitespace)	Script-1	191 KB	94 KB	26 KB
Closure (Advance)	Script-1	191 KB	58 KB	21 KB
Microsoft (Simple)	Script-1	191 KB	76 KB	26 KB
Microsoft (Hypercrunch)	Script-1	191 KB	76 KB	26 KB
Microsoft (Hypercrunch Combine Literals)	Script-1	191 KB	76 KB	26 KB

Recommendation

As you can see in the above results Gzip results are almost same like 1 to 3 KB difference between all three tools. Due to following reasons I prefer to use Microsoft Ajax Minifier:

• Works for both JavaScript and CSS
• Visual Studio Integration
• MS Build task to automate project builds along with minification process
• JavaScript code analysis capabilities
• Code formatting capabilities
• Out-the-box multi file combining capability

Move/Load Scripts after page contents – (ASP.NET, SharePoint)

This post is a sub-post of Web application Performance Optimization Part 1: Optimizing JavaScript series.

ASP.NET Solution

ASP.NET Ajax "ScriptManager" provides a property "LoadScriptBeforeUI=false" to load scripts after loading the page content. But still it doesn’t move all the scripts after the content. Omar Al Zabir has an awesome solution to this problem which programmatically moves all scripts tags after form tag. This solution works for all ASP.NET out-the-box and custom script tags.

Usage Consideration

The above solution may cause behavioral changes in some cases. If any script that is using "document.write" to render content, may change the page behavior.

SharePoint Solution

SharePoint 2010 adds different script tags on every page for core, ribbon, dialog, and much other functionality. Also you can add your own custom script to fulfill your own application requirements. ScriptLink OR ClientScriptManager controls are used to add scripts and both works in same way. So we can use "defer" attribute of ScriptLink to load scripts asynchronously or after the page is ready.

Web application Performance Optimization Part 1: Optimizing JavaScript

From the past few years JavaScript has become the most widely use technology for web applications. JavaScript makes the user interface more interactive and responsive. If we take a look at SharePoint 2010. It has more interactive and responsive interface with fewer page round trips to the server and all this because of the more use of JavaScript.

In today’s post, I’m going to share some of the techniques that I used to optimize SharePoint/ASP.NET applications from JavaScript perspective. All of the following techniques are common for other technologies too.

Move Scripts at the Bottom

The HTTP/1.1 specification suggests that browsers download two components in parallel per hostname. Many web pages download all their components from a single hostname. While download/execute script tags, browser won't start any other downloads. So if we add scripts in head section of the page. It blocks parallel downloads.

Move/Load Scripts after page contents – (ASP.NET, SharePoint) has solutions for ASP.NET and SharePoint to unblock parallel downloads.

Avoid Inline Scripting

First question that comes in mind when developer is coding JavaScript: Should JavaScript be contained in script file, or inlined in the page itself? Using script file in the real world generally produces faster pages because the JavaScript files are cached by the browser. JavaScript that is inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript is in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

Now the decision between number of HTTP requests and the size of the HTML document is difficult. If we create a matrix on our applications then most of the time script files will be the best option. Because we can overcome to HTTP request issue by using CDN, different host name, and combining script techniques.

Minify/Compress JavaScript

The amount of data sent in each server response can add significant latency to your application, especially in areas where bandwidth is constrained. Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.

JavaScript Compression Tools Comparison has comparison between different tools.

Remove Duplicate (i.e. Redundant) JavaScript

These days’ applications are using different JavaScript libraries, plugins, and custom scripts. When developers are using these libraries, plugins, etc… in some situations they never realize that they’re replicating same code/components in the form of different versions.

Let’s say, if we’re using jQuery library along with different plugins into our application. Sometimes different plugins are compatible with different versions of jQuery or some plugins are completely dependent on other plugins or some plugins have additional functionalities by adding other plugins. Any one of these situation sometimes cause script duplication.

Web application Performance Optimization Tips & Tricks

These days web applications performance became more important to businesses and it leads to Performance => Better Visibility => More Customers => More Revenue. Especially for Internet-based distributed applications, the need is even more acute – users have a choice about where they browse, and if a site’s performance frustrates them they may never return. Every web application consumes around 80% end-users time on page download. Most of this time is tied up in downloading of different components like images, scripts, flash, stylesheets, etc…

In this series of blog posts, I’m going to share different techniques that I used in different ASP.NET & SharePoint projects for frontend optimization. These techniques are pretty simple and standard best practices for frontend optimization. But I’m going to share the facts and figures that I got in different projects.

• Part 1: Optimizing JavaScript
• Part 2: Optimizing CSS
• Part 3: Optimizing Images
• Part 4: Miscellaneous Optimization Techniques
• SharePoint Performance Best Practices
• ASP.NET Performance Best Practices

Each part will be published soon…