Home
Projects
Hosting
Advertising
About
Archive
Contact
Forums
SubscribeAfter a week’s work of designing and coding a website you may find yourself with unorganized, cluttered, and quite possibly, invalidated code. For perfectionists, you may find yourself spending extra hours organizing your css alphabetically by element or pouring through code, line after line. If you fit either of these descriptions, you’ll be pleased to know there is a solution: online and desktop code optimization tools.
Even if you find yourself writing perfectly valid and organized code, you may want to take a look at some of these. You will at least be able to compare outputted code with your own, or at least you’ll be able compress the size of your code to use less bandwidth on your server. Either way, these tools can be extremely valuable.
HTML Optimization Tools
Desktop: Firebug (Firefox plugin)
Firebug is a tool I use on an almost daily basis. Firebug makes it extremely easy to find bugs and errors in your code and also allows you to make changes and see how it looks without actually updating the page. Highly recommended!
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Link
Desktop: HTML Tidy
HTML Tidy is a desktop HTML code optimizer/validation tool that runs on pretty much any OS depending on the version you get. There are several different languages in which HTML Tidy has been coded in (all using the TidyLib), ranging from C/C++, .NET, Java, Perl, and Python. The tool actually has a pretty long history, dating back at least 7 years. Link
Desktop: Total Validator 5.4.0 (Firefox plugin)
Provides true HTML validation (HTML 2.0 to XHTML 1.1) using the official DTDs, plus added attribute checking. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly (they don’t use the official DTDs).
Also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (5 languages), and takes screenshots using 32 browsers on Windows, Linux, and OS/X. Link
Web: Tidy Online
Tidy Online is a Web-enabled version of Tidy, a utility originally by Dave Raggett and now developed at SourceForge, to clean up and fix errors in HTML pages. This offers you the opportunity to upload your HTML, and will print out a tidied version. Link
Web: W3C Markup Validation Tool
This is a pretty much a given. But for anyone who doesn’t know about it, you can validate your code using this link. This is a standard tool almost every web designer uses to make sure they’ve got their code done right.
CSS Optimization Tools
Desktop: CSSTidy
CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality). In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability. Link
Desktop: CSS Optimizer
CSS Optimizer is a command line application that optimizes CSS code. It reduces the filesize significantly, 20-60% depending on your coding style, by stripping unneeded characters such as whitespace, tabs, newlines, and semi-colons. CSS Optimizer only eliminates characters that are not vital to proper display of the CSS file. CSS Optimizer also converts long-hand CSS declarations to short hand equivalents to eliminate even more unneeded characters. CSS Optimizer has been tested to work under many browsers such as Firefox, Mozilla, Safari, and IE; currently I have not found a browser that it does not work successfully on. Link
Web: Clean CSS
But after I posted about it on my blog, I noticed that a week later, the site no longer existed. I was bummed because I was trying to show my fellow designers at work this amazing utility. So I took the liberty and installed CSS Tidy on my own webserver and registered cleancss.com. I also styled it up to my liking (see the grass green colors?). So now I can make sure this kick-ass CSS utility stays up forever. And gets used by web designers everywhere. Link
Alternative(s): CSS Portal Optimizer, Code Beautifier
Web: CSS Compressor
Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The “Normal” mode should work well in most cases, creating a good balance between the two. Link
Web: Online CSS Optimizer
Online CSS Optimizer/Optimiser is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error. Link
Web: CSS Redundancy Checker
This tool is useful for finding CSS selectors that aren’t being used by any HTML files or that may be redundant. Link
Web: CSS Validation Service
This is another given, but I had to include it to be more thorough. Just input your website URL or location to your CSS file here and away you go =)
JavaScript Optimization Tools
Web: Online JavaScript Optimizer
Optimizing JavaScript code is very useful. You can expect size reduction of 20-50% depending on your coding style and the use of tool’s extensions. On one hand it will make your pages load faster and, on the other hand, it will cause your pages to work much faster, once they’re loaded. The reason for this is that the browsers must interpret JavaScript code so its size is very important. Another advantage (especially when using the name-shortening feature) is that your JavaScript code will be less readable making it very difficult to steal it. Link
Web: Compress JavaScript
CompressJavaScript.com works like a compressor by taking your JavaScript source code and compressing it by removing comments, whitespace, line feeds, and optionally by shortening function parameters and variable names. Compressing JavaScript will reduce the script size, and may help your pages load faster and reduce bandwidth consumption. Moreover, with line feed removal and variable name compression, it provides obfuscation of the code, making it harder for the user to read the code. However, it won’t stop a determined user from reformatting and reverse engineering the code. Link
Alternative(s): JavaScriptCompressor.com
Web: JavaScript Tidy
If you have to debug scripts where the author has decided to compact everything onto one line, with all whitespace removed, this script can put the whitespace and control characters back, to make the script readable again. It can tidy most JavaScript to put in the correct indents, linebreaks, and semi-colons. Link
Please let me know if I’ve missed anything. I’ll be sure to add it to the list =)
Kind of stupid to have HTML Tidy on the list, than have something that says right in the description “HTML Tidy sucks.” right under it.
Reply
Well it is the opinion of the FF plugin writer. It is still very useful for people who don’t use Firefox and want a desktop alternative. At the very least, it cleans up the code to make it a lot more readable which is great for finding unclosed tags and what not. I included it in the list also to provide several options.
Reply