Still from the movie Star Wars showing the heroes inside the Death Star trash compactor.

On the internet, every last byte counts. Web developers tend to spoil themselves with high bandwidth connections, obscuring but never negating a central fact: the less information you send, the faster a page will appear.

After image optimization there are just a few possibilities for reducing the size of files and speeding up your website. Shaving a few kilobytes from each page, HTML, CSS and JavaScript “minification” is typically run through at the very end of site development, after final quality assurance.

A Language Supremely Tolerant Of Compaction

There are a few development practices you can employ that will help achieve the best final minified result, steps that even HTML optimization tools won’t take: an HTML5 document can take a surprising amount of shortcuts. In practice, the smallest valid HTML document would be: 

<!doctype html>
<html lang=en>
	<title>Title</title>
	<meta charset=utf-8>
	<p>Content

One potential downside to employing these shortcuts is that some IDEs, such as , won’t apply correct syntax highlighting to minified code. Some developers also find that these shortcuts reduce readability, although I find that it’s mostly a case of retraining your eye.

Once your code is complete, it can be made even smaller. At the very least, carriage returns can be removed, together with comments, extra spaces, and redundant closing tags: 

<!doctype html><html lang=en><title>Title</title><meta charset=utf-8><p>Content

(More information on making minification techniques part of your HTML5 development workflow). Screenshot of HTMLCompressor

However, doing this by hand is a waste of time: it’s much more efficient to use a scriptable drag-and-drop app, such as Smaller, or free online tools such as TextFixer and HTMLCompressor.

The Black Hole Of Minification

One issue with this kind of optimization is that once you throw code into a compressor, it stays that way: there’s no way of extracting readable text from a compressed file, other than using a “prettifier” utility such as Online Code Beautifier or HTML Tidy. For that reason, it’s wise to keep a fully formatted “source” HTML document on hand to make any changes that may be needed in the future. Codekit and other tools are getting close to establishing source maps for HTML (as they already do for CSS, Sass and JavaScript), which will likely automate the compression process in the near future; some CDN’s are doing this already.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.