Using YUI Compressor to compress your website CSS and JS files

June 15, 2013 in Tutorials, Web Development by Tom Henderson

Lately I’ve been spending a lot of time optimizing the Web site I work on in my corporate day job.

When looking for ways to minimize the page download times, there are dozens of small things that need to be addressed. Two of those are: minimizing the number of files that are being downloaded, and minifying (compressing) the files that you do call. In this post I’ll be focusing on CSS files. (YUI Compressor can also be used to minify your JavaScript files.)

As a website lives, breathes and grows over the years, new functionality gets added, and quite often another CSS stylesheet comes along with it. Unless that new functionality is only used on remote sections of the website, you should consider adding the new CSS code to your main CSS file. Sure, your main CSS file is going to grow by a few KB, but you’ve eliminated one more call to the server. With today’s high bandwidth connections, it generally takes less time to download a slightly larger file than it does for the server to deliver two separate, smaller files.

The next step, and the primary focus of this article, is to minify the CSS file, (reducing its file size, by removing all unnecessary characters without changing its functionality), so it can be downloaded as quickly as possible.

OK… let’s do it! But where do we start?

How often does this happen to you? You have an idea for something you would like to accomplish on your website. You research it and find a couple of seemingly viable solutions. You begin working through one of the solutions… and you determine that… hey… great… unfortunately, it looks like I need a doctorate in computer science to get this app to work. With that in mind, here’s the Cliffs Notes version of using YUI Compressor to minify your CSS files.

1. Download YUI Compressor (The Yahoo! JavaScript and CSS Compressor) from GitHub.com, savingĀ  the yuicompressor-2.4.7.zip file in a known location on your computer, (yuicompressor-2.4.7 is the current version as of the date of this post, replace with your version as needed).

2. Create a folder in a known location from which you would like to run the YUI Compressor, (i.e., such as your desktop). Open that folder and grab the path for later use, (i.e., C:\Users\Tom\Desktop\YUI Compressor).

3. Use a zip file decompression tool like 7-Zip (free) or WinZip (trial) to unzip the zip file, and extract the files to the folder you created previously.

4. Open the yuicompressor-2.4.7 folder and look for the folder named ‘build’. Inside that you should see the .jar file,
(i.e., yuicompressor-2.4.7.jar). This is the file you will be running.

5. Locate the CSS file you would like to minify and place it in the ‘build’ folder along side the jar file.

6. Open the Windows command line tool.
On a Windows 7 computer select the Start button and search for “cmd.exe” (without quotes).
On a Windows XP computer select Start… Run… end enter “cmd” (without quotes) and hit “Enter”.
On a Windows 8 computer select… wait!!! Where the heck is the Start button! Doh! ;-)
On a Linux computer, I’m assuming you can run it from the terminal (Ctrl + T) although I haven’t tried it
On a Mac, I’m assuming you can run it from Applications… Utilities… Terminal…

Windows Command Prompt
Run the jar file via the Windows Command Prompt

1. In the Windows command line tool we are first going to change directories to the build folder in which the jar file and our CSS file is located.

2. Enter text similar to the following. (After typing cd followed by a space, you can right-click in the command window and select Paste to enter the path to the build directory.
cd C:\Users\Tom\Desktop\YUI Compressor\yuicompressor-2.4.7\build

3. Next we will run run the jar file to minify our CSS file. In this example, we’ll assume my CSS file is named styles.css and the minified version will be called styles_min.css.

4. Enter a command similar to the following… and hit Enter.
java -jar yuicompressor-2.4.7.jar styles.css -o styles_min.css

5. Done! Your CSS file has been minimized and re-saved with the file name “styles_min.css”.

6. Upload this new file to your Web server and change all calls to the new file name “styles_min.css”.

For additional information on YUI Compressor, visit the YUI Compressor page on GitHub.

YUI Compressor - Minified CSS File

YUI Compressor - Minified CSS File

Tom Henderson