Minify JavaScript, CSS and compress images

Optimizing, minifying and compressing JavaScript and CSS files, the easy and fast way? With YUI Compressor on the Windows, Linux and macOS command line of course! Compacting HTML, CSS and JavaScript speeds up your website because of smaller and faster downloads, parsing and execution time. Here is fire-and-forget JavaScript and CSS minification on the command line.

YUI Compressor to optimize and minify JavaScript and CSS the easy way

Google PageSpeed Insights recommends optimizing or compressing images such as PNGs, and to minify JavaScript and CSS. Minifying resources refers to eliminating unnecessary bytes, such as extra spaces, line breaks and indentation.

YUI Compressor on Linux

To compress CSS and JavaScript in the Bash shell, all we need to do is install YUI Compressor. On Debian and Ubuntu it's available as a package:

sudo apt-get install yui-compressor

Then run the following commands from within your static content directory:

find . -type f -name "*.js" |
 while read line; do (yui-compressor --type js "$line" -o "$line");
 done

find . -type f -name "*.css" |
 while read line; do (yui-compressor --type css "$line" -o "$line");
 done

Instead of doing a find search and a while read line loop, you can also let YUI Compressor minify all CSS and JavaScript files in one directory. According to its help for -o <file>, the output defaults to stdout, and multiple files can be processed using the following syntax:

java -jar yuicompressor.jar -o '.css$:-min.css' *.css
java -jar yuicompressor.jar -o '.js$:-min.js' *.js

All your JavaScript and CSS files are now minified and optimized.

Compress JavaScript in Bash on the fly with UglifyJS

UglifyJS (formerly UglifyJS 2) is another great tool to compress JavaScript files in Bash on the fly. Install it globally using npm:

npm install uglify-js -g

After UglifyJS is installed, you can loop through your files on the Bash shell, compressing all JavaScript files on the fly:

find . -type f -name "*.js" |
 while read line; do ( uglifyjs "$line" -o "$line" --compress --mangle );
 done

YUI Compressor on macOS

macOS users can use Homebrew (brew) to install YUI Compressor:

brew install yuicompressor

YUI Compressor on Windows

Java is required to run YUI Compressor on Windows (as it is on Linux and macOS too). Download and install Java first. Then:

1. Download and unzip YUI Compressor
2. Using cmd.exe, use the following command to execute YUI Compressor:

java -jar yuicompressor-2.4.7.jar style.css -o style-min.css

The yuicompressor-2.4.7.jar file is located in the build folder.

YUI Compressor on Windows: compress and minify CSS and JavaScript on the fly

Let's dive more into YUI Compressor on Windows. Suppose my website dev content is located in E:\Data\Codebase\sites\saotn.org\www and I've placed YUI Compressor in C:\Temp.

The following command compresses, or minifies, all CSS stylesheet files recursively, from within my content directory:

FOR /F "delims=" %I in ('dir /b/s *.css') DO @java -jar C:\Temp\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar "%I" -o "%I"

The following command compresses, or minifies, all JavaScript files recursively, from within my content directory:

FOR /F "delims=" %I in ('dir /b/s *.js') DO @java -jar C:\Temp\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar "%I" -o "%I"

The "delims=" option and the quotes around %I make sure paths containing spaces are handled correctly. Use %%I instead of %I when you put these commands in a batch file. All you need to do afterwards is upload your minified/compressed files to your website.

Smaller files are only half the story: optimize images for the web in bulk too, and serve gzip compressed static HTML files to speed up WordPress.