6 steps to reduce the carbon footprint of your website

Let's prioritize web sustainability and work together to create a more sustainable digital future.
5 readers like this.
Mesh networking connected dots

According to Mozilla, Information Communications Technology (ICT) is expected to emit more carbon by 2025 than any single country besides China, India, and the United States. We tend not to think of the physical scale of the internet, but it is a massive machine. It is critical that we consider the energy that is consumed to both run the internet and allow for its exponential growth.

It is estimated that today digital technology uses between 5-9% of global electricity. This estimate is particularly concerning as only a quarter of our electricity comes from renewable resources. There is an increasing demand for electrical infrastructure as fossil fuels transition out of consumer and industrial uses.

There are also carbon implications for building and disposing of digital devices. Electronics are not generally designed for longevity, repair, or recycling. Digital tools consume rare minerals and water, and e-waste is a growing problem.

I will explore these aspects of web sustainability and others in this article. While my focus is on Drupal, these general principles apply to most of the web, particularly open source tools and ways to leverage the work of these communities. Likewise, I will also provide practical steps that people can take to reduce the environmental footprint of their sites.

1. Servers, networks, and power

Most of us do not see the scale of the internet's physical infrastructure. It happens at the other end of a thin fiber optic network. We don't see the thousands of server racks within the huge climate-controlled warehouses that run our websites. We don't see the physical infrastructure behind each hop that our internet packets take as they travel at the speed of light to our laptops and mobile devices.

We generally only consider the devices in our homes and offices—those used daily and those at the back of our closets. Powering our devices typically results in CO2 emissions, but this is just one part of its physical impact on the real world. We need to think more about the effects of building these devices. We should look to extend the lives of our devices and see that the components can be effectively reused or recycled.

2. Loading web pages

Beyond the data centers and servers, we need to consider the costs of just using the web. We know that the median web page weight between 2012 and 2022 has increased by 221%. Many sites now depend on leveraging third-party JavaScript tools, which impacts performance. We've also seen many libraries become bloated with code that isn't actually used to deliver the content.

[ Also read 5 open source tips to reduce waste in web design ]

There have been real advances in modern media formats but slow adoption. Image formats like WebP and AVIF offer dramatic improvements, but we often just use a lower-resolution image instead. SVGs offer extensive enhancements in semantics and scalability but are rarely used to their full extent. The defaults are not set for performance, and people usually default to doing the easiest thing. This impacts customer experience but also has a significant impact on CO2 emissions.

3. Computer usage

Another aspect worth considering is the human effort in using and building our digital tools. A faster web experience allows users to accomplish their tasks and move on quickly. Ensuring a website is performant is important, but it must also be optimized for a good user experience. Content must be available for everyone, regardless of whether they have a disability.

Building digital tools takes time, and complex tools often require more time to develop and maintain. Most modern websites include code that depends on several software libraries and multiple people or teams. Teams using open source software can be more efficient as they are not reinventing the wheel. A great example is the Drupal CMS, which drives over a million websites. Working with Drupal to deliver complex sites allows designers and developers time to focus on meeting customer needs rather than building basic form components. It is hard work to make interfaces simple, and we all benefit when our teams can stand on the shoulders of giants. It is important to remember that our time building digital tools also consumes energy and resources.

Digital teams that care about sustainability need to be conscious of the end use of the technology, not simply the environmental impact of the tool itself.

4. Government website contributions

Based on size alone, digital government initiatives have an outsized role in reducing CO2 contributions. Often, government sites are slow to load and difficult to find or finish the intended task. They are usually built with legacy proprietary tools that do not have a common navigation or reliable search tool. We know that fossil fuels power most US Federal government websites.

The US Web Design System (USWDS) is an initiative to improve the performance and accessibility of government websites. However, more can be done, such as tracking site-wide performance through tools like Lighthouse Parade, which uses Google Lighthouse to evaluate if pages follow best practices.

The UK is leading digital government by highlighting the importance of sustainability and demonstrating how to do this effectively. The UK government has defined a strategic approach to sustainable ICT and provided practical guidance on what government agencies should do.

The UK's Department for Environment, Food & Rural Affairs describes how their work is aligned with the UN's Sustainable Development Goals. The Ministry of Defence also discusses how this fits in with their goals for a circular economy.

5. What about Drupal?

Drupal is just one of many content management systems (CMS). Drupal is open source and drives over a million websites, comprising 1-2% of the web. Drupal can easily manage hundreds of authors and complex permission systems. It is popular with government, education, and large business organizations. It also has been a leader in web accessibility for over a decade. It is also a versatile platform that can leverage a headless JavaScript presentation layer like GatsbyJS or Eleventy.

Drupal can be very performant, but this is often overlooked. Drupal sites leveraging GatsbyJS are usually very fast because it converts the content into static HTML. Drupal can also optimize images for both screen size and bytes. Drupal can even convert images that authors upload to more modern formats like AVIF and WebP. Content Delivery Networks (CDNs) can also help ensure that cached pages are served more quickly. CSS/JS aggregation has been incorporated into Core to improve performance, but many other elements require a site builder to set up before adding content.

6. Practical steps for governments to create more sustainable websites

Governments can do a lot to reduce the CO2 footprint of their websites. Using a CDN and leveraging a JavaScript front-end like Gatsby will improve performance. Government design systems like the USWDS should be established by default to share common CSS, JavaScript, and other design assets. Securely sharing optimized digital assets will mean citizens must download fewer files when accessing different sites.

Sites should be created to focus on user tasks. More than any other class of websites, government sites should be designed to be fast and functional. By prioritizing user experience, many steps in online processes can be eliminated, and users can more quickly exchange the required information with government agencies and service providers. Agencies should build on existing design systems to support tools like dark mode effectively. Dark mode is one means to reduce energy consumption by citizens using government sites and extend device battery life.

Having government sites hosted in green data centers powered by renewable energy is a huge plus. Government agencies should aim to support data centers that actively minimize adverse environmental impacts. Supporting companies that work to extend the life of their hardware and effectively reuse or recycle their components is key.

It is also important to effectively manage the back-end infrastructure. Database optimization can dramatically reduce load times, as can Redis or Memcached.

In development sprints, consider using tools like Ecograder, WebsiteCarbon.com, and the Green Web Foundation to assess where there is room for improvement.

The Sustainable Web Manifesto and the Strategies section of SustainableWebDesign.org have good resources worth considering. Podcasts like Environment Variables and Green I/O provide a wealth of information and help developers keep up-to-date with best practices.

While these might appear to be small steps, making our web more sustainable can be achieved through collective action and tangible changes. We must prioritize web sustainability and work together to create a more sustainable digital future.

We must remember that even small impacts can have a huge impact when scaled up millions or billions of times.

Mike Gifford head shot
Mike Gifford is a Senior Strategist at CivicActions and a thought leader on digital accessibility in the public sector.

1 Comment

I'm a UX designer, and the sustainability of web design is something that is not spoken about nearly enough in our world! With the feeling like computing is cheap and engineering can work miracles, we can sometimes find ourselves falling into a trap of using things like animations as a "this looks cool" rather than a purely usability choice. Awareness of how this additional compute power affects the environment is something we should talk more about. Thank you for sharing!

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.