JavaScript and CSS Minification and Optimization with Visual Studio and YUI Compressor

About a year and a half ago I got very interested in JavaScript optimization. This interest was born after playing with YSlow for Firebug (Firefox). I noticed that my customer’s homepage was requiring my browser to download 2 megabytes of Images, HTML, CSS, and JavaScript. Having gotten my start in the days of modems I was aghast at the bandwidth requirements of this huge site. At the time this customer was receiving millions of hits a day due to a recent influenza outbreak. Do the math, that’s a lot of data.

YSlow recommended that the JavaScript and CSS be minified. I’d see this before with jQuery and other open source JavaScript examples. Minification is essentially a way to remove unnecessary characters and white space from the code with the goal of serving the smallest possible file over the wire to the client browser. The problem is this renders code unreadable to developers. I wondered if there was a way Visual Studio could handle this during deployment. Turns out that there is a free add-in for Visual Studio from Microsoft, Visual Studio Web Deployment Projects, which provides more advanced compilation options. The next step was to find code that Web Deployment Projects could use to perform the minification.

The “Y” in YSlow stands first for Yahoo so I went to see what they had to offer. They have open source code know as the YUI Compressor Library available for download that performs JavaScript and CSS minification. The problem for me was the code I needed was written in Java which is not simple to integrate into a Visual Studio build process. Fortunately someone had ported it to C# and thrown it up on CodePlex. It’s currently stable at version 1.4.1.0 and based on version 2.4.2 of the YUI Compressor.

The mix of Web Deployment Projects and YUI Compressor is the most efficient method for me. I don’t have to think about it because it’s integrated to my deployment build process. It provides the flexibility to either minify the files individually or merge them into one large file that my visitors only have to download one.

The customer mentioned at the beginning of this post was able to reduce the size of their JavaScript and CSS by almost 50% (1MB per unique request). This is a simple way to help your servers handle their own pandemic flu outbreak, or “slashdotting”, as efficiently as possible. Your sites will also be much more snappy as browsers are not having to parse unnecessary whitespace, comments, etc. It’s the closest you’ll get to compiling JavaScript and CSS, all for free.

Resources

Example of JavaScript Minification

Before
Javascript before minification

After
Javascript after minification

Example of CSS Minification

Before
CSS before minification

After
CSS after minification

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>