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.
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
06/12/2007
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!
Vote Helpful or Unhelpful
06/12/2007
+1 for YUI Compressor. It’s been proven to be very safe with variables in Javascript.
Vote Helpful or Unhelpful
06/12/2007
To optmize PNG images, I use PNGGauntlet. It’s a very nice GUI for the PNGout utility and it’s freeware.
Vote Helpful or Unhelpful
08/12/2007
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.
Vote Helpful or Unhelpful
10/12/2007
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).
Vote Helpful or Unhelpful
17/12/2007
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.
Vote Helpful or Unhelpful
20/12/2007
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?
Vote Helpful or Unhelpful
18/06/2009
I definitely second the suggestion for YUI Compressor. Great information at this blog.
Vote Helpful or Unhelpful
Impress us