How big a footprint is big?
In a couple of places on my website, I blithely state that I aim for each page of the sites I build to produce less than 0.5g of CO2 per visit.
But what do I mean? And is that good? How much CO2 is pumping out of any of our pages?
Glossary
Before we start, here’s what I mean when I say these words.
Carbon = the greenhouse gases emitted when producing the energy needed for a page to load.
CO2 = CO2 equivalent (CO2e), which means greenhouse gas emissions.
MB = megabytes. A measure of the size of a digital file, such as a word document, an image, or a web page. 1MB is 1000KB.
Data centre = big warehouses full of computers where stuff on the internet is stored. The cloud isn’t a fluffy cloud!
How do we measure the carbon produced by a webpage?
I mainly use two calculators: Website Carbon and Digital Beacon.
But how do they measure the emissions?
When you load a webpage, a file needs to be retrieved from a server and displayed on your device. The calculators try and work out how much energy that takes.
They take into account:
- The size of the webpage file that is transferred
- The electricity used by the data centre and the user
- Whether the data centre uses renewable energy
- And more
How accurate is the calculated measurement?
It can’t be exact. Just like when you try and work out the carbon footprint of a croissant or a cardigan, there are lots of factors, secondary impacts and ‘it depends’.
With websites, it can depend on
- The device you are using
- Whether you’ve visited the site before
- How far away you are from the data centre
- And more
These measurements are our best estimate at the moment. It’s a good place to start.
And they can definitely be useful as a comparison tool. We can see if one page is heavier than another in energy terms. We can also test a page, make some changes, then test again to see if it has improved.
How big is the average webpage?
The size of the file itself has a big impact on the amount of energy it takes to load. According to the HTTP Archive, the current average transfer size of a web page is around 2.4MB.
As recently as 2018 the average was around 1.7MB, and it looks like the trend for bigger and bigger pages is continuing. Unless we do something about it!
How much carbon does the average page produce?
The sustainable web design community, who work on creating sustainable design guidelines and produced some of these carbon calculators, have recently shifted to using a letter grading system for websites. Using page sizes to calculate the carbon emissions, they created bands for each grade.
They chose the average of 2.4MB as the pass/fail point for page size. So if your page is bigger than the average, you get an F. Anything smaller is better than average and gets an A+ to an E.
A real shame for those of us who grew up being told we were clever and feel like anything below an A is a fail. My goal of 0.5g of carbon per page results in a grade of C or D.
Do you like graphs? Here’s a graph showing the page weights and estimated carbon emissions.
Do you like tables? Here’s a table showing the grade bands.
| Rating | HTTP Archive Transfer Size (kb)* | Grams CO2 Per Pageview |
| A+ | 272.51 (5%) | 0.095 |
| A | 531.15 (10%) | 0.186 |
| B | 975.85 (20%) | 0.341 |
| C | 1410.39 (30%) | 0.493 |
| D | 1875.01 (40%) | 0.656 |
| E | 2419.56 (50%) | 0.846 |
| F | ≥ 2419.57 | ≥ 0.847 |
* Percentile data for transfer size has been pulled from the June 1, 2023 crawl of the HTTP Archive.
Find out more at Sustainable Web Design, where I got these from.
What about when you revisit a page?
Most websites use caching to speed up load times. This means a lot of the content of a page is temporarily stored on your device, so it’s quicker and easier to access it when you return to that page. (This is different to cookies, where a piece of code is put into your computer to track your activity.)
Caching means that subsequent visits to a page use less energy, because your browser is not having to download everything all over again. So a second visit uses much less energy and therefore produces less greenhouse gas than a first visit.
However, unless your website is the type people check frequently, like a news site, the majority of visits to your pages will be first visits. So it’s worth getting the amount of energy required for a first visit as low as you can.
What do different sized pages look like?
Here are some examples of different pages and their grades.
The Guardian homepage.
I tested this on 23rd January 2024 and for a first visit it produces 1.06g of CO2. That’s an F. It’s a dynamic page, with breaking news and recently published articles being pulled through. It also has lots of pictures and videos.
Zoe homepage
A fellow yellow brand. This has lots of pictures too, but has been built in a different way that is lighter and more efficient. On a first visit it produces 0.58g of CO2, which is a D.
My homepage
I obviously designed this with sustainability in mind, and I’m pleased to say it gets an A+, with 0.07g of CO2 produced. My homepage doesn’t have any photos on it, so I also tested one of my portfolio pages which includes images. That gets an A for 0.14g of carbon.
An aim, not a promise
0.5g per page is my goal, but I don’t guarantee it. Every business has different needs and restrictions and even individual pages have different aims, and content that has to be there. It’s probably not possible to get The Guardian homepage to an A+; though surely they could try for better than an F!
A few of the pages I build may be heavier than that target. Some are much smaller. But I always design with my sustainability goggles on, working with my clients to make decisions that benefit their business and limit damage to the planet.
How does your site stack up?
Have you tested your own webpages? Got a disappointing grade?
A full rebuild and a fresh new sustainable website is an option. But there are also tweaks you can make to your existing site. Even if you nudge it up one grade, that is progress towards a more sustainable internet. Book a green website audit with me if you want a hand with it.
