… 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.
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.
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.
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.
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.
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:
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.