Do you know the carbon footprint of your website? (and why it's important)

As a carbon negative business, we’ve certainly learnt a lot about what it means to be a sustainable business, and we’ve seen and demonstrated first-hand how small changes can make a big impact.

We all have a responsibility to do our bit to tackle the climate emergency and that’s why over the past two years we’ve launched lots of initiatives like providing our staff and clients official schemes to offset their own carbon footprint, creating a sustainability steering group, reducing energy consumption across our offices (as well as making the switch to renewable providers) and making more sustainable and local choices when it comes to the suppliers we work with.

But there is one area that can often go unnoticed – and that’s the carbon footprint of the digital world. The impact of the digital industries on our planet isn’t always an obvious one, but it is important.

If the internet was a country it would be the 7^th largest polluter

We can thank the internet, email and cloud-based services for opening up a virtual world of communication (reducing unnecessary travel) and limiting the amount we rely on and use physical resources (such as paper). But with 4.66 billion people accessing the web globally, the internet is responsible for 3% of the world’s global emissions. That’s greater than the entire airline industry alone.

Here we take a look at what steps you can take to make your website more sustainable.

How to make your website more sustainable

A certain level of energy is used to load your website when a user lands on a page. The bigger the site and the slower it loads; the more energy is consumed. It can be hard to imagine, but the number of data points your website is loading from, the data transfer over the wire, the energy intensity of the data, the energy source used by the data centre, the carbon intensity of electricity, as well as web traffic volumes all contribute to how much carbon is emitted from a website.

Whilst the maths may sound complicated, the good news is that there are lots of straightforward optimisations you can make to your website to reduce its CO2 emissions – many of which your UX and SEO teams should be considering already if they’re following best practice.

1. Think about how you’re using images on site

As our internet has gotten faster and our mobile phones have become more powerful, we’re using more imagery on websites than ever before. Every image used on a website is data, and we consume electricity to be able to display that data on a webpage, so here are some ways to make this process more sustainable:

• Do you need all those images? The first question is whether all the images on a website are required. Do you need that carousel halfway down the homepage which has 5 images in it? Can you change the copy on a page so that the message is clear, and an image isn’t required for more context? 
• Are you using the correct file types? As we move away from older browsers, we are seeing support for modern image file formats increase. These image formats, such as WebP, can be compressed to a much higher level than JPEG or.png?auto=format - meaning it takes less energy to display them on a screen. The size difference will vary but, in most cases, you should be seeing at least a 20% difference between a.png?auto=format and WebP, and that’s a big saving.
• Can you lazy load images? When a user visits your homepage, the browser begins to download all the assets required for the page so the user can see them. It’ll download the CSS file that gives the page its look and feel, then download some JavaScript which adds functionality and allows mega menus to display when a user interacts with it. It will also begin to load all the images for the page. But what if a user doesn’t scroll down past halfway, or even at all? The images would still download, and that data transfer and electricity used would have been wasted. Lazy loading is a great option to reduce this by only loading in an image when it is required by the user. There are many third-party libraries out there that can be used to help achieve this, but what’s even better is that browsers are beginning to add native support for this functionality too.
• Are you using the correct image sizes? Websites should be built responsively to work across many different devices; from large desktop screens to small mobile phones - and we need to consider how our images should be displayed across this range. It’s important to serve up the correct image size for the correct device and doing so means we are not loading unnecessary data.

2. Consider the impact of your coding

How code is written can have a negative impact on UX, performance and the sustainability of a website. At a fundamental level, this is a decision-making task.

It’s important to make the right decisions on how code is structured, follow DRY (Don’t Repeat Yourself) principles to reduce repetition, whilst writing efficient functions which do the job well. When looking at using third party code, consider whether this code is the best choice or whether you’re adding in bloat for a small piece of functionality that isn’t necessary (think about cost vs benefit).

It can be a tough task to master, especially when there are time restraints during web builds – but your business and customers will reap the rewards if you do it right.

3. Make greener technology choices

The world of front-end development is always evolving. New tools bring new possibilities (and lots of opportunities to learn) and we have plenty of solutions to investigate when discussing options for a new web build. One of these options is to create a static front-end.

A standard website architecture would involve gathering data from a CMS and then using the data to generate what we see on our screens, and this all happens every time a user requests to view a page. With a static site, all of the website pages have already been built on a server - so we’re only sending the pre-generated pages to our users. This means less data being transferred and a reduction in energy usage.

Whichever technology is chosen there is always something that can be done to make it more sustainable; utilizing CDNs to serve assets directly to our users from a nearby location, caching as much as we can, and making use of green energy providers.

4. Make continued improvements

When your website is complete and live, and you feel that it’s performant and sustainable then the work is just beginning. This is the stage where you should plan regular audits of your sites and look for even more improvements, especially in such a changing landscape where new tools and techniques are being discovered by the community. Here at 26, we use several free and easy to use services to help us discover areas for improvement:

• Website Carbon Calculator: Website Carbon gives you direct feedback on how your website is impacting the planet as well as providing details on what you can do differently.
• Lighthouse / Page Speed Insights: As performance is tightly coupled to sustainability, any way in which we can make your website faster is a benefit. Using these tools from Google will give you both lab and real-life user data to determine how performant your website really is - and provides suggestions on areas to improve (and what the direct benefits are). Many deployment tools also give you the option to scan your site before pushing to live, so you can fail a build directly in your pipeline if they don’t hit a certain threshold.
• Web page test: This is another helpful tool for monitoring performance, which also includes advanced features to test different scenarios, such as connection type and test location. For even more useful information give @tkadlec a follow on Twitter.

There is a myriad of benefits to making your website more sustainable that extend beyond carbon emissions. Improving sustainability means enhancing performance, which will improve organic search visibility as your site is more likely to pass Google’s Core Web Vitals, whilst better performance naturally correlates with higher conversion rates. And with 43% of the UK’s population now expecting brands to be ‘eco-friendly’, improving sustainability makes for happy customers too.

These hints for improving the sustainability of your website are just the beginning. If you’d like to chat to us about a free performance audit, please get in touch here.