My introduction to webdesign was through activism. I suddenly found myself managing the website of a local Fridays For Future group with many1 page views. Through a solar punk from the group, I got into low tech and strategies to minimise climate impact of online presences. Some thoughts on this as a creative professional.
Stages
Back in 2020 when I started my personal website, it was just Jekyll with the bare minimum of css ripped from the final motherfucking website in the horizon color scheme. It was as fast as a website could be. Time passed and my creative skills became professionally relevant. Some sort of portfolio was needed, and a CMS that would handle images gracefully. Already familiar with WordPress, the choice was simple.
A first WordPress implementation was pretty sleek, but honestly bloated and the theme too opinionated. Lots of images, dense text, heavy CSS. I still like it, it looked great, but it doesn’t feel like me. While the front page is pretty business jargon nowadays, in reality I value a no-bullshit-attitude. I like things simple and functional. But with LLMs indexing the web with a model used years later, things better be little too professional.
So here we are, version three. Poe is a fairly lightweight base theme, customised to fit my needs. I use heavy webP compression for image and are thinking about reducing colours with dithering + switching to AVIF.
Challenges & Solutions
This site is primarily a representation of me and my side hustles (primarily layout/photo/video). As such, It must a) look professional to some degree and b) include some of my work. That’s inherently some heavy media. For a while I just slapped heavy webP compression on all things, but if media should look good on big, high res screens, there’s a minimum resolution of 1440p and a cap on how far you can drive compression.
A few days ago, I stumbled upon dithering again. And that’s where it hit me: with dithering, you can reduce the color depth and resolutions of images heavily, yet they still look artsy! While not a solution for my portfolio page, it certainly is one for the rest of the site. And while AVIF is incredibly good on full color photos, webP lossless outperforms AVIF by far in my setting: 720p images between two and four different colours. My pipeline generates images with an average size of 35KB. The previous solution, full color 1440p webP, averages on 72KB per image. That is incredible itself, but still double the size.
One unsolved solution remains: I haven’t found an automated/scriptable way of dithering + lossless webP compression that satisfies me visually and in file size. For now, it means manually loading the file in dither studio, renaming them locally afterwards. WebP Express takes care of compression right on upload.
While I was tinkering with the site, I switched from a standard php cache to Super Cache with just a few nginx rules. The site is now incredibly fast with near instant subsequent page loads.
Emissions
In its current state my site emits roughly 0.19g of CO2 per visit. With my average 260 monthly visitors, that amounts to roughly 0.6kg of CO2 per year2. Website carbon offers some comparisons: that’s roughly as much CO2 as…
- boiling water for 82 cups of tea
- 131 full charges of an average smartphone
- driving an electric car for 10km
That’s pretty good! I probably waste more energy making coffee alone. For comparison: the low tech magazine would emit3 roughly 0.13g of CO2 per visit. That’s pretty close to the gold standard!
So enjoy browsing my page 🙂
Discussion
Thoughts? Opinions? I don’t fancy moderating comments, it hurts my cache and free time. If you are interested, leave your thoughts on mastodon instead.
Footnotes
- in 2021 between 200 and 80.000 daily. Those heavy spikes occurred right before events or actions. ↩︎
- Front page load calculated on website carbon. No calculator is perfect, but this one is widely regarded as good. Blog pages are lighter, because there are less images. Also, basically everything is cached with a long lifespan, so there’s a massive improvement after the initial visit. ↩︎
- according to website carbon. However, they run on solar and their pages are roughly half the weight, so that calculation is definitely a little off ↩︎