How can we improve the sustainability of our digital products

Back in June 2022, I attended an eye-opening talk at Pixel Pioneers, a front-end conference in Bristol. It was from Hannah Smith, of the Green Web Foundation, talking about how to make digital services more sustainable. There were some disturbing truths in it, such as the fact that the total emissions from the digital industry is actually higher than that of the airline industry. But it was also fascinating because she talked about digital sustainability in a wider sense than just carbon emissions - it needs to cover human, social and economic factors as well. For example we should consider how workers are treated in our supply chains as well as whether our data centres run on renewable energy.

After this talk I invited Hannah to come and give us a workshop at Torchbox, which happened last November. As a result we now have a big collection of actions that we might take to improve our sustainability, mapped according to difficulty and impact, and we have a working group who are taking these things forward. The actions covered a wide range of subjects, from the way we run our offices and consume energy when working at home, to how we manage and run the devices that we need to do our work.

In this blog post I'd like to focus on areas where we can follow best practice in web development, and I'd like to unpack just a few things that we're currently improving upon.

Serving images in next-gen formats

Image compression technology has come on in leaps and bounds over the past few years, and for browsers that can support them, next-gen formats such as WebP are much more efficient than JPEGs and PNGs. It can be time-consuming though to write code that will serve up WebP to browsers that support it, with fall-backs for browsers that don't. Luckily, most of our clients use a service called Cloudflare to improve the security and performance of requests to their site. This has an option called Cloudflare Polish, which will automatically serve up WebP versions of images to those browsers that support it. This gives an immediate win in terms of data transferred with each page request, and as a result reduces carbon emissions.

Serving responsive images

As mobile devices have improved, we've all become used to seeing crystal-clear images on our retina screens. But as developers we don't need to serve the same image to all screen sizes and devices. A full-screen hero image on a large monitor does not need to be served up at the same size on a mobile device. It's straightforward for us to generate images in different sizes, and allow the browser to select the optimal image to display.

Lazy loading of images

'Lazy loading' means that instead of loading all the images for a particular page immediately, the browser will only load them when they come into view. On a longer page, the user might never scroll down to see all the images, or in a carousel, the images in hidden slides might never be needed. Lazy loading saves on data transferred by only loading the images that are immediately visible.

Dark mode

One of our climate voice group, Thibaud Colas, who has a keen interest in researching emissions, recently measured the difference between using dark mode and normal mode on his TV, and found that dark mode was much more efficient. Implementing a dark mode option for our websites, as we recently did for RNIB, is a great way to reduce emissions, and many users prefer it, especially those who have vision impairments.

Optimising styles and scripts

Over time, it's often the case that sites start to accumulate a bit of tech debt, and this can sometimes take the form of supporting CSS and JS code that is no longer used in the site. There are plenty of tools that can automatically detect stale files and code, and keeping these clean, and removing anything unnecessary will reduce the amount of data we are transferring with each request.

Back-end image optimisation

Before images are served up on the front-end, there are automated compression techniques we can use on the server side to reduce the file size of images. Wagtail, the CMS we use for many of our sites, uses a tool called Willow to compress images before they are served up - and there's options to adjust the compression level per image on the template side.

The above are just a few of the things we're currently looking at improving - we have a longer list of things in the pipeline. And of course, these are all things that fall into the more narrow definition of sustainability in Hannah's terms, but they do at least represent tangible improvements that we can make straight away, and adopt as policies for our sites in the future.

Collaborating with the Green Web Foundation

While we are busy optimising our sites, the Wagtail core team is also partnering with the Green Web Foundation to measure (and then reduce) the emissions of all Wagtail sites. This research uses state-of-the-art methods to measure the energy impact of different parts of the CMS, and we hope the results will help inform future changes to the CMS.