Size matters

Posted on March 14, 2008 by Nev

At least it does for web pages.

“Try holding your breath for as long as it takes your home page to load. If you are now dead, it took too long.”
- Art and the Zen of web sites

A decade ago, in the age of dial-up connections, page weight was everything. Images were compressed to within an inch of their lives and Netscape (R.I.P.) even had a special attribute for a lower resolution image to use as a placeholder while the proper image loaded. Then along came broadband and web developers got lazy.

Now as mobile connections are more prevalent, size is once again an issue thanks to the EDGE technology of the current iPhone. Web 2.0 interaction and design tend to rely on extensive use of style sheets and client side scripting which can easily run to a couple of hundred kilobytes. Servers can automagically compress these text files (HTML documents, CSS and JavaScript) using mod_deflate or mod_gzip for Apache for example. As part of their tips to improve web page performance Yahoo offer a compressor to minify and squeeze file sizes down even more. Taking the hefty Prototype JavaScript framework as an example we can see the effects of these compression techniques:

  • Prototype: 126KB
  • gzipped version: 28KB
  • Minified: 71KB
  • Minified and gzipped: 21KB

Minifying before this compression gives us a saving of just under 7KB. This may not sound like a lot but multiply this up and it results in a bandwidth saving of a gigabyte per day if the file is served at a rate of a little under 2 requests per second, which is not unrealistic for a popular site. Also remember that this is just for one file. Automating this extra minification step is easy enough if you’re developing on OS X or a flavour of UNIX. You can also add some functionality to your webserver if you want to really show off but I’ve come up with a way to reduce the steps needed to a single click with Windows XP:

  1. Download the Yahoo compressor and unzip it. It’s Java, so you’ll need to make sure that you’ve got the runtime somewhere on your path. I placed mine in the C:Program Files directory but if you decide that you want to put it elsewhere you’ll need to edit the batch file (see next step).
  2. Download my batch file and save it to a directory that is on your path. C:Windows for example. You’ll need to edit this file to reflect the location of the Yahoo compressor or if you upgrade to a newer version at sometime in the future.
  3. Download and run my registry keys to install right click handlers to your context menu.
  4. Right click on a .css or a .js file and choose “YUI Compress”. A minified version will appear right alongside the original file with the extension .min.css or .min.js depending on the original file.

Once your code is minified it is quite hard to read. If you don’t have access to the original formatted source JavaScript code available, try this beautifier to make things look pretty again.

Related Posts:

This entry was posted in Web development and tagged , , . Bookmark the permalink.
  • Satyam

    A few improvements (from my POV) that I made.

    a) The YUI Loader assumes minified files to have a -min, not a .min extension.

    b) Your replace string for outfile makes a mess if the file has more than one dot in its name. This might not be the case with libraries if you give them the same name as the namespace they are in, or if you include version numbers in the file name. Each dot, wherever it is, is replaced by .min.

    c) You might not want to put your batch file in the Windows directory, I prefer to place it along the YUI Compressor itself.

    So, my files where changed to:

    Windows Registry Editor Version 5.00

    [HKEY_CLASSES_ROOTCSSfileShellyui]
    @=”YUI Compress”

    [HKEY_CLASSES_ROOTCSSfileShellyuicommand]
    @=”"C:\web\YUI-Compressor\yuicomp” “%1″”

    [HKEY_CLASSES_ROOTJSFileShellyui]
    @=”YUI Compress”

    [HKEY_CLASSES_ROOTJSFileShellyuicommand]
    @=”"C:\web\YUI-Compressor\yuicomp” “%1″”

    Notice the full location of the file is given, avoiding to use Windows or any other in the search path.

    @echo off
    setlocal
    set infile=%1
    set outfile=%~n1-min%~x1
    set logfile=%~n1.log

    java -jar “C:webYUI-Compressoryuicompressor-2.3.5.jar” -v %infile% -o %outfile% 2> %logfile%
    endlocal

    Notice how the outfile and logfile are created based on Windows own modifiers for filenames. The location of the compressor is the same as for the batch file itself and both have to be changed if located elsewhere. Also, I added the creation of a log file which stores the verbose (-v option) of the compressor since it can provide some useful hint. You might omit it dropping the -v and the part from the 2> to the end.

  • http://nevstokes.com Nev

    Thanks for that.

    I’m relatively unexperienced in the ways of YUI so was unaware of the Loader filename extension assumptions.

    I was making my own assumption with Windows filenames containing multiple .’s!