In the last few weeks i got into the topic of sustainable web design again. I’m definitely not an expert in either design or web hosting, i just want to write about my thoughts here a bit. My personal experience on this topic is building this blog, my CV-like website and a few Wikis i wrote for university. This content is hosted on a vServer from a “local” hosting service alongside a few smaller programs i need, like Mumble and Irc. In this post i want to talk about the design choices i made for this content on http and gemini, while also exploring the environmental cost of content creation and hosting.
Efficient web design can be reduced to one main thing: space reduction. The less data there is to transfer, the better for the environment. However there are a lot of considerations and trade-offs to make to achieve this. Common suggestions include picture compression, stopping autoplay and fitting the resolution of media to the size on the webpage. The carbon footprint can then be estimated and compared on various webpages like websitecarbon.com.
Unsurprisingly my content fairs quite well in this test with an A+ rating.
I don’t use pictures in my blog and use a pixel art portrait for my CV.
Code and terminal output is displayed using the html <pre> tag and a custom CSS class for the visualization.
My unfinished Wiki on C programming is under 260 kiB in size with about 40 A4 pages of content.
The entries in this blog are <15 kiB in size.
The workflow for my blog is described in a previous blog entry if you’re interested.
How to overcomplicate writing a blog
Both are compiled using markdown documents for the content, with a custom crafted html header and footer and a custom CSS style sheet. The result is just a bit of text without any unnecessary font loading, scripts, ads and cookies. If you’re interested, my blog, wikis and the parsers and hosted on my sourcehut page.
My blog C programming Wiki Wiki parser Blog parser
The goal here is to extend the lifetime of digital devices as long as possible. I’m pretty sure you’re using some browser on some digital device to read this blog. Statistically you’re most likely using a Chromium based browser. If you can’t afford new tech however, you’re using an outdated version or stuff like netsurf/dillo.
Dillo browser homepage Netsurf browser homepage
The only (secure) way to access the internet with these browsers is to disable javascript.
Ensuring that your page works with older browsers can therefore help reducing e-waste by keeping old tech usable on the one hand and avoid building a two-class internet, where not everyone has access to all information, on the other hand.
I test all my pages on Firefox, Netsurf and Dillo to achieve this.
I use some modern features, like a static sidebar in my wiki, that don’t work on Netsurf and Dillo however.
The goal is that the site is still comfortably usable should the feature not be supported.
Sometimes there are trade-offs between compatibility and efficiency.
All my pages respect your system settings regarding dark mode if your browser supports the corresponding CSS call.
Older browsers don’t support this however and need an additional page which uses a dark theme CSS.
My Wikis work around this by duplicating every page index.html → index_dark.html with a button to switch between the two versions.
For my homepage and blog i only support dark mode using CSS calls, since less time is usually spent here.
I’ll use this section for the resources needed to compile content and the software used to provide it over the internet. Before i wrote my own parser, i hosted a Wordpress instance, used hugo with apache2 and saait with quark.
Hugo static site generator Saait static site generator Quark webserver
Right now i’m using apache2 as my web server again.
Unsurprisingly i don’t like Wordpress.
Even for small static pages, the software uses a lot of resources on top of the web server.
The themes and add-ons it provides are usually not built for older browsers.
I get that the interface makes building your page accessible without coding, but i suggest you look elsewhere instead.
Featherwiki is a great tool, if you want to build wikis without any code and it’s pretty compatible if you check the generate static html button.
Hugo is a great project. It provides a somewhat easy way to build your own static webpage without knowing too much about HTML/CSS. However the more popular themes often use a lot of javascript, making the pages unusable on older browsers. But with the right settings it can create wonderful pages, wikis and blogs.
To me learning a bit of HTML/CSS is time well spent to understand the web better. This is where stuff like Saait and my parsers are useful. It is possible to build, reuse and distribute themes using headers/footers and CSS style sheets, but it is less powerful than hugo. The resources needed to build your blogs/wikis is very low as a result. Simply parsing markdown and concatenating files is not a very resource intensive task. Building this blog with html and gemini output takes >30ms on a ten year old laptop. The parser also works on every OS with a C standard library.
After building our content, we need to host it. Apache2 is the standard web server and can be pretty hungry. For a web server this means about 40 MiB RAM usage and >10% CPU load during a stress test with ~1000 page load request per minute on a vServer with one virtual core. There are faster and lighter server out there, but for me this is fine.
If you just want to host your static website, there are easier and more efficient methods out there. Since server hardware is not optimized for minimal power draw, it is most efficient when under load. There are a lot of hosting providers for static pages out there - take a look at Sourcehut and GitLab for example. I do suggest to pay for your hosting if you can afford it. In any case try to find a server that is at least on the same continent as you. Traveling is resource intensive even for data.
There are a lot of hidden costs in hosting content on the internet. I do need to add a bit of context here though. Making your webpages as efficient as possible is great and can be a lot of fun. Keep in mind: the absolute majority of resources in this sector are used somewhere else. We talked about text-only pages with optimized pictures - while unimaginable amount of resources are used to host YouTube/Instagram and train large-language models for the public. You don’t even want to think about crypto currencies. This can be a fun project and a small contribution to your community, but remember to also organize politically if you want a sustainable future.
This site uses the wonderful Catppuccin color scheme.