Minimalist Markup

Yesterday I asked for help getting the size of my blog's homepage down. With a handful of people, we got the size down from ~19KB to under 15KB.

Some people thought this was a wasteful exercise. I assure you, it was not. This is how you learn, by doing and trying. How do you know what is and isn't possible if you assume your knowledge is complete? I'm not worried about my blog's page load speed. I'm not worried about the bandwidth. It's hosted by Github. But why not see what's possible and learn stuff on the way?

Also, it was pretty fascinating seeing how everyone had their own thing they wanted to tackle. Some people focused on the CSS, some on the formatting, some on what was generated by the template. Some were willing to go further than I was, some weren't.

What We Didn't Change

There were things I wasn't willing to do. I didn't want to add paging. This would have had the most impact. As-is, the page will just keep getting bigger and bigger, though I bet internet and computer speeds will always gain at a faster rate. I also didn't want to break any existing URLs. If I had, i could have removed the date portion from all the links.

I didn't want to use URL shortener for my few external links, especially for my audience. Geeks recognize URL shortening service and think twice before clicking because of their opaqueness. Plus, it's just something else that can go wrong.

Finally, given that the bulk is repetitive, at some point, adding JavaScript to generate some of the DOM will result in a smaller file. You'd have to do it without a library (or wait until you have that much more content and the library size is smaller). But, I don't want that either. JavaScript for an listing of links? Please.

What We Did Change

We'll split the list of changes into two. First, things that are likely applicable to any site (not saying they should be applied, just that they probably can):

• The protocol was removed from all external links. Instead of http://twitter.com/karlseguin, use //twitter.com/karlseguin
• Quotes were removed from all attributes that didn't need them, which ended up being all attributes
• Optional closing tags were removed. Initially this was the closing html, body and every closing li tag
• Optional opening tags were removed. This includes the html, head and body tag
• Indentation and formatting were reduced to a bare minimum, while keeping the source readable
• Used shorthand css colors #047 instead of #004477
• Omit the CSS unit when the value is 0
• Instead of specifying top right bottom left CSS values, use a shorthand (X, X Y, or X Y Z)

Next is a list of things I was able to do specific to my site/content:

• FeedBurner's long link, which appears twice, was replaced with a redirect rss.openmymind.net which 302s
• Since I have a minimum amount of markup, my CSS targets tags. Instead of doing <div id="header"> with a css rule that targets #header, I can make use of only a single <div> and target it directly
• Why use a div when you can use a p?
• The leading / was removed from all posts, as they are all relative to the root anyways
• Although I didn't want to break existing URLs, posts starting from this one won't include the date
• The year was removed from the displayed date
• Leading 0 removed from the day of the month when less than 10

You can see the pre-rendered source on github. And of course, you can see the finalized source by going back to the homepage and viewing source.

I was surprised to find out that the closing tags were optional on so many elements. I was even more surprised to find out that opening tags were optional! But then, it makes sense. Neither the html, head or body tag provide any context for their child elements. What a browser needs to do with a title or meta tag is obvious even without a head tag. Similarly, what you do with a div or h1 is obivous even without a body tag.

Note that the homepage is valid. If that bothers you, re-read the specs. This isn't XHTML.

Finally, a message to all of you with blogs whose homepage is measured in megabytes and load times in seconds. Stop it. Seriously.

If you found this post interesting, then the HN discussion about the similar steps Google used to take might also interest you .