Minifying Your JS and CSS (5 Tips)

Background

Just because HTTP/2 is out, some think that they can stop some web performance optimization (WPO) practices like not minifying their Javascript and CSS.  While the new protocol reduces the impact of some WPO practices, it does not eliminate all of them.  Some might assume that the HTTP/2 compresses the entire file, but this is a misconception. ONLY the HTTP message headers are the ones getting compressed via the HPACK compression format used by HTTP/2. Even with HTTP/2 and other optimized protocols, minification still makes files smaller, which saves bandwidth and makes transfers and page load time faster.

Command Line Tools

A great simple JS/CSS minification tool for your CLI is a node.js package called Minifier.   Let's take a look at what you can do with it: First, install the package. If you don’t have node.js installed, download it here: https://nodejs.org/download/

npm install -g minifier

Warning: If you have the `minify` package installed, remove it first before installing minifier.

First, we will look at minifying individual files. What I really like about this program is that you don’t have to specify an output filename.  It automatically adds .min. in the middle of the filename and extension. For example:

$ minify webperf.js
Minification complete
$ ls
webperf.js    webperf.min.js

Next, we will look at minifying an entire directory.  This program is smart, it skips any other file type so don’t worry if you have .map files in the directory.  I recommend using the --clean option to avoid duplicate files.

$ minify --clean path/to/css/
Minification complete
$ ls path/to/css/
webperf.css    webperf.min.css    dietcoke.css    dietcoke.min.css

Lastly, we will look at the template option that will let you customize the output file name.  At the time of this writing, there are 4 options that include:

• {{filename}} The original filename
• {{sha}} The SHA digest of the original file
• {{md5}} The MD5 digest of the original file
• {{ext}} The file extension

$ minify --clean --template {{filename}}-{{sha}}.min.{{ext}} foo.css
Minification complete
$ ls 
foo-b777470ea05094cd43f973073c5cef2a051b5a88d113ab5081d29ccba30babbc.min.css

CSS Pre-Processors

CSS-Preprocessors are a valuable tool. Not only do they speed up development time by making the code more maintainable and extendable, but they also have built-in minification options. LESS (Less) is one of the more popular CSS pre-processors. Less can be used on the command line via npm, downloaded as a script file for the browser, or used in a wide variety of third-party tools.

lessc -x webperf.less webperf.min.css

SASS

Sass is another popular CSS pre-processor. It has been actively supported for over 8 years, making it a mature, stable, and powerful professional-grade CSS extension language.

sass webperf.sass:webperf.min.css --style compressed

Stylus

Stylus is an expressive, robust, feature-rich CSS language built for node.js. It supports both an indented syntax and a regular CSS style.

stylus --compress < webperf.styl > webperf.min.css

Web Apps

Don’t like the command line?  That’s cool, here are some websites that can minify for you.   Javascript Online Minifier

http://prettydiff.com/?m=minify

Pros

• Copy and paste code
• Upload code
• Auto-detects language (js/CSS)
• Fast
• Multiple options
• Open-source

Cons

• Hard UI (not easy to use)
• Can't download the minified file (file.min.js) 

CSS Online Minifier

http://csscompressor.com/

Pros

• Clean and easy to use
• Lots of advanced options

Cons

• Only CSS
• Can't download the minified file (file.min.css)
• Not open source

Javascript and CSS Online Minifier

http://www.jscompressor.com/

Pros

• Clean and easy to use
• Both JS and CSS
• User-friendly

Cons

• Can't download the minified file (file.min.css)
• Not open source
• Limited options
• Slow

CSS Un-Minifier

What if you need to un-minify, or clean up a CSS file? Well, MaxCDN has a tool called proCSSor that cleans and organizes your CSS the way you want it. It has multiple options such as Brace Style and Indentation Properties. http://tools.maxcdn.com/procssor/

Pros

• Clean and easy to use
• User-friendly
• Can download output
• Lots of options
• Multiple input methods

Cons

• Not open source
• Only CSS

If you have any other minification tools you like to use, go ahead and share them with everyone in the comment section below. Here’s to a cleaner, more optimized Web.

If you have any questions or experience any issues, please reach out to the Support Team, live chat and ticket support are available 24/7.