Site Redesign: Every Kilobyte Counts
Updated: Sep 25, 2022
There’s a movement (dare I call it that?) to create websites with less bloat. Some participants even set fun goals, like every page must be less than 1 megabyte.
The idea seemed fun. So, I set out to redesign the site as lightweight as possible, while keeping a few niceties. (p.s. I’m constantly tweaking things, so by the time you read this, the design has probably changed again. I’ll stick to how things are at the time of this writing).
For the style foundation, I went with Bootstrap Reboot. My favorite part of Reboot is the native font stack. I no longer need to download external fonts, yay. The major fonts of each operating system are targeted, so it looks good (although slightly different on each operating system) and is fast. A few extra classes are sprinkled in for custom page layout and typography. The resulting CSS file is about 9 kilobytes.
The blog list page is special. It requires an extra script that enables searching by title. It’s about 2 kilobytes. A JSON index is also required and it’s currently 29 kilobytes. At 184 posts, that comes to about 0.16 kilobyte per post entry in the JSON index. If I ever get to 1,000 posts one day, that’s about 160 kilobytes for the JSON index, which I may tolerate, or I may find a different “search” approach at the point 1 2.
You may be wondering, why bother writing your own search? Well, it’s mostly for mobile usage. I can
F in a desktop browser, but I still need a way to search on mobile. Plus, my search matches on multiple substrings, which is useful when you only know a few keywords of the thing you’re looking for.
The HTML size will obviously differ per page. But let’s pick one of the most text-heavy pages, which weighs in at 70 kilobytes.
I’ve indeed found a different search approach. Who knows, it’ll probably change again. But as of Jan 18, 2022, I no longer generate a JSON index. Instead, I use a sprinkle of JS to mutate the DOM on the blog list page. Works swell. Each keyup event takes 1-3 milliseconds to complete in Mac Desktop Chrome, resulting in feedback that feels instant. ↩︎