Reducing the Digital Carbon Footprint of Our Website

We have a confession to make – our website hasn’t always been as low carbon as it could have been and we’ve been on a mission to get it to where it should be.

Despite the fact that we talk about digital sustainability a lot, and the fact that I’ve given dozens of talks and interviews on the subject, there was a time when we had no idea that the internet is one of the most polluting industries in the world. We were staggered to discover that it emits more carbon emissions than the aviation industry.

Yep. More than the aviation industry.

How could we not know something as massive as this?!

Cue a lot of reading and exploring the issue to understand how we can be a part of the solution and not the problem.

Through this work, we found that a big part of addressing the problem is sustainable, low-carbon web design and development. Hence, we’ve been championing low-carbon websites with our clients and in our messaging. But we also needed to address our own website and reduce its impact.

So, what did we do and what impact did it all have?

Analysis

The first step was to analyse our website and understand the impact it was having and the level of CO2 it was emitting.

We were pleased to find that the majority of our site was already low carbon. This was thanks in large part to our laser focus on site speed, performance and image and asset optimisation.

But we knew it could be better and there were some particular areas of the site that needed attention. For example, our case study pages were emitting an average of 1.61g of CO2 per page view and were dirtier than 69% of web pages tested – ouch.

Armed with the facts and figures it was time to get to work.

Pagination & User Experience

We monitored the user journey on our site to see what people were looking for and where they were having to take extra steps in their journey to get to it.

As part of this, we streamlined our page structure, dropping pages or combining them into a single condensed page.

By doing this, visitors can now easily find the information they’re looking for, resulting in fewer loaded pages and reduced carbon emissions when they explore our website.

Typography

Custom fonts are powerful tools to add personality and a unique brand identity to your website. However, they have to be downloaded by the server to display on a user’s device. This means they can add serious weight and in turn, increase the carbon emissions of your website.

We had three custom fonts on our site, two headline fonts and one for the body copy.

We stripped one of the headline fonts out and swapped the body font for one that still has personality but a much smaller file size.

This cut the file size of our website fonts down from 1.16MB to 337KB.

Large files need more energy to download, so by reducing our font weight by two-thirds we’ve significantly reduced their energy requirement.

Images & Graphics

Images and graphics are some of the biggest drivers of a website’s carbon footprint.

Why?

Because they’re big files, and like we said above, the bigger a file the more energy is needed to download it from the server and display it on a device.

We went through our site and stripped out all unnecessary images and graphics. For example, we had 8 images we used as custom section dividers. We now have three but display a maximum of two on a page and flip/rotate them to add personality and interest without adding to our website’s emissions.

We also dropped the detailed images we used as section backgrounds and replaced them with either a flat colour or a texture that’s tiled across the background to add interest but with a much smaller file.

Videos

Video is enemy number one in the battle to create a low-carbon website and we had several auto-playing videos in our case studies.

Safe to say, they are long gone!

Now, not only is any video on our site set to not autoplay, it also has a piece of functionality that means it doesn’t even buffer the 1st few seconds when you load the page.

The only way the video does anything is if a user clicks to watch it, meaning emissions are only created when needed.

File Types

We were already using WebPs instead of Jpegs for our images, but our icons were PNGs.

We swapped them all to SVGs which are a much smaller file format. They also scale with no loss of quality which means not only did we reduce the impact of our icon files we also increased their quality – win, win!

Media Library

Another area we tackled was our media library.

We’d accumulated over 1,300 files which totalled just over 1GB of files.

A Carnegie Mellon University study estimated that storing 1GB of data on the cloud would result in a carbon footprint of about 2kg per year.

Now our media library has just over 200 files and sits at 188MB, meaning we’ve reduced its carbon footprint by a staggering 80%.

Code, Caching & a Content Delivery Network

The last step was to review our code to ensure that the CSS, Javascript and HML outputs were minified. We also checked that we had an efficient caching policy in place and that our content was all being delivered via our content delivery network.

Green Website Hosting

Having a low-carbon website doesn’t end with how it’s been designed and built. It’s also important to ensure the servers it’s delivered from are using renewable energy.

Lucky for us, green website hosting is a service we’ve been using for a number of years so we already had this box ticked.

Long Story Short…

Whilst we already had a largely low-carbon website, through the extra work we’ve done we’ve reduced the average carbon emissions of our pages from 0.82g of CO2 to 0.26g, a saving of 0.56g on average.

This means that for every 1,000 monthly page views of our site, we’re saving 6.83KG of CO2 per year. Which is equivalent to as much CO2 as boiling water for 925 cups of tea, or enough electricity to drive an electric car 114km.

Our case studies have also gone from emitting an average of 1.61g of CO2 per page view and being dirtier than 69% of web pages tested to emitting 0.36g of CO2 and being cleaner than 62% of pages tested.

Don’t Just Take Our Word For It

On the back of this work, we went through the accreditation process with the Eco-Friendly Web Alliance and are proud to report that we’re now an accredited climate-positive website (see the accreditation in our footer).

As a design agency, it’s important to showcase our design skills and creativity on our website, but as we’ve shown, great design doesn’t need to come at the cost of our planet through excess carbon emissions.

You can have the best of both worlds, you just need to be smart with what you do and how you do it.