How to build a sustainable website

January 2024
Insights
4 min read
by Scott Euser and Žiga Kropivšek

The need for all of us to reduce our carbon footprint and combat the climate crisis is ever present. While areas such as transport, diet and industry are often under scrutiny, we should also consider a growing portion of global emissions: from the energy used for websites and other digital technology.

Energy use by websites as a percentage of overall worldwide emissions sources has been rising rapidly. This research briefing posted by the UK Parliament estimates ICT usage (including data centres, communication networks and user devices) accounted for 4-6% of global electricity use in 2020 and expects that amount to continue to rise. If all of us want to take meaningful action on climate change, it is our joint responsibility to reduce the carbon footprint of our work, including our websites, which are a critical part of any think tank or research institution.

Most of our clients now reach their audiences online – through their websites, social media, podcasts and videos – so it is essential that these media are effective and efficient. But what impacts the energy usage of a website, and how can you ensure that energy-saving measures don’t impact the scope or accessibility of your work?

The energy demand of a website comes from a number of sources:

1. The size of the website and of each page.

Is your website a dynamic and effective place or is it a depository of everything you’ve ever posted? Slimming down by removing obsolete content reduces the size – and therefore the energy demand – of the site.

This concept can be applied to each page too. One full of images, videos and inefficiently built assets means more data is needed to transfer from the hosting to the visitor’s device. This can, of course, be directed by the site’s design and content decisions (for example, do you really need loads of flashy animations?). But the development approach that is taken ultimately has a huge impact. Are the right size images being served to the device? Are images and videos loaded only when appearing on screen, and videos only when clicked? Are other assets compressed, and wherever possible using native features available in the browser itself?

At Soapbox, our front-end team is constantly asking these questions and the robust review and QA process we have in place helps ensure that our digital carbon footprint is as small as possible from a data transfer perspective. They keep on top of new features from browsers and monitor CanIUse to know when older code can be refactored to make use of new, more performant features as they become available.

2. The infrastructure hosting the website.

Writing performant code is crucial in reducing the load on hosting servers. Efficient code execution means less processing power and, consequently, less energy consumption.

As one example of performance optimisation, implementing smart caching strategies can significantly reduce the frequency of data retrieval, thus lowering the server workload. However, it’s important to ensure that cache clearing is targeted and partial, to avoid unnecessary processing. At Soapbox, we lean on (and contribute to) the underlying code infrastructure of the content management systems we typically use (Drupal and WordPress), using their built-in systems for caching and integrating with further systems like Cloudflare to further reduce the processing power needed.

3. The energy source of the website and how efficiently it uses that energy.

Choosing the right hosting provider that is backed by green energy plays a vital role in the sustainability of a website. Additionally the power usage effectiveness (PUE) plays an important role, highlighting how efficiently the data centre uses its energy.

For the Drupal websites we build (for example), we typically recommend hosting via Cloudways or Pantheon. Cloudways is listed on the Green Web Foundation, certifying that their data centres are powered by renewable energy sources and have efficient energy usage. Similarly, Pantheon uses Google Cloud Computing, which uses 100% renewable energy and has a PUE well above average.

4. The visitor’s device.

How hard are your visitor’s devices having to work when accessing your website? When the page reaches the visitor’s device, the device needs to render the page to your screen, then needs to handle any interactions on the page in an efficient manner.

Again here, our front-end team works to heavily optimise our sites and utilise the native features of devices and browsers as much as possible. They work to minimise use of JavaScript (the language that lets users interact with the page once it loads) by using infrastructure that promotes cached content and, wherever possible, uses the native features included in modern devices to enhance pages with interactivity.

Conclusion

Building a sustainable website requires this more holistic approach across disciplines. We are here to advise you throughout the process of building, optimising and maintaining your website, and to help you consider the impact of your decisions on your carbon footprint. To find out more, get in touch with us at hello@designbysoapbox.com.

Scott is Director of web development at Soapbox and an active contributor to Drupal. He is based in London.

Ziga is a creative lead at Soapbox. He is based in London.

Like what you see? Let’s work together

Get in touch