What is the Carbon Footprint of your website?

This article may contain affiliate links. This means that at no extra cost to you, I may earn a commission if you use one of these links to make a purchase. Read the full disclosure.

Your website has a carbon footprint. Fact. Your website is saved on a webserver, which is essentially a fancy type of computer that has to be switched on all the time. Seeing as all computers use electricity, your website is burning through power in order for it to be online.

What is the Carbon Footprint of your website?

Web servers are not like regular home computers, they’re usually stored in large racks in data centres. Computers generate a lot of heat, so air conditioning, ventilation and cooling systems are needed for the equipment to run efficiently. This uses additional power.

One single web server could also be responsible for powering hundreds of other websites alongside yours, especially if you’re on a budget or shared hosting plan. The amount of power required by a web server depends on several different things:

  1. How much traffic the website(s) hosted on the server get
  2. How much content (images, text, video, JavaScript, styles, fonts, etc) is stored on that server
  3. The intensity of overhead required by the CMS (e.g. WordPress) to execute scripts and database queries
  4. How many simultaneous tasks have to be executed on the webserver
  5. The efficiency of the website build

More power = a larger carbon footprint.

But, how do you even check your website’s carbon footprint? And once you’ve checked it, what can you do to reduce its impact? Well this article is going to explain everything you need to know!

How to check your website’s carbon footprint

The quickest and easiest way to check is to visit websitecarbon.com (link opens in a new tab). Simply type in your URL and click ‘calculate’.

Click or tap on the image to visit websitecarbon.com in a new tab.

You’ll see some interesting facts & figures about the carbon footprint of the wider IT industry while you wait for your result.

Your result will be shown after a few moments. This is mine ๐Ÿ‘‡

This is the result for this website, sarahtamsin.com

What causes a “bad” score?

There are a few things to take into account:

  • Images, Video and Media
  • The size of the webpage document (DOM size)
  • The number of http requests
  • Resources being loaded (scripts, styles, fonts, etc)
  • The type of energy used at the host (fossil fuels or renewables)

Let’s look at these individually, and discuss how to reduce the carbon impact of our website. All of these steps will also increase the page speed of your site, improve user experience and conversions. So, doing this is definitely a good use of your time.

Compress images, video and media on your website

Images, media and videos are some of the heaviest elements on your website. In terms of file size, an image is much larger than a document. So, if your website has 12 images on one page, then something like 98% of the loading time is just images!

A common mistake is to just upload images straight from your camera, Canva or your preferred stock photo site, but these images are often far too large than is necessary for your website.

Most of your visitors will be looking at the image on their mobile phones. They won’t even be looking at the image for that long! The chances are they want to scroll straight to the content.

The best way to compress your images is to do so before uploading them to your website. This is part of your role as a website content editor/blogger/creator!

  1. Crop your images to the correct dimensions (in pixels) for the space required on the page. This may be a featured image for a blog, an image for Pinterest or even a hero/banner image. If you upload images in the original dimensions and crop the image within your editor (Gutenberg, Elementor, etc) then you’re actually wasting resources.
  2. Export the image for web use. In your image editor, make sure that you’re using jpg files (png is only needed for transparency, nothing else) and export it at around 60-80% quality.
  3. Consider using a lossless compression service such as tinyjpg.com

Reduce the overall DOM Size

DOM stands for Document Object Model – which is used by your browser to render web pages. Now, it’s important to remember that modern web pages are dynamic with asynchronously loading content (AJAX) that means the DOM is constantly changing according to what actions the user takes on the page.

If you use WordPress tools such as Elementor, you’re adding a lot of unnecessary mark-up to the DOM which results in 7-12 nested <div> elements for a simple paragraph or <h2> tag. This is the very definition of excessive DOM size.

Not only does the webserver have to work harder to generate the static pages from your CMS, the user’s device also uses more power to render the content within the browser!

Reduce the number of http requests

Every file downloaded by a web page is equal to 1 http request. Each http request increases the carbon footprint of your website.

The main document, that’s one. The CSS Stylesheet, that’s another. The main JavaScript file, there’s 3.

Then each individual font has another request, and each font weight used is yet more requests.

Don’t forget your Google Analytics, Facebook Pixel, Mailing List opt-in….

Each image is a single request.

Then you’ve got 12-15 WordPress plugins that ALL add additional scripts and styles to the front end…

And you’ve got 94 http requests. It happens.

Although technology allows simultaneous http requests with the HTTP/2 protocol, each additional request needs more power. If you’re able to minify, combine and optimise the files on your website, then the number of requests will be lower.

Removing redundant fonts and graphics is a good place to start!

Related: WordPress Best Practice Tips

Limit the number of external resources being loaded on each page

Many of the aforementioned http requests don’t always come from the webserver itself. Many resources such as JavaScript libraries, fonts and icons are saved in the cloud via a CDN. In some cases, this is beneficial because websites often share similar technologies.

For example, hundreds of millions of websites use jQuery, which is a JavaScript library. When a visitor loads a website, then visits another website, the request for jQuery has been cached locally, so the browser can access it much quicker.

However, you should be aiming to limit the number of overall resources your webpage needs in order to fully load. Remember that each additional requests for another resources consumes more power.

Finding a green web hosting supplier

Eco Friendly Green Web Hosting

One the biggest steps you can take to reducing the carbon footprint of your website is to opt for a web hosting supplier with green credentials. And I don’t mean greenwashing or tree-planting. Find a hosting provider in your country who runs entirely on renewable energy (solar, wind and sea power)

In the UK, Krystal Hosting is the gold standard in eco-friendly web hosting. They’re truly running on renewable energy and they invest in local projects aiming to combat the effects of climate change.

Also, if you use CloudFlare, their entire infrastructure runs on sustainable energy, but you should also choose a reputable hosting company with similar cregentials.

Summary: Reducing the Carbon Footprint of your Website

Here’s a summary of what you need to know (the TL;DR version!)

  1. Compress images, video and media on your website
  2. Reduce the overall DOM Size
  3. Reduce the number of http requests
  4. Limit the number of external resources being loaded on each page
  5. Finding a green web hosting supplier such as Krystal Hosting in the UK
Scroll to Top