Minimalist Markup

Jun 01, 2012

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):

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

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 .