Go to content
Tim Frick, a thought leader in this space, defines digital sustainability as “the process of applying social, economic, and environmental stewardship principles to digital products, services, and data delivered via the internet.” When it comes to websites, there are three areas

Hosting: storing your website

For websites to work, they need somewhere to be housed where all the content and images can be processed and stored. Hosting can be responsible for up to 22% of the overall carbon footprint of your website.

It’s easy to reduce carbon emissions by switching to a provider that uses renewable energy. Most of our clients are hosted with Mythic Beasts, whose data centre is powered by renewable energy. Other hosting providers can be found by using the Green Web Foundation hosting directory.

Networks: transmitting website data

Networks send website and web application content to devices. Carbon emissions can be accurately measured, for example, by looking at the time it takes to load a page and the page size.

Devices: requesting and downloading data

Due to the amount of variation in hardware, the carbon footprint of devices is difficult to measure, especially when including their embodied emissions – the carbon emissions of their manufacturing process.

What can you do to reduce energy use?

A lot of the digital sustainability best practices focus on website page size, which is directly linked to carbon emissions. There are plenty of things you can do to reduce page size. Let’s start with images.

Images

Images are the most widely used media type – making up roughly 90% of all web traffic – and they have high emissions. Here are some examples of how to use images on your website in a more sustainable way.

Use lazy loading

This is a technique where the browser doesn’t load an image until it needs to be visible for example when a user scrolls near it. This reduces the initial page size and its emissions. You’ll need a developer to help you make this change.

Two parallel illustrations showing 4 images on a web page as displayed on a mobile phone. One is titled eager loading and the four images can be seen even though two would be off-screen. It's value is 2MB. The other is titled lazy loading and the two images off screen have not loaded.
Image from Google's web.dev website showing the impact of lazy loading images on page size and user experience.