How I decreased my website’s carbon emissions by 88%
That’s right — websites have a carbon footprint. Here are 6 simple steps I took to do a teeny bit of good for the world.
The internet is the elephant in the room when it comes to climate change. Data centres use around 4% of the world’s energy, and the internet accounts for around 3.7% of global greenhouse emissions. That’s similar to the airline industry.
There are a number of strategies for creating a greener web. I decided to try a few, to see if I could make my modest personal website a little more environmentally friendly.
1 — I measured my website’s carbon footprint
I used the Website Carbon Calculator to estimate my website’s carbon footprint.
The results weren’t pretty. The home page, with just a few lines of text and a single photo, produced an estimated 0.5g of CO2 per visit.
If my home page had 10,000 monthly views, it would be using the same amount of energy as an electric car travelling almost 1,000km (155kWh). (As it happens, I’m lucky to have 10 views a month — my insignificance is environmentally commendable.)
It’s hard to measure such things accurately, but we can use well informed estimates to help take steps in the right direction. Here’s the methodology behind the Website Carbon Calculator.
Measurements taken, off I go…
2 — I checked my host’s green credentials
Data centres consume a staggering amount of power. The source of their energy (renewable or fossil fuel) and their energy efficiency are hugely important factors in building a greener web. The Website Carbon Calculator checked my host (GitHub) for me — it reckons it’s broadly sustainable. No change needed, but I may look into choosing an even greener host in the future.
3 — I converted all images to WebP format
This was a biggie. Images tend to have large file sizes, which means a lot of data transferred from data centres to users’ devices, which means power. And only around 26% of the world’s power comes from renewable sources.
Most images on the web are in the familiar JPEG, PNG or GIF formats, but these tend to be pretty chunky. WebP is a leaner alternative — smaller file sizes but comparable quality. I used WebP Converter to batch convert JPEG and PNG images across my site. It cut the combined file size from 80.8Mb to 9.7Mb — a whopping saving on potential data transfer.
I was left with a few extravagantly large animated GIFs —WebP can handle animation, but on conversion they were larger than the GIFs. I decided I didn’t need them anyway, so I replaced them with static WebP images. I also reduced the dimensions of the photo on my home page from an incomprehensibly lavish width of over 3,000px. More pixels = more data.
With a swift find/replace in the code for my static site I changed .jpeg and .png to .webp, to point to the new images. Then synced to GitHub.
In this instance, it was pretty straightforward. No doubt this could all be much harder to do on sites built and hosted in other ways.
And by the way, booooo to you Medium for not supporting WebP uploads.
At this point, I retested my homepage…
Nice! A 72% decrease in carbon emissions just from slimming down the images. But I was hooked — I wanted more.
4 — I swapped out Google Fonts for self-hosted web fonts
My site used Google Fonts — an easy, popular way of adding fonts to a site with just a line of code. But it’s inefficient, with data moving to and from Google’s servers when a new visitor hits my site.
A more sustainable option is self-hosting web-friendly fonts. First, I used used Google Webfonts Helper to find leaner versions of my site’s fonts (Vollkorn and Open Sans). I downloaded the files in WOFF2 and WOFF format — font formats developed specifically for web, with better compression than TTF, OFT and SVG. I updated my site with extra CSS (provided by Webfonts Helper) to support the new fonts, and synced the files and code to GitHub.
5 — I turned to the dark side
While slimming down fonts and images is about reducing the electricity needed for data transfer, there are many other sides to sustainable web design. For example, reducing the electricity needed to power users’ devices.
Darker colour palettes mean less of a user’s screen is illuminated, and therefore the LEDs need less power. So I thought, in for a penny, in for a pound, let’s make everything darker.
6 — I measured again (oh, and I’d made everything faster)
Before I round up with some final measurements from the Website Carbon Calculator, here’s a reminder that slimmer websites are faster too.
Before making changes, my home page was achieving a 67/100 performance rating from Google’s PageSpeed Insights. After, I’d bumped it up to a delightful 100/100.
So, I tested on Website Carbon Calculator for a final time (I had to wait 24 hours as it only allows one test per site per day, in order to — you guessed it — minimise data transfer).
Hurrah indeed! Lovely and slim — an 88% decrease in CO2 emissions.
I could have gone further — monochrome images and slimmer code, for example. Even the usability of a website is an important consideration — the fewer clicks and page visits for a user to achieve their goals, the lower the data transfer. Different sites will need different sustainability strategies.
This was an enlightening, cathartic thing to do — a lovely environmental spring clean.
How to build a slimmer, greener web
If you’ve been inspired to build and share things on the web in a more environmentally conscious way, or just read up on it, I recommend starting here…
- Sustainable Web Design (there’s also a book)
- The Website Carbon Calculator
- A sustainable web for everyone — a brilliantly clear video by Tom Greenwood, with practical ideas
As it happens, all the above are from the same group of folk.
A huge thank you to Victor Hwang for opening my eyes to all this.
