Recently I’ve stumbled upon this blog post by Dylan Araps from the KISS distro. Although I already tried to make my website as lightweight as possible, he has outdone me tenfold and managed to get an average page (without screenshots) down to 3KB in size, compared to my previous ~39KB. It inspired me to copy his strategy and get my page even lighter. For exact details on how to do this, I advise you to read his blog post, it’s a good read.

First up, stop using an self-written dynamic site

I originally made this site to experiment with Rust. I did learn a lot from it, but using such a self-written program is really way too much for a static site like this. Lots of people already use tools to generate a website from static content which you just run every time you add a new blog post or update anything. We do this for example with the postmarketOS website.

So, using the script from Dylan Araps as a guide, I converted my site to static HTML generated from Markdown files using the pandoc tool. Generating the site is now as easy as running ./make in the root of the project, and in a few seconds the whole site is generated automatically.

Decreasing the amount of HTTP requests for every page to 1

What I found interesting from Dylan Araps’s approach is that he made every webpage use only a single HTTP request. To do this he made everything inlined, basically making every page entirely self-contained. This doesn’t necessarily make the page lighter, but it makes it quicker (even if only marginally) as after the single request the browser is done loading instead of having to load additional resources such as Javascript, CSS and images. Normally this would mean however that you’d need to edit the CSS for every HTML file seperately, but with the magic of scripts you can just insert the same CSS file into every page.

What I never realized is that you can even use inline images. To do this he encoded the image in base64, which the browser can directly read from the HTML and turn back into an image. Combined with turning icons into GIFs to make the file way smaller, this is actually a usable approach to decrease the amount of requests.

This, and minifying the CSS and HTML, already has decreased the average page size from ~39KB to about 23KB and it’s now all loaded in a single HTTP request.

Next step, decreasing the amount of CSS used

For now I still load in the Skeleton CSS framework (although with the build script I combine it all into a single CSS file which I then embed into the HTML) as it makes a responsive site way easier, but then again it isn’t really needed and a simple layout like this can be done with way fewer CSS. My goal is to get rid of it completely without altering the look of the pages too much. It should shave of another 18.8KB which would make the total page ~4KB.

Automating it more

A downside of this script approach rather than a dynamic program like before, is that for now I have to manually update the blog index page and the RSS feed. It isn’t much work, but it is more work than before and it’s error prone. This should be possible to automate however, so I’ll do that in the future. I might rewrite the script into Python (it is POSIX shell for now) at this point as it should make stuff like this way easier.