Should websites be carbon-aware?

What is a carbon-aware website?

A website is considered to be carbon-aware when it provides more when the electricity is “clean” and less when the electricity is “dirty”.

By detecting the user’s location or using the hosting provider’s location, you are able to find out if they are likely to be using fossil fuel-based electricity or "green" electricity. Knowing this, the website then changes some aspects to reduce carbon emissions.

For example, a carbon-aware website detects a user’s location, determines they are currently in a place where electricity is generated using fossil fuels, and serves lower-quality images to reduce data sent over the wire.

Please note this is different from applying general best practices to reduce data/emissions of a website.

Carbon-aware methods

• Serve images at a low quality or remove them entirely.
• Don’t load custom fonts.
• Serve a reduced, simpler stylesheet or dark mode to reduce electricity consumption on OLED displays.
• Remove non-essential components such as social sharing or complementary content.
• Replace embeds such as videos with links or a text-based alternative.

This list doesn’t include the typical methods of reducing data, such as optimising your images, subsetting your fonts, using brotli or gzip compression etc.

These methods go further than the many options developers have to improve a site, but they all have drawbacks.

Issues

Accuracy and estimation

We cannot guarantee that the location of a user is accurate.

It’s also impossible to accurately calculate the emissions that a website creates – there are only estimations.

The currently available estimation methods use page size (page weight) and the source of electricity being provided, either based on the location of a user or hosting provider.

I recommend reading Sustainable Web Design, by Tom Greenwood.

An estimate can provide a general idea, but we should remember that the results are not necessarily accurate, and decisions would be based on estimates.

Degraded user experience

All of the items we listed degrade the user experience in some way. What are you willing to sacrifice? What are your users willing to put up with?

You could argue that providing an alternative for content is a reasonable solution. Ultimately, you are forcing users to do something to get the same experience as someone else.

For example, allowing users to click images to download a higher-quality version passes the problem down to the user.

Discrimination

People often don’t have a choice in where they are located in the world and don’t have a choice in what electricity their country uses.

Degrading the quality of experience for users based on their location could be considered as discrimination.

Opposite effect

One method is to provide users with a choice of two versions of a website – one typical version and the other a simplified version.

The trouble with this is if a user decides to change to the alternative version, perhaps because they want to see better quality images, they would have then requested two versions of the site or assets. Not ideal.

Alternative approaches

Note that I’m talking about the extreme methods, not the typical carbon-efficient design and development methods.

Eco-mode toggle

Giving users a toggle allowing them to choose an “eco-mode” or a “minimal” version is probably the best path to go instead of basing it on the user’s or hosting provider’s location.

I’m not convinced it’s a great solution, and with the mess of popups, ads, and cookie banners, I don’t particularly like adding another widget to the space.

I’ve also seen enough accessibility overlays that ironically make websites less accessible – I can imagine this having the same result.

Brands might want to apply this functionality to improve how customers see the brand, whether it works or not.

Edit: After writing this, there has been controversy around the COP28 website which has a “Switch to Low Carbon Version” toggle that didn’t do anything. COP28 have been accused of greenwashing and has since reworked the toggle.

Browser-based

The benefit of a browser-based solution is that it allows users to apply the methods to all websites and gives them a choice.

This reminds me of Opera Mini, a browser that is designed for maximum data savings:

• Choose image quality or not load them at all.
• Block ads.
• Compress video resolution.

I believe the main focus of this browser is to reduce data for users in areas with poor internet connection, low bandwidth or limited, expensive data plans.

Note that the servers the website files run through to be compressed might not be the best idea for privacy or sustainability.

A browser-based solution would circumvent the inevitable issues that will come with fake toggles and have a much larger impact.

Final thoughts

Is it enough to apply carbon-efficient design and development methods without going this extra mile?

Will users want to use a website with a degraded experience even with the knowledge of the impact it has?

If you decide to make a website carbon-aware, you should be cautious about the user impact.

Designers and developers can apply many methods to reduce a website’s carbon footprint. I believe creating a different experience for people based on the quality of their electricity they have no choice over, is going in the wrong direction. The intention is good, but the outcome isn’t.

Anything that affects the user’s experience should be a conscious choice by the user. I support bringing awareness on emissions usage, but I don’t believe it should negatively affect the user.

Reducing data, applying best practices and making positive, conscious choices are important when producing websites throughout the whole process.

I tend to start disagreeing when methods delve into reducing user experience beyond a reasonable amount. Those methods should be the end-users’ choice.