Keeping Things Compact Blog post

Kittens in a Box

Most designers realise the importance of keeping image file sizes low in order to improve the speed a website loads and use appropriate tools to achieve this. But what about other assets, such as style-sheets and JavaScript files that also get included? Are there tools that can help reduce the size of these files, too?

Luckily, such tools exist and are freely accessible on the web. No need to download software, you can access them via any browser.

CSS Compactors

For CSS there is http://www.csstidyonline.com/ which is an implementation of the CSSTidy library on SourceForge. Smiliar to this is also http://csscompressor.com/ and http://www.codebeautifier.com/ These not only compact the CSS (by removing redundant whitespace and comments) but it also intelligently consolidates and re-arranges styles to make them more concise. This leads to more efficient and cleaner code.

If all you want to do is minify / compress your code for production then you can try http://cssminifier.com/ or http://www.cleancss.com/css-minify/. These optimise your CSS at the expense of being easily human readable. But if the only thing reading your CSS is a web browser, then readability is of little concern.

JavaScript Minifiers

As for JavaScript, there are many techniques known as "minification" available to help compress the size of your scripts. Minification not only strips out redundant whitespace but also will re-write your code to make it as concise as possible (by reducing variable names, removing unneeded brackets etc.). The downside is you won't be able to read it, so only use this on finished code and always keep a copy of the original!

Google Closure Compiler

Whilst there are a lot of good minification software available one of the best is offered by the ubiquitous Google, under the rather obtuse name of Google Closure Compiler. This is available as a Java application but is also accessible via a RESTful API and, more importantly for us, online at http://closure-compiler.appspot.com/ 

To quote Google it,

"It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls."

UglifyJS and Others

Another very popular minifier library is UglifyJS which is also available online at http://marijnhaverbeke.nl/uglifyjs

But there are other minifiers available online, too, such as:

Visual Studio Extension

If you use Visual Studio there is also the excellent (and free!) Web Essentials extension. Amongst it's many features are the built in option to be able to right click any CSS or JavaScript file and minify it on the spot. Even better, whenever the source file is changed, the minified file is updated accordingly.

Sublime Text Plugins

If you use Sublime, then there are also many minifiers available, such as:

So there we have it - some great, free online tools that can simply and effectively compact your web assets to ensure your site loads as fast as possible.


Just fill in the form and click Submit. But note all comments are moderated, so spare the viagra spam!

Tip: You can use Markdown syntax within comments.