Carbon Footprint

How do I reduce my site’s carbon footprint?

Living and operating sustainably — as an individual and as an organization — is more than just recycling and eating better. If you’re operating a website, particularly if you’re a tech business, then your site has a carbon footprint that you need to pay attention to.

In 2010, the internet was already estimated to be emitting “around 300m tonnes of CO2 a year – as much as all the coal, oil and gas burned in Turkey or Poland, or more than half of the fossil fuels burned in the UK” (source: The Guardian). And that’s ten years ago.

In 2018 similar research showed the internet having a carbon footprint that is already larger than the global aviation industry. And that’s two years ago.

The internet’s illusion of cleanliness — created by our ever more polished and glossy cases and screens — masks the carbon spewing underbelly of our tech: data centers, routers, infrastructure, device charging, and cooling systems. Not to mention the actual production of all these devices.

So what do you do as a website owner? If you’re thinking that you want to reduce your site’s carbon footprint you’re thinking on the right track, and here we’ll show you a few pointers on how to do that.

In this post we’ll cover four key areas:

  1. Measurement (and offsetting)
  2. Hosting providers
  3. Site infrastructure
  4. User experience (and design)

Measurement (and offsetting)

We won’t go into a lot of detail on this topic because it will be covered in a separate, and more in-depth, post. But ultimately, if you want to optimize or reduce something, measuring a baseline is usually a good idea.

Currently its hard to get an accurate reading of the true carbon footprint of your site. Even more so if you’re running a fancy React (or similar) app.

However you can get a sense of how your site fares by simply plugging in your site URL into (which will also give you a few handy recommendations).

If you’re technically inclined you can delve a bit more deeply into your site’s footprint by using the open-source API the above tool is based on.

Although this approach is not super accurate, with some back-of-the-napkin math you can work out your site’s carbon footprint on a monthly basis. By simply multiplying the grams of CO2 your site emits per visit by the number of visits you have, you can easily get a ballpark figure of how much you should be offsetting.

Hosting providers

It will come as no surprise to you that your hosting provider is a big link in the carbon emission chain. In fact, where you host your site or app can have the biggest impact ultimately on your site’s footprint.

This is because for your site to be online, your hosting provider is using an array of machines and servers housed in data centers (typically) all over the globe. Each of these data centers uses vast amounts of electricity not just for keeping the lights on, but also for cooling (computers create a lot of heat).

So one of the biggest things you can do is switch to a “green” hosting provider. While we are not linking to any just yet (we are still vetting them) you can find a fair few from a simple search and the things you need to look out for are:

  • Energy sources. Are they using their own energy sources, are they using third-party renewable sources, or are they using coal- or oil-fired sources?
  • Cooling systems. Are their data centers located in areas naturally suited to cooling? Are they using natural cooling systems or are they using brute-force air-conditioning? Is their data center layout conducive to natural cooling?
  • Recycling approaches. Are they re-using the heat generated from their machines to power (or heat) other parts of their operation? Are they re-cooling their water and reusing it?
  • Organizational culture. As a company, are they genuinely committed to being carbon neutral? Do they offset their travel and promotional footprints or are they just greenwashing?

True green hosting services are likely to be more expensive than the cheapest you can find. But bear in mind that the expense there, is, well, offset by the fact that you will pay less in offsetting. (And of course you can sleep happier.)

Site infrastructure

With hosting out of the way, you should turn your attention to how your site is actually built and served. Put simply, the fewer requests and kilobytes your site needs to load on a user’s browser, the smaller its footprint.

This section is possibly the easiest for experienced designers and developers to understand intuitively because, luckily, the things that make a site “greener” are the same things that make a site faster. And we know that high-speed sites tend to perform better in terms of their effectiveness.

The things you should ask your designers and developers to look out for here are:

  • Making each page as small as possible. This includes things like removing unnecessary scripts, code, and html. Minifying external assets like CSS and JavaScript files. Reducing the number of requests by combining assets. And zipping or compressing assets where possible.
  • Aim for static HTML performance. A static HTML page is always better (carbon and speed) than one generated on-the-fly. While its not always possible to serve static HTML (ideal), you can implement clever caching strategies that approximate the effect.
  • Reduce and optimize API calls. This one sort of speaks for itself but, to summarize, each additional API call adds to your carbon footprint to reducing the total amount of requests, combining them, and reducing the amount of data transferred each time is important.
  • Image optimization. Try to use smaller images. This could be using SVGs instead of pixel-based formats, reducing the file size of photos, and not pre-loading too many images if they’re not necessary. (The same applies for video.)
  • Device awareness. When creating responsive versions of your site or app aim to reduce the assets and calls required as the device screen size reduces.

User Experience (and Design)

Finally we come to the actual design and user experience of the site. While this may at first seem far-removed from carbon footprints the truth is that they can both have a big impact.

On the design side, you have the following opportunities:

  • Use less images. Optimized images are great, but the best optimization is no image. Challenge your designers (or yourself) to achieve the same stunning visual effects without requiring vast amounts, or large, images.
  • Limit animation and auto-play. Videos are huge carbon sinks. Reducing animation, animated images (GIFs), and auto-playing videos will have a big positive effect on your site.
  • Reduce brightness. The brighter your site colors, the more electricity the user’s device requires. I don’t mean you should use black backgrounds, but even going from a bright white background to a light grey or pastel shade can help.

And lastly on the user experience side of site design, there are various factors you can pay attention to:

  • Information architecture. The less clicks a user needs to make to get to the most popular content, the less pages loads required, and consequently the less carbon emitted.
  • Simplification. Reducing the number of steps in any flow — search, signup, checkout, common tasks — directly impacts the number of page loads per user session.