24 ways

to impress your friends

Minification: A Christmas Diet by Gareth Rushgrove

The festive season is generally more about gorging ourselves than staying thin but we’re going to change all that with a quick introduction to minification.

Performance has been a hot topic this last year. We’re building more complex sites and applications but at the same time trying to make then load faster and behave more responsively. What is a discerning web developer to do?

Minification is the process of make something smaller, in the case of web site performance we’re talking about reducing the size of files we send to the browser. The primary front-end components of any website are HTML, CSS, Javascript and a sprinkling of images. Let’s find some tools to trim the fat and speed up our sites.

For those that want to play along at home you can download the various utilities for Mac or Windows. You’ll want to be familiar with running apps on the command line too.

HTMLTidy

HTMLTidy optimises and strips white space from HTML documents. It also has a pretty good go at correcting any invalid markup while it’s at it.

tidy -m page.html

CSSTidy

CSSTidy takes your CSS file, optimises individual rules (for instance transforming padding-top: 10px; padding-bottom: 10px; to padding: 10px 0;) and strips unneeded white space.

csstidy style.css style-min.css

JSMin

JSMin takes your javascript and makes it more compact. With more and more websites using javascript to power (progressive) enhancements this can be a real bandwidth hog. Look out for pre-minified versions of libraries and frameworks too.

jsmin <script.js >script-min.js

Remember to run JSLint before you run JSMin to catch some common problems.

OptiPNG

Images can be a real bandwidth hog and making all of them smaller with OptiPNG should speed up your site.

optipng image.png

All of these tools have an often bewildering array of options and generally good documentation included as part of the package. A little experimentation will get you even more bang for your buck.

For larger projects you likely won’t want to be manually minifying all your files. The best approach here is to integrate these tools into your build process and have your live website come out the other side smaller than it went in.

You can also do things on the server to speed things up; GZIP compression for instance or compilation of resources to reduce the number of HTTP requests. If you’re interested in performance a good starting point is the Exceptional Performance section on the Yahoo Developer Network and remember to install the YSlow Firebug extension while you’re at it.

About the author

Gareth Rushgrove Gareth Rushgrove is a web designer and developer living in Newcastle, UK. He considers himself something of a hybrid, one moment pondering programming problems (he's particularly a fan of Python and Ruby at the moment) and the next playing with CSS and Javascript. Gareth works as a freelance web consultant helping people build interesting web applications. When not working, Gareth can be found spending time blogging on morethanseven.net or on pet projects such as Refresh Newcastle.

Responses

Got something to add? Post to your own site and tag it 24ways07 and garethrushgrove to be included here.

Your comments

  1. § Erik:

    Thanks for pointing these out. For CSS and JavaScript minification, I’ve been very happy with YUI Compressor:

    http://developer.yahoo.com/yui/compressor/

    Also, I find the Java version of Tidy is less of a hassle to use:

    http://jtidy.sourceforge.net/

    Cheers!

  2. § Brad Wright:

    +1 for YUI Compressor. It’s been proven to be very safe with variables in Javascript.

  3. § Alenônimo:

    To optmize PNG images, I use PNGGauntlet. It’s a very nice GUI for the PNGout utility and it’s freeware.

  4. § Charles Roper:

    I second the recommendation for PNGGauntlet/PNGOUT. According to the author of PNGOUT, Ken Silverman, it can “often beat other programs by 5-10%”. Not bad.

  5. § Manuel:

    Just tested as suggested in the comments here, and PngOut beats OptiPNG in all my sample images (PNGs coming out of Photoshop’s Save for web). Anyway, for most of the images, the compression gain was trivial (6% with PngOut and 3% with OptiPNG).

  6. § Simon Pascal Klein:

    OptiPNG by default runs through only about ten compression methods. To go through the full lot (it’s in the high hundreds) to find the best IDAT compression method use:
    optipng -zc1-9 -zm1-9 -zs0-3 -f0-5 file.png

    Note this can take some time if you are working with medium to large PNG files but can bite off a few more bytes off your file without loosing data. I’ve found it most useful when working with web applications that feature a heavy icon set and with so many tiny images it was definitely worth it. We ran into one issue whereby OptiPNG would change the colour type of the image to achieve a better compression (this is on by default) but the output would render strangely in IE and Firefox under Windows. Add the -nc flag to disable colour type reduction.

    Thanks for the article.

  7. § Pim Vernooij:

    Nice article, but what i’m really interested in, is minify/compress scripts on-the-fly, a.k.a. in a production environment.
    I did this combined with combining css and javascript files. The compressed versions are cached server side, and only regenerated if a requested file has been changed server side. This is a big advantage, because the development version keeps it’s markup and comments, only if requested through the website, a new compressed/minified copy will be made and stored in a cache file.

    For javascript i’m using a php port of JSMin, and for CSS a custom regex script. I’ve looked into CSSTidy (php port also), but couldn’t get it to work properly.. The only output i got was the html’ed output to the browser.

    Is there such thing for compressing png’s?

Commenting is closed for this article.

24 ways: day 6