Designing a sustainable web: what we’re doing wrong, and how to change it

People, on the whole, have no idea about the environmental impact of loading a simple website.

Sustainable website design

Websites by their very nature are an intangible thing, so people tend to think they have no impact at all. It’s just some lights on a screen – nothing to worry about, right?

Well, getting that webpage to appear on your device has turned into one of the most polluting industries on the planet. The internet runs on electricity. With over 1.94 billion websites in existence and an estimated 4.2 zettabytes (4.2 trillion gigabytes) of data transferred per year by 2022, we’re using a colossal 416.2 terawatt hours of power on an annual basis.

That’s 2% of global carbon emissions, the same as the aviation industry. Yet because we rarely hear about the web’s environmental impact in the media, there is very little drive for the industry to change.

Who’s responsible for the internet’s carbon footprint?

Thankfully people are starting to take action, most notably Google, who now run all of their data centres on sustainable power. With 100% renewable energy, they can deliver truly carbon neutral websites.

While it’s good news that Google are powering their servers sustainably, they only host a fraction of the websites on the web today. With 48% of all power used by a website coming from the data centre, we need other hosting providers to go green too.

Telecoms companies also have an essential role to play, transferring terabytes of data back and forth from servers to peoples homes. The infrastructure used by these companies means that huge amounts of power are consumed (14% of the entire process), and it is down to the multiple individual companies to change the way they power their systems.

Some telecoms companies are making advances in becoming more sustainable. T-Mobile is a market leader in its push towards a green power system, having achieved 27% green power for its US wing. While this is a step in the right direction, there is a very long way to go.

The final step in the process is the end-user loading websites on their device. This accounts for approximately 38% of the power used to view a website. In cases where people use renewable power in their homes, it’s possible to achieve a zero-carbon experience at the point of delivery, but with many homes still reliant on fossil fuels, this is rarely the case.

The environmental cost of an unsustainable web

To better understand how our online activity affects the environment, consider the following example. In April 2019, Amazon.com had roughly 2,386 million visitors. Amazon is not hosted on a sustainably powered server; according to the tool WebsiteCarbon, each view of its home page generates around 6.63 g of carbon.

This means that in a single month, the carbon footprint of the Amazon home page was just shy of 190,000,000 kg of CO2. This is enough power to drive an electric car 2,457,869,212 (over 2.4 billion) km. That’s 61,331 laps of the planet, in one month, from one website’s home page.

Wouldn’t it be great if all websites could be hosted by sustainably powered data centres? We could reduce that CO2 footprint by nearly half, and if we powered our homes with sustainable power, we could reduce it by a further 38%.

This is where we can all be part of the solution. If you live in a country where sustainable energy is an option (via solar, wind or a sustainable provider like Bulb or Ovo), you can reduce your impact on the environment – not just when browsing the web, but in all aspects of your power use.

If enough people make these changes, the big companies that make small concessions to being green will have to evolve or die, promoting real change.

How developers can help to build a greener web

As the producers of websites, developers like us have a large part to play in reducing the internet’s environmental impact.

Every element on a webpage takes up memory. As well as considering how to make websites looks good, we should be thinking carefully about reducing the size of each webpage we create.

A simple solution would be to reduce the number of images on each page, and to give preference to darker designs over light ones if the brand allows. This is because white LEDs on our screens use more power than dark ones – even small changes such as choosing a dark-coloured footer can help to reduce the power consumption of a webpage.

For any readers directly involved in web development, here are a few things you can do to improve the carbon impact of a website:

  • Host websites with a carbon neutral or sustainably powered hosting company, preferably the latter.
  • Clean your code. Remove any styles or scripts you might have in your project that aren’t used when you get to the end. We all start with base themes and libraries, but there’s no need to leave unnecessary code in there if it serves no purpose. In our own tests, we’ve managed to half the size of our files by doing this.
  • Avoid bloated libraries and frameworks, for the reasons described above. Bootstrap might be a great start point for you to build your website, but try to customise it for what you need. Better still, code your own!
  • Minimise your scripts. A single call to the server for a minimised Javascript file is better than numerous smaller scripts being loaded.
  • Optimise your images. If you use an image at the size the client uploads, you’ll often find your end user having to download a 2000 pixel wide images that only ever needed to be 200 pixels wide. Larger file sizes result in slower websites. Optimise those images by serving up the size needed for the user’s device and prevent unnecessary data from being transferred.
  • Lazy loading images. For any users who don’t scroll through your entire page (or through all 20 slides in your carousel) this will save a large amount of data from being transferred.
  • Avoid CSS animations that run on a loop. They may look great, but they’re responsible for a considerable amount of power consumed by the end user’s machine.
  • Switch to an eco-friendly energy provider in your place of work. You will view the websites you create more than most individual users, refreshing pages countless times during development. Using renewable energy means all that loading won’t harm the planet as much.

As you can see, there’s a lot we can all do to reduce our impact on the environment when using the web. For developers and designers like us, it’s important that we set an example for others, creating websites that use as little energy as possible without sacrificing intuitive design or visual appeal.

If you found the tips in this article useful or have your own ideas about how we can all do more to build a sustainable web, get in touch – we’d love to hear from you.

All figures correct as of September 2019