Reduce the carbon footprint of this website 🌱
How this website was designed and coded with sustainability in mind
Apr 12, 2022 · 360 words
Why should I reduce the energy this website consume
Well if you’re not aware of the current world situation, you might start by subscribing to Zopeful newsletter course. Any action to reduce energy consumption is good. Even a small drop is already a small drop. I know this website doesn’t have a wide audience (well, I don’t know, there is no tracking script). But making this website more efficient helps me progress in my craft.
How I designed and coded this website
Before and after optimising
It’s really nice to go on this path, but we need some numbers before and after. The good news is that before optimisation, the homepage get a “Hurrah! This web page is cleaner than 97% of web pages tested”. But there is still work to do to optimise.
Let’s dig into the different optimisations made this year
This website source code is available on github and the complete commit history too. There is no secret to hide, sharing is also part of the web I love.
Compressing images, and use only small sizes in the design. Hosting provider constraints
By highly compress images and resize photos, I am able to keep the whole website under 10mo. The website is hosted at infomaniak which offer a free static site hosting under 10mo. Infomaniak also provide a sustainable hosting offer (with a real CO2 roadmap and compensation).
Lazyload images and font loading and service workers
Using modern web technics to enhance the performance is also a wining point for a more optimized website in term of energy efficiency. The website is using font londing technics and images lazy loading with
<img loading="lazy"/> and local caching for assets with Service Workers.