Most designers realise the importance of keeping image filesizes 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.
For CSS there is http://www.cleancss.com/ who offer a great online tool that can help optimise your style sheets. This not only compacts 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. In tests I've done I've achieved nearly a 50% reduction in file-size whilst still leaving the CSS human readable.
Another good CSS compressor is available at http://www.lotterypost.com/css-compress.aspx This can create very compact scripts, but at the expense of readability. But if the only thing reading your CSS is a web browser, then readability is of little concern.
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 un-needed 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!
Whilst there are a lot of good minifcation software available one of the best is offered by the ubiqitous 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."
So there we have it - two great, free online tools that can simply and effectively compact your web assets to ensure your site loads as fast as possible.
