Professional Website Performance: Optimizing the Front-End and Back-End

Chapter 4

Keeping the Size Down with Minification

WHAT’S IN THIS CHAPTER?

• Shrinking your CSS, JavaScript, and HTML
• Learning the tricks used by Google’s Closure Compiler and Yahoo’s YUI Compressor
• Comparing automatic minifiers

Minification is the act to strip out unnecessary characters from code to reduce the size, and a minifier is the tool that does it. Most often, the term is applied to JavaScript, but as you shall see, the technique can also be used on CSS and (to some extent) HTML.

For the web master, the aim of minification is, of course, to reduce file size and thus speed up transfer times for clients. Using gzip compression offers bigger reductions in file size, and it’s often claimed that this makes minification redundant — a minified, gzipped page isn’t much smaller than an unminified, gzipped page. Although there is some truth in this argument, minification is still a useful technique. And with approximately 10 percent of web traffic passing through browsers that don’t support gzip compression (see http://developer.yahoo.com/performance/rules.html), there is a sizable minority of users for whom minification can help a lot.

The downside with minification is that code becomes difficult to read and modify. One solution is to store your code unminified and then minify it on-the-fly, as clients request it. This is a terribly inefficient way to handle what are usually fairly static resources, though, and definitely not something recommended. Instead, you should keep an unminified ...