Open Thinkering

Menu

Stick or twist? (dougbelshaw.com)

As I mentioned in a recent weeknote, after successfully submitting my side projects to 512kb.club, I stumbled across 1024b.club. In plain English: there’s a couple of websites that list other websites that are less than a certain size. They’re trying to bring attention to the ‘bloat’ of the modern web.

The requirements of 1024b.club are quite… stringent, shall we say. 1024 bytes is a single kilobyte. For those reading this who may be ‘less technical’, do you remember 3.5″ floppy disks? They stored 1.44 megabytes of information, which means (if my maths is correct) you could fit 1474 of these tiny websites on one of those disks. Wowzers.


Never one to shrink from a challenge, and given that it’s been a while since I created my profile page at dougbelshaw.com, I decided to have a go. This is the result:

Page saying:
Dr. Doug Belshaw
Open Strategist
👋 About
✍️ Blog | Newsletter
💬 Mastodon | Twitter
🤝 LinkedIn

The great thing about emoji is that they’re Unicode, so don’t take up any more space than text. As a result, the page in the screenshot above, is a mere 624 bytes, so well underneath the 1KB limit. It’s the smallest website I’ve ever created. According to GTmetrix, it loads in 177 milliseconds!

By way of comparison, and I’ve had to create a gif here to show you what I mean, here’s the current version:

Page saying 'Dr. Doug Belshaw' and then text that changes between things like 'Tech sherpa' and 'Keynote speaker'. There are links to pages and social media icons.

A GTmetrix scan of this version shows that it takes 2.1 seconds to load, which is almost 12 times slower than the minimalist version. This difference is important not only for user experience, but being a responsible technologist and minimising the resources used by the sites that I put online.


I had a mixed response when showing the new version of my site (which is still on GitHub!) to various people. Some really liked it, especially those who block JavaScript (JS) and like minimalism. Others really didn’t, and much preferred my current version — especially the JS that rotates the various titles/roles under my name.

So I created a poll, and replicated it across Mastodon, Twitter, and LinkedIn. The results were fairly conclusive, as you can see for yourself:

LinkedIn

Poll showing 76% of respondents voting for 'STICK: keep what I've got'

19% - 'TWIST: change to minimal'
5% - 'Don't care / show results'

As you’d expect from a professional network, people like things to look shiny and polished, and aren’t too bothered about the page size implications.

Mastodon

Poll showing 48% of respondents voting for 'TWIST: change to the  minimal version'

32% - ''STICK: keep the one I've got'"
19% - 'Don't care / show results'

Conversely on Mastodon (or more precisely, the Fediverse) people were more split. I was actually expecting more people to vote TWIST, especially as 512kb.club is run by one of the moderators of the instance I’m on (fosstodon.org).

As one of the 48% of people who voted against Brexit, I don’t see that number as a reason to make sweeping changes…

Twitter

Poll showing 72.4% of respondents voting for 'STICK: keep what I've got'

10.3% - 'TWIST: change to minimal'
17.2% - 'Don't care / show results'

Again, not surprised by the result here: a ringing endorsement of my current profile page. Which is always good to know.

Next steps…

I’m thinking of incorporating the best parts of both approaches in a new version at some point in the future. So that would mean:

  • Drastically reducing the filesize of the web pages
  • Serving it from GitHub (to make it easier to edit)
  • Using emoji instead of icons wherever possible
  • Keeping the animated JS strapline
  • Ensuring it loads and renders properly for those who block JS

While I’m there, I should probably have a go at reducing the size of Thought Shrapnel (GTmetrix). Although it’s running WordPress, most visitors will hit the static front page which encourages them to sign up for my monthly newsletter.

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php