How to Minify CSS and JS in Linux

Minification is the process of removing all unnecessary characters from the source code of interpreted programming languages or markup languages without changing the functionality.

Why minify CSS and JavaScript files?

The reason to minify a file is to make its size smaller so the transmission over the Internet is faster. Having smaller CSS and JS files improves your overall page performance by decreasing the load time.

Can minified files be edited?

Most of the time, these unnecessary characters that are removed were useful for code readability.
After you minify a file (especially a large one), it would probably be hard to edit it again. So don’t replace your original file with the minified one, but create a new file instead (e.g.: myStyles.css and myStyles.min.css).

Recommended minifiers for Linux

I use two minifiers in Linux:
YUI Compressor (usually a little bit more efficient)
https://github.com/yui/yuicompressor (last updated: 2013)
Minify (updated recently, also doesn’t require lots of other software to run)
https://github.com/tdewolff/minify

How to install and run YUI Compressor and Minify?

Please find below the steps to install these small and cool programs for your Linux distro:

Ubuntu

sudo apt install yui-compressor
sudo apt install minify

CentOS

sudo dnf install https://dl.fedoraproject.org/pub/epel/epel-release-latest-8.noarch.rpm
sudo dnf install yuicompressor

(you need epel-release to install yuicompressor; if you have it already, no need to run the first command)

Minify does not have an RPM package so, if you really want to test it, you should install it from the binaries. Or, just use the online tool to see if it’s worth it.

Now let’s see a minification example. I have a CSS file called myStyles.css and want two create a minified file, myStyles.min.css (actually, I will create two files to see how the different minification tools perform: myStylesYUI.min.css and myStylesMinify.min.css).

sudo yui-compressor myStyles.css -o myStylesYUI.min.css

sudo minify -o myStylesMinify.min.css myStyles.css

What performance improvement to expect?

Both YUI Compressor and Minify do a good job. You may try using both for each file you minify and choose the better result.
Here is a (small extract from a) comparison showing the original / minified sizes for some standard WordPress files:

You can expect a minified JS file to be from 35% to 70% smaller (YUI Compressor seems to be significantly better with JS files).
After minifying CSS files you should see a smaller improvement, around 10% to 30%.

Now start minifying your CSS and JS files and improve your page speed score! 🙂