7 things to think about when reducing website emissions

We might have shouted about this once (or twice) now, but it doesn’t make the fact any less striking. That is, pre-pandemic the digital industry’s global emissions were on par with those of the aviation industry. Whilst you might not think about how much energy each Google search expends, or how many emissions each scroll through TikTok eats up, these sorts of things still make up a significant part of your carbon footprint.

With the digital industry’s 1.4% of global emissions only set to climb, it’s vital organisations take the initiative to make a difference now. But there’s so little data-led evidence and best practices on sustainable website builds out there. Which is why Manifesto decided to track its web build journey with the Climate Group.

You can read about our approach in detail via a series of articles on The Drum. But we understand time is precious. Which is why we’ve put together seven key things to think about if you’re embarking on a similar project:

1. Even the most stripped back theme contains unused code

Drupal 9 won out as the best-suited content management system (CMS) for the Climate Group project. It also happened to be the most up-to-date CMS on the shortlist of contenders.

Manifesto was tasked with sorting through the internet for the most stripped back theme. By using the most sustainable foundations, the charity’s web estate would last long into the future. The team landed on ‘stable9’. 

But we also spun up our own custom theme. That way, the charity could override the stable9 theme’s restrictions if it so wished, and maintain control over the final version of its code base. The fewer lines of legacy code, the more ownership your frontend developer has over the frontend code, which is essentially their bread and butter.

Any untouched code or updated admin skins can go. Anything which adds unnecessary weight to your website, in fact, can be binned. Because every byte counts!

2. Slim down by using iconography

Images. They might look great, but they’re also one of the largest contributors to a website’s weight, making them a major driver of carbon emissions. So, we advise you only upload images with a purpose – that is, beyond looking pretty.

By using colours, icons and illustrations as opposed to cluttering your site with images, you can steer clear of being left with a site that feels scarce, bare and plain. You can even go more granular, building icons on top of Scalable Vector Graphics (SVG) to keep dimensions minimal.

And in line with the ethos ‘every byte counts’, simply blurring parts of images helps reduce the size of the file. Such an effect can really make a statement too, if you do it right. 

If using a certain image is non-negotiable, try to use WebP (or even AV1F, if you’re brave enough!). Then you can optimise the image for the device it’s going to display on.  

3. Fonts can create unnecessary downloads

When we look at fonts, we can break them down into two main types – that’s system fonts and web fonts. The former, more economical option would be a typical font you’d use on Word. Whilst the latter – web fonts – are more customised, using more bandwidth and generating more requests because they aren’t typically downloaded onto individual’s devices.

You can go even further, if you feel like this isn’t enough. By removing useless characters and symbols, the site’s structure will be even more efficient. You might think of such tweaks as ‘marginal gains’, but when you multiply this by each user downloading your font files, you can begin to understand why it’s worthwhile doing.

4. Dark mode uses less energy

Dark mode user interfaces have become gradually more popular, with mainstream apps like Instagram and Twitter now offering dark modes in their default settings. Unsurprisingly, dark colours use far less energy when produced on LED screens. But the benefits don’t stop at energy conservation. Dark colours have also been proven to curb early-onset myopia, otherwise known as nearsightedness.

5. ‘Fake’ videos

Just like images, videos also top the list of website’s weightiest contributors. By making images look like video thumbnails, you can avoid using up energy inherent in embedding a video on a page.

Visitors can still find the video and play it, but because the video embed code (along with all its excess tracking code) only loads when a user interacts with it, we’re saving all that energy when they’re not watching it.

6. Start as you mean to go on

Whilst it’s easy to forget the non-visual-based components of a website, it doesn’t mean what you can’t see doesn’t carry weight too. A bloated code base can be just as detrimental to your emissions as images or videos. If your updates are consistently implemented poorly, then your codebase will only continue to get fatter.

By following the Pattern Lab approach, which is built to avoid things such as weighty codebases, the Climate Group editors can exercise best practices around site content. This approach also encourages our team- and the charity’s editorial team – to stop and think before new updates. This keeps the site streamline, just as the original build intended.

We know it’s unrealistic for a site to remain the exact same over a long period of time. However, the smallest adjustment can have huge ramifications for a site’s emissions. That’s because these (what seem like tiny) edits can set a precedent to stray away from the initial, energy-conserving build focus.

7. Collaboration is key

Being on the same wavelength as each other on this project was invaluable. By thinking coherently and contributing an equal amount to the site’s design, the Manifesto team could truly challenge what it meant to build a sustainable website.

At the beginning of this project, we shared a clear vision – and that was to feel no boundaries in how creative we could get. Without this boundless approach, half our ideas wouldn’t have come to fruition.

This saw the Manifesto cross-functional team work alongside each other, catching up via weekly stand-ups. That way, we could actually finesse our proposed solutions within the deadlines laid out.

Ultimately, this project pushed Manifesto to rethink, and reimagine, every step of the traditional web build process – something we’d never done on such a granular level before.

These cover just the tip of the iceberg when we reflect on the Climate Group project. For more information and results, read the full Climate Group case study, or learn more about our approach by accessing the full series of The Drum articles here.

If you’ve got something to add, please keep the conversation going via the comments section below.