How to use the YUI compressor

Compressing your javascript and CSS is a easy way to save bandwidth and make a site’s download and performance feel a bit snappier. There’s lots of tools to allow you to do this, but from my research it seems that Yahoo!‘s YUI compressor is the overall best.  Sure there’s others out there like JSmin and Dean Edward’s packer, but YUI offers a higher compression ratio, it also works with CSS files, and it’ won’t obfuscate your code.

Compressors work by removing all comments and whitespace (line breaks), and in some cases they will actually analyze your code and shrink variable names.  Using compression can result in up to a 60% decrease in file size!  So lets get started in learning how to use the YUI compressor!

First, it’s probably a good idea to read about YUI, so check out the video introducing it at

Now, lets go and download the latest version: – also since this runs on Java, make sure you have Java installed and updated.

Open up the folder that was downloaded and grab the file in the “build” folder named yuicompressor-x.x.x.jar and you can delete everything else since we won’t need it just to use the compressor.

For this example I’m going to compress jQuery and jQuery UI, first go download them and be sure to get the uncompressed version of each, since we can’t really further compress an already compressed file.  Just open these two files, select all of jQuery UI and copy/paste that to the end of the jQuery file.  The resulting uncompressed file is 436k and over 13,000 lines of code!

If you’re using a Mac, you’ll need to open up the terminal (found by navigating to /Applications/Utilities/, and if you’re using Windows you’ll need to open the command line (Start > Run > type “cmd” and hit enter).

Now in the Terminal/Command Line here’s the syntax for basic compressing with YUI:

java -jar /path/to/yuicompressor.jar path/to/original.js -o path/to/output.js

Instead of typing all these file paths, luckily we can just drag files onto the terminal/Command line and it will write the path out for us.  So here’s what you need to do:

  1. Type java -jar (type a space after) and then drag the yuicompressor.x.x.x.jar file into the window – this tells it that we want to run java code from a .jar file, and then we give it the file to run.
  2. Type another space and drag the file you want to compress into the window.
  3. Another space then type -o to specify that you want to write the compressed output into a new file.
  4. Now you need the path to the output destination file that does not yet exist. So what I usually do is drag the same file into the window, and then use the arrow keys to go back a few characters and rename the file.
  5. Just hit enter and that should do it!


As you can see, we went from 436k down to 264k – which is a 60.5% decrease! Also, it now has no comments and it’s all on a single line of code which makes it next to impossible to read, so be sure to keep a backup.  This is especially true if you are compressing a script that you wrote, if you don’t keep a backup you will forever loose your comments and formatting.

23 replies

  1. First of all, how did you get the background color of your terminal changed? Second of all, I just learned how to access the terminal today, third of all, I don’t get much of this post, but I guarantee that if you post more stuff about php, you’ll most likely get me to read some more. Although you don’t post often. Peace Bro!

    • Chris Barr says:

      Open Terminal > Preferences > Settings and there’s lots of color and transparency options there.

      What didn’t you understand here? I guess some command line stuff can be confusing if you haven’t messed with it before.

      Next time you work on a site, use this and give it a shot. Remember it works with CSS files as well!

  2. Mike says:

    If, like me, you don’t feel comfortable in terminal, you can use one of several online interfaces for the YUI Compressor.

    Here’s one:

  3. jQuery Howto says:

    Mike thanks for the link of online version and Chris, thanks.

  4. Paul says:

    This is a joke right? I mean it has been 20 YEARS since I had to run programs like this.

    Yahoo cannot produce a front end to run this app.? That’s embarrassing. What kind of programmers have they got?

  5. Tim says:

    Paul, there’s *plenty* of front ends to this tool. Search the web a little, or just look at these comments.

    Additionally, a text-based backend is very sensible. I’ve got my web server to compress the JS on the fly, gzip it and cache it, then serve. This lets me roll out new JS with ease, and not worry about tracking multiple JS files in my DVCS.

  6. Tony says:


    Surely it you who are joking, this is designed to be run as an automated task as part of the build process.

    It’s embarrassing that you think everyone needs a GUI interface.

  7. Ian Crowther says:

    Hi all,

    I recently tried to use the YUI Compressor and came accross this online version.


  8. Letitia L. says:

    Thanks so much for this, Chris!  I’m a beginner writing a shell script to automatically minify our JS and CSS every time we do a sync and push live, and nowhere on the YUI Compressor website does it say that we only need to extract the .jar file.  Your post helped a lot!

  9. JeeShen Lee says:

    I wrote a Window Batch file to call the YUI Compressor from command line automatically. So, you can do batch compression without the need to call the javac manually one by one in the command line.

  10. Aaron says:

    I’m using OSX 10.4.11 and your script was giving me an error with the ‘dirpath’ variable having the ‘YUI.scpt’ filename being included in the path to ‘yuicompressor-2.4.2.jar’ eg (Terminal got an error: Unable to access jarfile /Users/Username/Desktop/YUI-compressor-script/YUI.scptyuicompressor-2.4.2.jar)

    I did a manage to get it to work and wanted to share the code with anyone that is having the same problem. 

    set dir to the selection as alias

    set dir to return container of dir as text

    Now, after saving the script as an application, it works! 

    Only problem now is that when CSS files are compressed they are appended with min.js

  11. Aaron says:

    Okay I couldn’t stop tweaking out on the code and I have it successfully adding the correct extension based on if it’s a .js or .css file. 

    Also, the original code re-writes the file names with the original file extension still intact (eg. styles.css.min.css or scripts.js.min.js).  This is fixed now.  Here is the working code (must be saved as an Application)

    on run
        tell application 
    set this_item to choose file with prompt "Choose CSS or JS file:"
    set dir to the selection as alias
            set dir to container of dir 
    as text
            set ext to name extension of this_item
            set newName to this_item 
    as text
            set newName to text 1 thru 
    ((offset of "." ext in newName) - 1of newName
        end tell
        set newPath to posix_path
    set mypath to posix_path(this_item)
    set dirpath to posix_path(dir)
    end run

    on posix_path(mac_path)
    set mac_path to (mac_path as text)
    set root to (offset of ":" in mac_path)
    set rootdisk to (characters 1 thru (root 1of mac_path)
    tell application "Finder"
    if (disk (rootdisk as stringis the startup diskthen
                set unixpath to 
    "/" & (characters (root 1thru end of mac_path)
    set unixpath to "/Volumes:" mac_path
    end tell
        set chars to every character of unixpath
        repeat with i from 2 to length of chars
    if item i of chars as text is equal to "/" then
                set item i of chars to 
    else if item i of chars as text is equal to ":" then
                set item i of chars to 
    else if item i of chars as text is equal to "'" then
                set item i of chars to 
    else if item i of chars as text is equal to """ then
    p;    set item i of chars to "
    " & """
    else if item i of chars as text is equal to "*" then
                set item i of chars to 
    else if item i of chars as text is equal to "?" then
                set item i of chars to 
    else if item i of chars as text is equal to " " then
                set item i of chars to 
    " "
    else if item i of chars as text is equal to "" then
                set item i of chars to 
    end if
    end repeat
    return every item of chars as string
    end posix_path

    on runCompression(mypathdirpathnewPathext)
    tell application "Terminal"
    do shell script "java -jar " dirpath "yuicompressor-2.4.2.jar " mypath " -o " newPath ".min." ext
        end tell
    end runCompression 

  12. Aaron says:

    oops, I am typing this in the wrong plac:)  My apologies

  13. Aaron says:

    FYI, the above script is an Applescript (for mac) that will automate the process without the need to use terminal.  The original post is here:

    Sorry for blowning up your comments:)


  14. Joe Auty says:

    Chris Barr: why aren’t the web server compression modules more commonly enabled? Doing this at the server level on-the-fly (and caching requests) seems like far more of an elegant solution than adding this to a workflow. To be clear, I’m not criticizing you or this article, it is definitely very useful particularly to those who don’t have direct access to their web server configs – obviously minifying stuff is a pretty common thing, I’m just wondering if you have any particular opinions as to why the server-side compression isn’t the norm (particularly since most web servers are probably more disk bound than they are CPU bound)?

    • Chris Barr says:

      It’s starting to become more of a thing, check out the bundling feature in ASP.NET 4.5 which does exactly this and makes it easy. I’m not too familiar with other frameworks and if they have anything similar available. This article is a bit old now and there are many better tools to use to make this easier. Many of the ones I’m familiar with will just create a compressed version every time the file is saved, simple.

  15. koundinya says:

    @Chriss can i compress all my js files in a project in to one single minified .js file?? if so please tell how to do it?

    • Chris Barr says:

      You can, but this may not be the best tool for the job. There are lots of tools out that that will do exactly that and much more, the one that comes to mind for Mac OSX is CodeKit.

      If nothing else you could do this the quick-n-dirty way by copy/pasting all your JS into one file (order matters!), make sure it still works uncompressed, then compress it.

  16. James says:

    Many thanks for putting this together; I’m new to minifying code, and this is by far the best tutorial I’ve found. Thanks again :D

  17. vasim akram shaik says:

    I have a folder. Inside that I have 100 js files. How to do them in bulk.

  18. Tony says:

    Could you please update the tutorial on how to do use Yuicompressor with Node.js/NPM? Thanks!

    • Chris Barr says:

      I have yet to use node.js, but this was originally written before either node or NPM were really the big things they are today. Search google, there are tons and tons of ways to compress javascript files automatically with node.

Leave a Reply