Oh my god! My blog takes 50 seconds to load...

… on a 56k modem (remember those?). Okay, that might not be a valid benchmark nowadays. But the fact that the homepage of my blog, without any real content, was weighing in at almost 350KB did startle me a little. Why? Because, you know, that’s 50% the size of “Zelda: A link to the Past”, one of my favorite SNES game I spent countless hours playing, or about the size of Commander Keen, one of the first video games I’ve ever played. Compared to these really awesome bytes, the bytes of my homepage should really be ashamed of themselves, so let’s get rid of them. But where do they even come from?

So roughly 2/3 of my blog’s assets are basically.. junk. Not in general, but certainly for my use case. While Bootstrap might be nice, it’s certainly overkill for a small blog. And jQuery? I’m not even using that anywhere. I’d argue that Prettify.js is justifiable, because nobody wants to read non-highlighted source code, right? And those web fonts? We’ll see if they’re worth the additional 80KB.

How did it come to this?

When I created the blog layout, I was being utterly lazy. I snatched up Twitter Bootstrap and jQuery, added some web fonts, mixed in a little CSS of my own, shook it around a little and done was my blog layout. Did I think about how much unnecessary stuff I was adding? Hell no!

Honestly, thinking about this made me a little sad. When developing for a customer, you can’t always strive for perfection. There are deadlines, requirements and so on (you know the deal) and you usually have to stop somewhere and say “This will work, even though it could be better”. But for personal projects, this does not apply, so being sloppy is really not justifiable.

Let’s take out the trash!

So I set out to dramatically reduce the loading size of my blog. First off, I tried to simply removed Bootstrap, jQuery and Modernizr and see how it goes. You know what? It didn’t look that much different, but reduced the size from 350KB to around 100KB. See for yourself:

It’s not identical, but we just reduced page size by about seventy percent, which seems quite acceptable.

This is not what you would encounter on a large web application, of course. If I had used many of the Bootstrap components, it might have actually been worth to keep, because development time is usually costlier than a few dozen extra kilobytes. And as for jQuery: it’s an awesome library, and nobody really wants to deal with all the browser quirks and discrepancies that jQuery handles for you. But if you just have a couple of lines of JavaScript on your blog, chances are you simply don’t need it.

Web Fonts

The remaining large portion of possibly superfluous bytes were the web fonts at around 80KB, “PT Serif” for the body text and “Lato” for headlines, both served by Google Fonts. At first I thought that they’d be worth keeping, because reading an article in a nice font is so much more enjoyable. End then I found out that one of my favorite fonts is available on around 75% of all Windows and Mac system: Baskerville (chances are you’re seeing it right now). So I used CSS Font Stack to get a recommendation on fall-back fonts for Baskerville and was satisfied by how they look. I followed the same procedure for Lato, and thus was able to replace both web fonts.

Some more tweaking

I mentioned that I wanted to keep Prettify.js for syntax highlighting. But why load it if it isn’t used? So I made it optional per blog post. Oh, and pngquant helped me reduce the size of my picture by 50%, removing another 3KB.

The Status Quo

In summary, I managed to reduce the loading size of my blog’s homepage from initially 350KB to almost 10KB without (visually) sacrificing anything but the web fonts, and I’m fairly satisfied by the result. Let’s take a look:

Before After

So what can we take away from this? It should once again remind us that there is no “one size fits all” solution. Every technology, framework and library has its place, but I’d argue that the following approach is the road to a heap of technical debt and maintenance misery:

In my last project I used Bootstrap, jQuery and [20 other cool things], so let’s add those and see what we can do with them.

Instead, ask yourself what you are trying to achieve and pick whatever fits the problem you’re trying to solve.

Feedback is always welcome and I try to incorporate it into the post where possible. For reasons of Datensparsamkeit I do not provide a commenting solution here, however. You can reach me via email (see home page) or Twitter.