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.
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?)
Place them into an appropriate directory in your project (/build, for instance).
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:
css=common.css css=more.css js=first.js js=seconds.js js=third.js
- 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.
#!/bin/sh #set defaults ini=build.ini csspath=../static/css/ jspath=../static/js/ jsout=../static/js/compiled.js cssout=../static/css/compiled.css js= css= #Get arguments and set vars appropriately while [ "$1" != "" ] do if [ "$1" = "--help" ] then 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" ] then ini=$2 elif [ "$1" = "-j" ] then java_home=$2 elif [ "$1" = "--jspath" ] then jspath=$2 elif [ "$1" = "--csspath" ] then csspath=$2 elif [ "$1" = "--jsout" ] then jsout=$2 elif [ "$1" = "--cssout" ] then cssout=$2 fi shift shift done #Read in paths from specified ini file OIFS=$IFS IFS="=" while read LINE do set $LINE if [ "$1" = "js" ] then js="$js --js=$jspath$2" elif [ "$1" = "css" ] then css="$css $csspath$2" fi done < $ini IFS=$OIFS #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