Avris

I strive to optimise this blog's performance as well as I can. But chasing a goal of a lightweight website while keeping it pretty prevented me from realising the obvious truth that the most performant assets are… no assets.

So, inspired by Sijmen J. Mulder's directory of text-only websites, I decided to create a bare version of my blog.

Here's how it went:

Many pages of this blog are already available in multiple formats, eg. the Atom feed of all entries or a JSON version of the list of my projects, so adding a new one, .lite, was relatively easy.

The main part was copy-pasting all <page-type>.html.twig files to <page-type>.lite.twig and removing all the bullshit from them. All the HTML nodes that exist solely to make the page look nicer: wrappers, containers, columns, etc. All the icons, fonts, logos, twemoji, everything that's not essential.

There's no JavaScript loaded whatsoever.

There's no external stylesheets loaded, just some minimal styling in <style> tag and few inline style attributes.

Images inside articles had to stay, becuase in many cases they are a very important part of the content, and not just decoration. But I made them way smaller – max 240px in width – and linked to open a bigger version, if necessary. I also replaced the JS-based lazy loading with HTML5 native loading="lazy".

However, the browser support for this feature is still not perfect – and if it doesn't work on someone's machine, they'll have to download 8 MB (!) of tiny images when visiting /blog.lite… So I implemented a simple pagination, all inside a Twig template, based on ?after=<timestamp> parameter in the query string.

Anyways… It's time for the results!

Normally, opening the the homepage makes 40 requests and loads 522 kB of resources. In the lite version, it's 2 requests (HTML and favicon) that weight just 15.8 kB. Just 3% of the original weight!

The heaviest page, /blog makes 37 requests of 3.5 MB. In the lite version, it's 10 requests of 198 kB. Just 6% of the original weight.

Opening a random article made 34 requests of 493 kB normally, and just 3 requests of 31.2 kB in the lite version. Also just 6% of the original weight.

The differences are huuuuuuuge!

Summing up: if you don't mind websites looking ascetic in return for loading quicker, working smoother, and sparing data plan and battery, definitely check out Sijmen's directory.

And on my blog you can just head to /lite or add .lite at the end of any subpage.