A 100kB Promise

This gives me joy!

3 requests | 18.73 kB / 7.32 kB transferred | Finish: 670 ms

If NASA landed on the moon using just 4kB of RAM, then what business does a text-based website have of loading multiple MBs of data. I’m sure there is much more nuance to the NASA argument but it sure does put things into perspective.

This grievance also stems from a personal experience.

I read articles and blog posts quite regularly and at any point I have 20, if not more, articles on my reading list. A few years ago, I was embarking on a relatively long train journey and while waiting for the train to arrive, to pass the time, I fired up Safari and opened a technical blog post from my reading list. I couldn’t have been more than a few lines into it when the train arrived and I boarded it without a moment’s thought.

After some time had passed and I had made myself comfortable, I remembered the half-read article. I launched my browser back up again and to my dismay the article didn’t load. The top right corner of my phone showed a lonely, solid bar where there should have been 4. I chalked it up to the poor network reception. But to my surprise, moments later I received a WhatsApp notification. I replied to it and the text went through, although later than usual. I ended up having a meaningful conversation in the following 5-10 mins. But the website still wouldn’t load, which now got me curious.

After the journey was over and I was seated in a high-speed wifi zone, I tried loading the website again with my devtools open and lo and behold it was making upwards of 20 network calls and loading up multiple MBs of seemingly useless data, including of course tracking scripts and what not, just to display a simple text article. After this incident, I started to observe this pattern more and more over time.

So, with my personal website I want to walk the talk and keep the website functional under 100kB.

To this end, I had to make some compromises but I’m happy with the final outcome.

• The website does not load custom fonts unless explicitly opted-in by the user. This has, by far, made the most significant difference.
• I disabled Cloudflare’s built-in analytics. I also ripped out a tiny, self-hosted analytics tracker I built with Counterscale. I might also make this opt-in some time in the future.
• Tiny optimisations everywhere to keep the payload size in check

So far working under this constraint has been quite fun and a learning experience, as is often the case.

I do hope to continue this for as long as possible.