Cracking the code on sustainable web design: How to build a more eco-friendly internet

green static with abstract shape

It should come as no surprise to you that we are in the midst of a climate catastrophe. The world is heating up at an accelerated rate due to human activity, causing a cascade of problems. Some of it has to do with websites — billions of them.

For all the devs in the room: it’s time to talk digital sustainability

Just like anything we create, the internet too has a carbon footprint. A rather large one at that. It’s estimated that the internet as a whole (including connected devices) makes up 3.7% of global carbon emissions [Sustainable Web Design, 2021].

Meanwhile, in 2020, data showed that only 29% of the world’s electricity was generated by renewable sources. [Centre for Climate and Energy Solutions, 2020].

If we continue business-as-usual on the current trend, the IT sector as a whole will be responsible for 14% of the world’s carbon emissions by 2040 [HBR, 2020]. Basically, we need a really quick shift towards digital sustainability if we want to keep scrolling.

What does sustainable web development mean?

When the phrase sustainable web dev is used, we are really talking about a number of conscious actions coming together to enable the creation of more sustainable, lower-carbon websites. These actions cover more than just the aesthetic design of a website. To truly create a more sustainable website you also need to focus on:

Planning

Identify the best ways to utilise your time to reduce the use of digital resources.

User experience

Think about how the website can best serve the users it is designed for.

User interface design

Working on-brief and with the creative team to tailor the visual components of your website to cater for as many audiences as possible, whatever their ability may be.

Development

Look at ways in which the website can be built to lower the weight of assets, decrease server resource and device energy usage, as well work for all audiences of any ability.

Hosting

Consider how the location, power and effectiveness of the server hosting environment affect the impact of your website.

Content

How can the content be optimised, or used in a way that doesn’t add unnecessary weight to a web page? Audit content to remove out of date information.

Search/SEO

Setting your website up to perform well in search engine results, helps to reduce the number of searches required by users to find information they need

How do you measure the carbon footprint of a website?

What we need to do is be able to measure the amount of carbon the websites we build, manage and take on, are creating. Only then can we know what measures need to be taken to reduce the carbon emissions, and quantify that amount of carbon removal.

There are a number of tools and methods now available to estimate the carbon footprint of your website.

Website Carbon Calculator

The website carbon calculator has been created by Wholegrain Digital to help inspire and educate people to create a zero carbon internet. It’s a great tool that is about as easy to use as a tool can be. Drop in your website’s url and click the Calculate button, wait for the API to do its magic and wallah, you get a figure estimating how much carbon that website is creating, alongside some quirky facts.

Beacon

Calculate the environmental impact of a web page, see the breakdown and learn what measures can be taken to improve it. As simple to use as the Website Carbon Calculator, but with a handy extra of being able to input how many views your website has over a year, with the number of returning vs new visitors. Potentially giving a more accurate result.

Ecograder

A tool from Mightybytes to help reduce emissions, improve performance, and meet your website goals faster. Again, another simple to use tool, this time giving an easy to navigate breakdown of potential improvements you could make to your website to lower its carbon footprint.

How to implement sustainable web development

Designers

It’s important to work closely with the creative team to work out the best solutions for the design execution. In the quest for low carbon impact there needs to be a balance between meeting the brief, maximising the target audience engagement whilst maintaining sustainable integrity. Focusing on the lowest carbon footprint possible shouldn’t lead to bland websites that don’t meet expectations.

Developers

There is a great deal that developers can do to reduce the impact of a website. Much of which is based on the same principles as good website performance.

  • Limiting the weight of assets being loaded
  • Outputting images at the correct size, responsively for the viewport or device
  • Using modern image formats such as WEBP and AVIF instead of JPG or PNG
  • Limiting the number of custom web fonts in use
  • Lazy loading content to reduce initial load, and so that you aren’t loading media that isn’t actively being viewed
  • Limiting third party libraries and JavaScript
  • Limiting the use of analytics and tracking
  • Using components to only load the required assets on a given webpage

Hosting

As developers, you need to ask questions such as:

  • Where are the files stored in the world?
  • Where are the users of the website based?
  • How are the servers powered?
  • What are the servers Power Usage Effectiveness (PUE) scores?
  • How are they cooled/do they use the excess heat for any other purpose?

Helping website owners move to website hosting powered by renewable energy in a location closest to the end users will yield the biggest change in impact. On average, you can reduce a website’s carbon footprint by around 9% just by switching to a host using renewable energy.

CDN (Content Delivery Network)

Utilising a CDN is a great way to reduce the impact of transferring files long distances over the internet, perfect for a website with a global audience. By storing assets and caching them across a network you can make websites faster, lighter and more responsive for users, wherever they are in the world. Choosing a CDN provider that uses renewable energy is crucial in limiting the impact of the website.

Content managers

Website content

Website content is a continuous job. Or at least, it should be. Creating the website once and never updating the content again is unlikely to result in the website receiving much traction or interaction.

To be more sustainable, marketers and content specialists should not only be looking to update or add new content, but also remove older content that is now out of date or not relevant.

Ideally content creators and writers would work alongside the designers and developers to manage the weight of pages, only adding useful and relevant images to support the text-based content, as that is the most lightweight type of content. For example, instead of creating a downloadable PDF of a company report, you could create the same content as HTML, which has a much smaller carbon footprint than a downloadable file.

SEO

Much like the content itself, working on search engine optimisation is something that needs regular focused work. It is an important aspect of creating more sustainable websites, as the quicker a user can get to the content they are looking for, the less impact they will have across the whole user journey. Good SEO means a user needs to search less and not click around to find what they are looking for.

Having the correct information be shown to the user earlier means the impact your website has a wider scope than just your own webpages. The smoother and quicker the entire user journey can be, the less impact it can have on the planet.

If you have a website project you’d like to chat about, do get in touch — [email protected]