An initiative
by Wonderland

Thought Piece

Calculating a website's energy consumption

We’ve done enough research up to now to know that what we do online has an environmental impact, and that impact isn't heading in a good direction. However, knowing this is only half the journey. The difficult part is measuring the true environmental impact and then finding a way to reduce it. That’s where the actual change will be done; there are enough people talking about the issue, we want to be amongst the doers.

Unsurprisingly calculating the estimated energy consumption of a website is no easy task. It can be done in a number of ways, taking into account a number of different factors. We have worked on a calculation focusing on two key metrics. Data Transfer, and Carbon Intensity of Electricity, which are also mentioned in Tom Greenwood's book, Sustainable Web Design. These two metrics can then be intertwined in order to calculate the energy consumption of a website.

Typically, researchers will quantify the energy usage of data transfers on the web via kilowatt-hours per gigabyte (kWh/GB). In this way, we can then translate the energy usage of our page weight (i.e. the transfer size of our page in kilobytes the first time someone visits our page) to a calculated metric, this then allows us to reference the carbon emissions of this specific action.

On the other hand, Carbon Intensity of Electricity refers to the amount of carbon (by weight) that is emitted per unit of energy consumed (specified in gCO2/kWh). As a single user, you can be using energy from multiple sources at any one time. The ‘low carbon’ usage that is being shown refers to the percentage of renewable and nuclear energy that is used by the country of your current location. This percentage is correlated with the carbon intensity of the electricity of the country you are visiting our website from.

So, when we then combine these two metrics in our calculations, we can provide the (estimated) co2e 1 that is being emitted when you visit this platform. Both metrics are shown below in the provided code snippet: TRANSFER_SIZE and CARBON_INTENSITY. In the example below, both are defined by a static number, while in real use-cases this will be a fluctuating value. The actual TRANSFER_SIZE (or page weight) can be checked via the developers tools network panel. There are multiple ways to determine the carbon intensity CARBON_INTENSITY), we chose to define the carbon intensity per a country basis. This number is influenced by the sources of energy a country generates/uses. For example, renewable energy has a smaller carbon intensity rate when compared to fossil fuel, which has a higher carbon intensity rate.

One disclaimer that has to be made is that the scientific world has yet to agree on a standardised way of measuring a websites energy consumption. By calculating the energy usage of a site via the method we've shared above, we don't take into account all the other possible energy consuming elements (such as screen brightness, data centre(s), and computing cost, etc.) Our calculation should be used as a good first indication / estimation of your sites energy consumption, but in reality the actual cost is likely a little higher.

Still reading? We’ve mapped out the calculation code below.

Of course, it's nice crucial to be aware of what your website actually emits, but what’s even more important is what you do with that calculation, who takes responsibility, and what changes you implement. That's why we've created Sustainable Digital Design so that resources and methods to measure and reduce this can be shared.

    Written by Gwen Bogaert

    3 January 2022

    An initiative
    by Wonderland