Image of Rabbit

Minification: Smaller Quicker is Better


The topic of minification tends to come up in the context of reducing bandwidth usage. After all, if the Internet is a series of tubes with a finite size, its important to keep our contribution small and prevent clogs (Tip: keep your site small, or it’ll get stuck in the U-bend). More realistically, any given server setup will have bandwidth limits that need to be respected, lest additional cost be incurred.

Unless you’re serving your files hundreds of thousands of times per day, however, the 10s of kilobytes saved by minification can seem not worth the effort – especially if you’re trying to convince a client why they should pay for any extra time incurred. And as a developer, if you know you’re already serving those files gzipped, it might seem unnecessary even to you.

What you’d both be missing, in this case, is that minification isn’t just about preserving bandwidth (both server and client), although that is a real benefit (even those few 10s of kb can count – consider your clients on highly constrained mobile data plans). There is another major benefit to minification – reducing time to page responsiveness.

Based on some results from Micrososft Research, it appears that user retention by any given page/site corresponds nicely to a negative aging Weibull distribution, as employed in reliability engineering. There’s a more in-depth explanation of the impact of this research, but the short and sweet version is:

You have 10 seconds to make a positive impact on your prospective user. If you haven’t impressed the user in the first 10 seconds, you’ve lost their attention.

Useful features and good design will win the day, of course – if you manage to present them within that critical 10 second window; thus, you don’t want to spend any more time than absolutely necessary waiting for the page to render and become responsive. Minifying your css and scripts can help with that, by reducing the total kb per file, and reducing the overhead (by combining multiple css/js files into one).

Google’s page speed tools and tips can help identify where you can squeeze some extra time from – it will, for instance, suggest you minify all scripts if you haven’t already done so. It doesn’t get into the how, however. Some frameworks come with tools to assist you with this – I know Rails comes with UglifyJS, for instance – but let’s say you have an existing or new project without these tools already available, and that you’re now sufficiently sold on the concept. Here’s a quick (and not too dirty) approach.

  1. Get Google’s Closure Compiler (and Closure Stylesheets as well, if you want to minify css – also allows for using mixins and conditionals, SASS or LESS-style, if desired). Note that both rely on Java, so if that bugs you, you’ll need to look for another option (something Node based, perhaps?)

  2. Place them into an appropriate directory in your project (/build, for instance).

  3. Create an ini file that contains references to each of the files (and the type of file) that needs to be minified and combined into one.
    It will look something like:

  1. Modify the following scripts as needed for your project and dir structure: Note that the shell script is intended for Mac OS – you’ll likely need to make some changes to accomodate your Linux flavour. Also note the closure stylesheets jar has been named closure_css.jar.


@setlocal enableextensions enabledelayedexpansion
IF "%1"=="--help" GOTO Usage
IF "%1"=="/?" GOTO Usage
REM set defaults
set ini=build.ini
set csspath=../static/css/
set jspath=../static/js/
set jsout=../static/js/compiled.js
set cssout=../static/css/compiled.css
set js=
set css=
REM -- Get command line parameters - see usage to determine what each does --
IF "%1"=="" GOTO GetJavaHome
IF "%1"=="-j" set JAVA_HOME=%2
IF "%1"=="-i" set ini=%2
IF "%1"=="--jspath" set jspath=%2
IF "%1"=="--csspath" set csspath=%2
IF "%1"=="--jsout" set jsout=%2
IF "%1"=="--cssout" set cssout=%2
GOTO GetParams
REM -- Determine where Java is --
REM -- IF JAVA_HOME isnt set, ask the user to give us a path --
IF "%JAVA_HOME%" == "" (
    echo Enter path to Java base directory, where the bin directory resides:
    set /p JAVA_HOME=
REM -- We should have JAVA_HOME by now - compile javascript and css based --
REM -- on settings in build.ini --
FOR /F "tokens=1,2 delims==, " %%i IN (%ini%) DO (
    IF "%%i"=="js" set js=!js!--js=%jspath%%%j
    IF "%%i"=="css" set css=!css!%csspath%%%j
echo !js!
echo !css!
"%JAVA_HOME%bin\java" -jar compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS !js! --js_output_file=%jsout%
"%JAVA_HOME%bin\java" -jar compiler_css.jar --allow-unrecognized-functions !css! -o %cssout%
echo --Usage--
echo build -j "path/to/java" -i "path/to/ini" --jspath "path/to/js/files" --csspath "path/to/css/files" --jsout "path/to/js/output.js" --cssout "path/to/css/output.css"
echo --Params--
echo Note: All parameters are optional
echo -j     Specify path to java, where 'bin' directory resides\
echo -i     Specfiy path and filename of ini file (default build.ini)
echo --jspath   Specify path to the js files whose names are defined in the ini file
echo --csspath  As above, for css files
echo --jsout    Specify output path and filename for the compiled js file
echo --cssout   As above, for css


#set defaults
#Get arguments and set vars appropriately
while [ "$1" != "" ]
  if [ "$1" = "--help" ]
     echo --Usage--
     echo build -j "path/to/java" -i "path/to/ini" --jspath "path/to/js/files" --csspath "path/to/css/files" --jsout "path/to/js/output.js" --cssout "path/to/css/output.css"
     echo --Params--
     echo Note: All parameters are optional
     echo -j        Specify path to java, where 'bin' directory resides
     echo -i        Specfiy path and filename of ini file default build.ini
     echo --jspath    Specify path to the js files whose names are defined in the ini file
     echo --csspath    As above, for css files
     echo --jsout    Specify output path and filename for the compiled js file
     echo --cssout    As above, for css
     exit 0
  elif [ "$1" = "-i" ]
  elif [ "$1" = "-j" ]
  elif [ "$1" = "--jspath" ]
  elif [ "$1" = "--csspath" ]
  elif [ "$1" = "--jsout" ]
  elif [ "$1" = "--cssout" ]
#Read in paths from specified ini file
while read LINE
  set $LINE
  if [ "$1" = "js" ]
     js="$js --js=$jspath$2"
  elif [ "$1" = "css" ]
     css="$css $csspath$2"
done < $ini
#Remove leading spaces
js=echo $js|sed 's/^ *//g'
css=echo $css|sed 's/^ *//g'
#Perform compilation
java -jar compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS $js --js_output_file=$jsout
java -jar compiler_css.jar --allow-unrecognized-functions $css -o $cssout
  1. Profit!

+ more

The 5 W’s of Quality Assurance

The 5 W’s of Quality Assurance

Often, QA is thought of as just testing. In fact, it’s that and much more; testing is just one part of the entire process. The QA process covers all of the steps that are necessary to ensure that the product meets the stakeholder expectations and provides a positive...

read more
Accurate Timing

Accurate Timing

In many tasks we need to do something at given intervals of time. The most obvious ways may not give you the best results. Time? Meh. The most basic tasks that don't have what you might call CPU-scale time requirements can be handled with the usual language and...

read more