When a user visits a website for the first time, any external JavaScript and CSS files are downloaded to their cache. Depending on the size of the file, this can take more time for the page to render. With more people surfing using mobile platforms, it is a good idea to minify your JavaScript and CSS files.
External JavaScript and CSS files are external to the page. These usually have an extension of .js or .css. These files can become very large on massive web sites. You can even minify the inline JavaScript and CSS in your web pages. Inline JavaScript and CSS refer to the code that is contained directly in your web page.
If you look at some popular JavaScript libraries like jQuery, you will notice there are two versions. One of the versions has ".min" in the filename. This is a minified version of jQuery. The regular version is 179KB and the minified version is 26KB. That is a substantial savings. If you have thousands of web surfers downloading your JavaScript and CSS files, you can save bandwidth and make the pages load faster.
What Does Minification Do?
For JavaScript, minification typically will remove comments, remove white-spaces and line breaks, and obfuscate variables using the smallest variable name possible. JavaScript comments are really only there for the developer so these just take up space and add to the download size.
Since JavaScript statements are terminated using a semicolon, white-spaces and line breaks can be removed. White-space just refers to the spacing between certain characters and line breaks are new lines. When you open the minified version of your JavaScript or CSS file, it will be mostly all on one line.
Obfuscating variables means it will take any variables and change the name to something smaller. Usually it starts with "a" and then goes to "b" and so on. Your variables will still work like always but now will take up less space.
How Do I Minify?
There are several programs out there to minify your files. The one we will focus on today is YUI Compressor. There will be links at the end of the article to this and others like it. The YUI compressor is by Yahoo! and has been around a long time.
The first step is to download the YUI Compressor and un-pack it. The YUI Compressor uses Java so you will need to make sure you have Java on your system.
I am using Windows 7 x64 so it may be a little different for your operating system. After YUI Compressor is downloaded and un-packed, it is time to start the process. First you will need to open a command prompt. To do this on Windows 7, click the start button, go to All Programs, then to Accessories, and then click on Command Prompt (see figure 1).
Figure 1
You should have a command prompt window open. Next we want to add the folder where Java is located to the path so it will be easier to reference. You can also add this to the global path so you do not have to do this step every time. In the command prompt window, enter the following command:
path %path%;C:Program Files (x86)Javajre6bin
Of course, the Java path may be different for you.
Now you can move to the location of your JavaScript and/or CSS files that you want to minify. The command to enter would be:
java -jar C:yuicompressor-2.4.2build yuicompressor-2.4.2.jar script.js -o script.min.js
The first part "java" calls Java to execute the jar file. The jar file’s location may be different than my location depending on where you extracted the file. The next part is the script you want to minify. The "-o" option specifies the location of the output file.
That Seems Hard, Is There an Easier Way?
Sure there are easier ways to do this. There are several GUI and other options for your operating system. Just do a search for YUI Compressor and then your operating system. There are even add-ons for Visual Studio and other developer tools to do this for you automatically.
Conclusion
The biggest thing to take away from this is that you can minify your CSS and JavaScript files to make them smaller to allow for faster download. This in turn will make your site load faster and provide a better user experience. The YUI Compressor is not the only option either. Microsoft and a few others have their own versions.
Links
YUI Compressor – http://developer.yahoo.com/yui/compressor/
Microsoft AJAX Minifier – http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx
