A greener web, a greener planet 🌿

Because climate change is a serious threat and can no longer be ignored. All of us need to work together to do everything we can to reduce our carbon footprint. And although it might not be the first thing that pops into your head, this also includes websites. Online traffic actually has an extensive impact on our environment and this impact is growing every year. In this post, we’ll discuss how you can get insight into the impact of your website. After that, we’ll give you a few suggestions to reduce your site’s carbon footprint. Let’s dive in and go green!

Email

Description

Is my website’s carbon footprint that big a deal?

Many of us don’t think about the environmental impact of our online activities. Why should we? When there are loads of other things happening that have a way bigger impact on our climate. And honestly, online is also the place we go to unwind while watching funny videos or browsing for new clothes. Which is understandable, especially with so much of our lives moving online nowadays. But we could do with a bit more awareness.

You see, every action we take online produces a carbon footprint, no matter how insignificant it might feel. In fact, digital technologies and internet usages are two massive players in polluting the environment as they use a considerable amount of electricity. Take a look at some statistics from the Shift Project that might surprise you:

  • Digital technologies are responsible for roughly 4% of greenhouse gas emissions.
  • The energy consumption of digital technologies is increasing by 9% a year.

As you can see, the internet and digital technologies have drawbacks, however easy they make our lives. And if you own a website – large or small – there’s no way around it: you’re leaving a carbon footprint. We realize that this isn’t fun to hear, but here at Yoast, we’re guilty of this too. So, what can we do to reduce this footprint? To start we’ll discuss what elements contribute to the carbon footprint of your website.

Every interaction on your website

As we mentioned above, every online action, including every interaction with your website results in electricity being used. For instance, whenever someone visits your website, their browser needs to make an HTTP request to your server asking for information. Your server needs to respond to this request and return the necessary information. Whenever this happens, your server spends a small amount of energy to complete the request. On the other side, the browser also needs the power to process data and present the page to the visitor.

Even though the energy needed to complete a request like this is minimal, this adds up when you consider all the interactions on a website and the number of websites we have worldwide. It’s also good to know that the complexity of your website plays a part in this. The heavier and more complex your website is, the more energy is required to send and process data.

On the host side

If you own a website, you’ll know that your website needs a hosting provider to host your server and store your site’s files and data. And hosts do this by keeping all this information on computers in large data centers. In these data centers, you can find thousands of computers processing data and large, complex cooling solutions running all day and night to keep the computers cool. All of these things consume electricity to function. As a result, data centers have massive carbon footprints. Of course, not all data centers are equal. There are a lot of factors to consider, from the size of the centers, the technology they use, and the infrastructure in place. Some use far more energy than others, producing significantly more pollution.

Don’t forget about bot traffic

Bot traffic refers to any non-human traffic to a website or app. It actually accounts for more than 40% of the total internet traffic in 2022 and you can safely assume that bots have visited your website. Similar to when a visitor enters your site, bots also make requests to your server that need to be processed. And when it comes to environmental impact, it makes no difference whether it’s a ‘good’ or ‘bad’ bot that’s visiting your website. It’s difficult to estimate the total power consumption of bots’ activities, but considering that it’s such a big part of the total internet traffic we can say that this amount will not be small.

Check your website’s carbon footprint

When you do a quick search online, you’ll find several carbon footprint calculators. According to the Website Carbon Calculator, the average web page they test produces approximately 0.5 grams of CO2 per pageview. That translates to 60 kg of CO2 per year for a website with 10,000 monthly pageviews.

So if our homepage gets around 10,000 monthly pageviews, it produces 20kg of CO2 per year. This is equivalent to the amount of carbon one tree absorbs in a year. Of course, we’re happy that our homepage does quite well when it comes to the carbon it emits. However, this is only an estimation and it’s only for one page. Our website isn’t just a homepage, we have loads of other pages driving lots of pageviews daily. Still, it can give you an idea of how much improvement your pages need.

How to reduce your website’s carbon footprint

There are several things we can do to minimize the carbon impact of our websites. And some of these suggestions may have a minimal effect. But do remember that every little thing we do and every bit of effort we make will bring us closer to the goal of net zero carbon emissions.

Choose a green host

A great way to lower the environmental impact of your website is to use a “green” hosting provider. Green hosting providers are companies using data centers with high energy efficiency and who are committed to using sustainable energy sources.

You can look for one or check your current host on The Green Web Foundation’s directory. The website lists over 500 hosting providers worldwide that have a tangible commitment to the use of green energy.

Design & Content

When we talk about the energy efficiency of websites, it’s easy to assume that it’s a purely technical topic. However, efficiency can be improved before we even build a website. Design and content have a big impact on energy efficiency and the following items are key areas to think about.

1. SEO

SEO might not appear to have anything to do with website efficiency but in practice the goals of SEO are inherently aligned with the goal of reducing energy consumption. When optimising a website for search engine rankings, we are helping people find the information they want quickly and easily. When SEO is successful, it results in people spending less time browsing the web looking for information, and visiting less pages that don’t meet their needs. This means that less energy is consumed and the energy that is consumed is used to deliver real value to the user.

2. Copy writing

Similar to search engine optimisation, copy writing has an impact on website efficiency because it affects the amount of time people spend browsing websites. Sometimes we want people to spend a lot of time on a website immersing themselves in our content. What we don’t want is for people to waste their time wading through content that offers little or no value to them. Therefore, clear and efficient copy writing can help reduce wasted time on the internet and in turn reduce wasted energy.

3. User Experience (UX)

One of the core elements of good user experience is reducing friction in user journeys. We want people to be able to find the things they want and perform the actions that they need to take in the most streamlined manner possible. Good user experience makes using the web easier and more enjoyable for everyone, and once again reduces the amount of energy wasted navigating to pages that don’t serve the correct purpose and staring at web pages trying to decipher what they should do next.

4. Reduce images

On most websites, images are the single largest contributors to page weight. The more images you use and the larger those image files, the more data needs to be transferred and the more energy is used. Regardless of any technical optimisations, designers and content creators should think carefully about their use of images.

  • Does the image genuinely add value to the user?
  • Does it communicate useful information?
  • Could the same impact be achieved if the image was smaller?
  • Could we reduce images that are not visible to the user, such as in carousels?
  • Could we achieve the same effect with a vector graphic (or even CSS style) instead of a photo?

Asking these questions and keeping images as minimal as possible without compromising user experience will help keep energy consumption down.

5. Reduce video

Although less commonly used than images, video is increasingly popular as a content format on the web, and it is by far the most data intensive and processing intensive form of content. As with images, ask yourself if videos are really necessary. If they are, see if you can reduce the amount of video streamed by removing auto-play from videos and by keeping video content short. A website with video playing can be one or even two orders of magnitude heavier than a website without video in terms of page weight and creates much higher load on the users CPU, resulting in vastly greater energy consumption.

6. Choose fonts carefully

Web fonts can enhance the visual appeal of websites but can add significant file weight to the websites on which they are used. A single font file could be as much as 250kb, and that might only be for the standard weight. If you want bold, add another 250kb!

To help reduce the impact on custom web fonts, designers should consider the following options:

  • Use system fonts where possible. They are not always as pretty, but fonts such as Arial and Times New Roman can be used without loading any font files at all as they are already on the users device.
  • Use less font variations. You may feel the need to use custom web fonts, but try to be frugal in the number of typefaces you choose and in the number of different weights that you use for each typeface.

Development

Developers have a lot of influence over the energy efficiency of the websites that they create and maintain. Although some decisions made by designers and content creators are out of the developers hands, there are several areas where developers are fully in control and areas where they have the ability to optimise the content and designs that they are given.

7. Write clean code

This probably goes without saying, but tidy and streamlined code is a fundamentally good thing. Keep code clean and simple, avoid duplication and write efficient queries. The code behind the scenes should be a well oiled, lean machine.

Keep in mind that this doesn’t just apply to the code you write, but also to the code that you borrow. If you are using existing frameworks and libraries then ensure that they are also refined and tailored to efficiently deliver the functionality you need, and that you are not hitting a nail with a sledgehammer.  In cases where you are using a CMS like WordPress, avoid unnecessary plugins that add bloat and choose plugins that minimize server load and don’t add unnecessary weight on the front end. Our Granola starter theme is designed to help you do exactly that.

8. Use less JavaScript

JS impacts website efficiency in two ways: by adding file weight to the web page and by increasing the amount of processing required by the users device. The second of these is something that applies to JS much more than to other types of files.

Functionality driven by JS is processed on the users computer or phone and increases CPU usage, which in turn increases the energy consumption of the device. Hear those cooling fans on your laptop whirring? That’s energy being wasted.

Look for ways to achieve front end interactions, functionality and animations using more efficient technologies like CSS, or at least use JS efficiently. A particular mention should be given here to tracking and advertising scripts that rarely offer any value to the user but can add significant file weight, cause significant CPU usage, slow websites down and invade their privacy.

The new web inspector in Safari has a useful tool to help assess the energy impact of a web page on the end user device, and this article by Apple’s WebKit developers provides some detailed advice.

Safari Web Inspector showing energy impact of a website

9. Optimize images

As mentioned above, images are one of the largest contributors to the amount of data transferred on most web pages. In addition to the decisions made by designers and content creators on the use of images, there are technical decisions that significantly affect the file size of images displayed on a page. These include:

  • Load images at the correct scale instead of relying on CSS to resize them, so that you avoid loading images that are larger than the scale they will be displayed at.
  • Use a tool such as TinyPNG or ShortPixel to compress image files without visible loss of quality. We documented our favourite image compression tools here.
  • Use the most efficient file format for each image, such as WebP instead of JPEG.

When these steps are followed, a significant reduction in image file sizes can be achieved, reducing energy consumption and improving load times with no perceivable downsides for website visitors.

10. Optimise fonts

There are technical strategies that can be used to minimize the size of fonts on websites and we have seen that even with custom fonts, it can result in file size reductions of up to 97%. Try these techniques to reduce the size of font files:

  • Stick to modern web font file formats like WOFF and WOFF2, which use higher compression methods compared to TTF, OFT and SVG file formats.
  • Subset fonts to only include the characters needed on the website.

For more information about optimising performance and size of web fonts, check out this article by Josh.

11. Use Accelerated Mobile Pages (AMP)

AMP is designed to make content load faster on mobile devices by stripping out unnecessary code and file weight, delivering a minimalist version of the original web page. In theory, technologies like AMP do not actually help much if the website is efficient to begin with, but in cases where the original web pages are not as lean as they should be, AMP can be a useful tool to strip out the fast and deliver a more lightweight and energy efficient version to mobile users.

It should also be noted that Google prioritises AMP content in mobile search results for news related topics in particular, so it can help increase visibility of your content. The downside is that your content may be served on a Google domain and some of the things stripped out by AMP could be things that you consider important. It’s a powerful tool, to be used with care.

12. Build static web pages

CMS powered websites make queries to the website database and dynamically generate pages. In simple terms, it means that the web server has to do work thinking about what information to send back to the user each time someone tries to load a page, and that causes the server to use more energy. One solution (listed below) is the use a server caching technology, but in some cases it may be possible to simply server static web pages with no database at all.

This can be achieved by writing the web pages as static files in HTML, CSS and JS, or by using a static site generator or specialist static web host to convert your CMS powered website into static files.

13. Use Progressive Web App technology (PWA)

Progressive Web App technology enables websites to tap into functionality normally only seen in native apps. As Chris wrote about recently, one of the core features of a PWA is the ability to cache files on the users device, meaning that content and assets do not need to be reloaded on repeat visits. This can significantly reduce the amount of data loaded by repeat visitors, especially on mobile devices for which data transfer is more energy intensive than wired connections. Like most things, it can also help improve load times and user experience with no real downsides.

Web Hosting

A lot of energy is used by websites in the data centre and in the transmission of data to and from the data centre. Careful selection of web hosting services can therefore have a big impact on energy efficiency and web page speeds. The following are the main points to think about.

14. Use server caching

For websites that use a CMS such as WordPress or Drupal, pages are generated dynamically every time someone visits a web page. This is very inefficient as it requires server processing for every single page view, increasing energy consumption of the web server.

Caching technologies like Varnish pre-generate static versions of each page so that the server overhead can be significantly reduced for most visitors. This significantly reduces server energy consumption and makes a big difference to page load times.

It can be complicated to set up but many hosts such as Kinsta and WP Engine now offer this option as an off the shelf feature, meaning that your website energy efficiency and web performance can be improved with little effort required on your side.

15. Choose hosts with a high PUE rating

Data centres are generally rated for energy efficiency using a metric called Power Usage Efficiency, or PUE. The PUE is determined by dividing the amount of energy entering the data centre by the amount of energy used to run the computers inside it. This then highlights the amount of energy being wasted on non-computational activities such as cooling. The typical PUE for a data centre is around 1.67, meaning that for every 1.67 watts going into the data centre, only 1 watt is being used to power the computing systems. High efficiency data centres such as those run by Google can have a PUE as high as 1.11.

16. Use a data centre close to your users

A lot of the energy used by the internet is used to transmit data through the telecoms networks. It goes without saying that the further the information has to travel, the more energy it uses on its journey. Therefore, selecting a data centre close to your target audience will help reduce energy consumption. For example, you might find a cheap web hosting package from a US based hosting company, but if your target visitors are in the UK or Germany then energy will be wasted transmitting data across the Atlantic. What’s more, this additional distance can cause a delay in page load times too, so locating your website in a  data centre close to your main audience will be good for user experience and for the planet.

17. Use a CDN

It’s all very well locating your data centre close to your main audience group, but in cases where your audience is spread around the world that is not so easy. Content delivery networks (CDN’s) provide a great solution to this, serving assets such as image files from a network of data centres around the world. This means that in most cases, the largest files will be loaded from the CDN location in the users own region, reducing the distance that data is moving each time a page is loaded. Once again, this improves energy efficiency and improves page load times.

18. Block bots

Akshat Choudhary from BlogVault suggested that blocking bots could reduce energy consumption. He said that “Bots often use up 50% of resources such as processing and bandwidth.

19. Dark Mode

Hazel Ho suggested reducing white space and embracing dark mode. Dark websites were one of the first techniques popularised for saving energy on websites many years ago and it faded away with the advent of LCD screens, which unlike CRT screens had a permanent backlight, using the same energy regardless of the colour actually visible on the screen. However, with the advent of OLED screens that light up each pixel individually, using darker colours is once again a viable technique to reduce energy on end user devices.

20. Use the latest PHP version

Katalin Juhasz from Kinsta got in touch to suggest that we should also think about the technology that is running on the servers to ensure that we use the most efficient versions available. Specifically, she mentioned that newer versions of PHP are not only faster but also use fewer server resources and therefore less energy. Kinsta have written about the benefits of newer PHP versions and the performance impact in this article. No doubt this will also apply to PHP alternatives too.

Final thoughts: every bit of effort helps

Reducing the carbon footprint of your website will probably not be a priority in your day-to-day life. We understand that completely. But it’s time to start investing in our future. The longer takes us to cut down on greenhouse gas emissions, the more damage we’re doing to our environment. Let’s make sure we’re doing what we can to do our part. The planet and your site visitors will thank you for it. So, let’s join forces and conserve this planet we call home!

Read more: Let’s improve your site’s user experience! 👑 »

Reviews

There are no reviews yet.

Be the first to review “A greener web, a greener planet 🌿”

Your email address will not be published. Required fields are marked *