How we improved our Website Carbon Calculator score from 59% to 84%

Many people don’t know that every time a website is loaded, it is responsible for carbon emissions. In fact, estimates suggest that if the Internet were a country, it would be the world’s seventh-biggest polluter. Even if we can’t easily see the footprint that cyberspace leaves on our physical environment, the impact is certainly real.

As part of our #LetsGreenTheWeb campaign, we’re collaborating with tech workers in the Web Industry to raise awareness of the huge role that websites play in contributing to global carbon emissions. The thing that we want to shout about, is that making a website produce less carbon emissions has a lot of fantastic co-benefits such as faster loading times, better usability experience for visitors and often reduce costs in the long-term to sustain your website. We have every reason to get better at this as an industry!

So, we followed the recommended steps from our own Reduce the carbon emissions of your website Action Guide, and checked our homepage emissions using the Website Carbon Calculator. Here’s an account of what we did to increase our score from 59% to 84% on the calculator, and reduce the estimated carbon emissions from each page load from 0.72g to 0.22g.

How we achieved our starting score of 59%

Our first score taken on the Website Carbon Calculator was 59%. Not a bad score for our baseline measurement.

As Climate Action Tech is a community run by volunteers, working to accelerate climate action in our spare time, we have to approach our website as a work in progress. We know we can always do more, and our aim is of course to build a website that produces the absolute minimum of emissions.

But we have to be realistic about the time and skills we have available, and take a pragmatic approach to what we can do versus what we’d like to do. We don’t think we’re different to any other business or organisation in that regard – we all have time, skills and budget restraints holding us back.

So when setting up the first version of the site you see today, we made a few deliberate, yet easy choices to minimise our impact.

The website is made using our own hosted version of the open-source CMS, WordPress. This was a choice made because the code is open-source, and we have a good knowledge of how to get the most out of WordPress in the community. That helps us spread the load of managing the site among more people, making our online presence more sustainable over time. Web sustainability is a broader topic than reducing carbon emissions, and you read more about that on the MightyBytes Web Sustainability Guide.

Anyway, let’s stay focused on reducing carbon emissions and how we got our first score of 59%.

Hosting

Switching your site’s hosting to servers that run on renewable energy is estimated to reduce your site’s carbon emissions by approx 10%, so it’s certainly worth doing. A good hosting company will often migrate your site for free, making it usually a hassle free process. How to choose a green web host is a good read if you’d like some top tips on how to make this choice.

We chose UK based company Krystal and their managed WordPress hosting service for the Climate Action Tech website you see today. We chose Krystal, not only for their good customer support and fast loading times, but because their servers are powered by renewable energy. Additional as a company they have a clear, and transparent sustainability policy. Testing our site on The Green Web Foundation directory shows us that our hosting with Krystal is indeed listed as running on renewable energy.

WordPress theme

For those familar with WordPress, you’ll know that you need to choose a theme to install on your site. A WordPress theme controls how your site looks to a user and to some degree the options you have for laying out your content. We choose the Neve theme as the basis for our site because it is well-coded and loads quickly.

The speed of a website is an important factor to consider when thinking about its carbon emissions. It’s not a direct comparision – a fast loading site doesn’t always equal a site with low emissions – but it is a good guide. From reading articles like How Improving Website Performance Can Help Save The Planet, we knew that a performant theme would help us achieve a fair emissions score without too much effort.

What we discovered we could do better

For our initial launch our main priority was to get the site up and running with the right content and branding to communicate our goals. At this point, apart from the points mentioned above we didn’t put too much time and effort into optimising what we were doing.

After launch however, we were able to let the dust settle and take a look at how we were doing. Using number of different measurement tools including the Website Carbon Calculator, Lighthouse, Google Page Speed Insights and SiteSpeed.io, and the knowledge of an experienced WordPress developer, we were able to analyse where we could make improvements from our baseline measurement.

We spotted an obvious problem with our site’s media, specifically images and video. The file sizes of our images were generally larger than they needed to be, meaning we were transferring more data over the wire than necessary.

Every byte of data sent by your website consumes electricity. So reducing the amount of data being sent helps to use less electricity, and therefore reduce the emissions of our site.

Media optimisation

We started by looking at the images we were loading on each page and how we could make their file size smaller. We also sought other opportunities to remove any data being sent unnecessarily sent on each page load. Those familiar with website performance will know that image optimisation is a huge factor in how fast a website loads. For more information read What Is Image Optimization And Why Is It Important For A Website.

Here’s the specific changes we made with regards to media optimisation.

We replaced pngs with jpgs of smaller dimensions

We realised that most of the images in the site pages were pngs. This was the wrong format for the kind of images in question, which were complex images (like photos) and not vector based art. Different image formats hold varying advantages from one another, and those advantages can make a huge difference when it comes to filesize. For more info, check out 10 Types of Image File Extensions and When to Use Them.

We replaced all the inappropriate pngs with jpegs. When saving out the jpgs we used Photoshop and saved them at around 50-60% quality. Reducing their quality is fine in our context, we don’t need razor sharp image and this approach makes some major file size savings.

A few examples:

We further optimised images on upload

There are other ways to further reduce the file size of images. One of those ways is to strip out other unneeded information from the images, such as metadata. This metadata is usually saved by a digital device when the photo is taken and includes information such as the camera make/model, shutter speed, aperture, lens model, etc.

This information is of little value to someone viewing an image on a webpage so can be stripped out.

We installed a plugin called Smush by WPMUDEV to do this for us. This doesn’t make as much improvement as getting the right image format in the first place, but it quietly works in the background with no further input needed once you have installed it, and provides an easy marginal file size saving on each image.

We set the site to lazyload images and video

Lazy loading is a technique for only loading images when a user is going to actually see them. You can read Use lazy-loading to improve loading speed to get a great overview on this topic. By not transferring images that aren’t going to be seen, you can send a lot less data over the wire.

We installed a plugin called Lazy Load – Optimize Images by WP Rocket to make sure that all browsers made use of this fantastic filesize saving technique.

Minify and combine JS and CSS

Moving on from media optimisation, we also implemented a common web performance technique to minify and combine our site’s JS and CSS files. We used a plugin called Autoptimize by Frank Goossens to automatically do this for us.

Autoptimize minifies JS and CSS files by removing all the spacing that makes the code human readable, this makes the file size smaller. It also combines the CSS and JS into one file respectively which means the browser has to make fewer requests to get the assets it needs from other places, which is also faster and uses less electricity. However, the combination side of things is unlikely to make a huge difference if your site is using the HTTP2 protocol, which is most likely.

Plugin clearout

Another issue that can dog WordPress website performance is the careless use of plugins. Using a plugin in itself isn’t bad, but using too many or choosing plugins that aren’t well coded can give you a performance headache. One of the last steps we took was to do a plugin review and make sure that any plugins we didn’t need were deleted from the site.

There are a few reasons why we want to get rid of plugins, or in fact any type of third party code that’s not being used:

• You will still be encouraged to make updates to the code even if its not in use. Code updates will transfer data to your site i.e. the new code, and that consumes electricity. Binning the plugin stops that happening.
• In some cases an activated plugin will load assets into your site even if it is not being used, and those assets will be downloaded by your browser when you view the site. Again another data waste that’s easy to take care of and also makes for a faster loading time, which your users will appreciate.

Summary

In all, it took an experienced WordPress developer about three hours to diagnose these issues and remedy them. Given the significant improvements to our Website Carbon Calculator score, we’d say those were three hours very well spent for our site visitors, and of course also for the planet.

Future improvements

As we all know a website is never done, and we of course want to make our website emit as little possible. Here are a few other things we want to try when we get the chance:

Replace a few of the other site’s plugins, in particular The Easy Social Icons plugin. This loads 35KB of CSS to style two icons in the footer of the site, and this is definitely far too much for the visual change we get in return. We’d like to find a better alternative to this.

We would also like to enable a CDN (Content Delivery Network) as we have visitors from across the world and currently our servers are based in the UK. A CDN would put our content nearer to our visitors and this means the data from our site has less distance to travel. Less distance to travel = less electricity used to send the data = fewer emissions.

We’d also like to make use of a more modern image format called WebP. Typically you need to pay for plugins that enable your website to serve up these images. Webp is smaller in filesize but not supported in all browsers, so not as easy to upload that format, you need some code to detect the browser and then serve the right format for you.