When reducing the carbon footprint of a website, the first step is to understand how much CO2 it is already producing. Thankfully, in the growing field of low-carbon web design, there is a range of fantastic tools that not only measure your website’s carbon output, but offer useful tips and suggestions on where sustainability improvements can be made.
In this article, we’ll share some of the best tools for measuring the carbon impact of your website, and explain how best to use them.
Table of contents
Website Carbon Calculator
The popular Website Carbon Calculator by Wholegrain Digital is a fantastic resource for helping businesses get a quick overview of the environmental impact of their website. Simply input your site’s web address, and you’ll be presented with a quick report about your website’s emissions.
The report also provides real-world comparisons that make the results easy to visualise, for example how many trees would it take to absorb those emissions, or how many cups of tea could you make using the same amount of energy?
- Great top-level, easy-to-digest view of your website’s emissions
- Gives generalised tips for improving a website’s carbon footprint
- Lets you add a badge showing your score to your website (though of course this will add to the size of your page!)
- Calculations are based on an assumed 10,000 page views per month, so to get your actual emissions, you’ll need to do some sums using the number of monthly page views your site has
- Can only be used once a day, so not ideally suited for optimisation testing work
The excellent Digital Beacon tool by Aline gives a detailed breakdown of your website’s carbon footprint, including CO2 generated on the first visit and a return visit (after your browser has cached the common site files), and the size of the data transfers required to load it.
It also tells you the size of the key file categories that contribute to emissions, including images, scripts, fonts and stylesheets – all of which forms a fantastic basis for making improvements.
- Provides a detailed report about website size and emissions, with data about opportunities for improvement
- Keeps a log of the last 10 times you tested, so you can keep track over time of how improvements you’ve made have impacted emissions
- Allows you to adjust monthly web traffic to the number of actual visits, giving you an accurate picture of your website’s carbon output
- Available as a browser extension in Firefox, Chrome and Brave
Developed by Mightybytes, Ecograder is an amazing little tool that generates both headline measurements and an in-depth report about your website. At the top level, it gives your website a score out of 100 based on things like performance, efficiency and user experience as well as emissions.
It breaks your overall score down into categories including accessibility and page size, and gives you size, weight and emissions measurements for images, scripts, code and ‘other’. The in-depth report provides measurements from your site, and gives recommendations on how to improve things like server response times, the impact of third-party code and image sizing.
- Highly in-depth reporting, with actionable recommendations for improvement
- Goes further than simple emissions to measure things like UX, accessibility and hosting
- Explains the environmental importance of each area measured, with a ‘Why Should You Care?’ section
- Some categories require developer-level knowledge to understand and action
- Shareable report means you can send a copy to your web developer or IT team so they can carry out back-end improvements
Blacklight is actually a tool for detecting tracking scripts on websites. But seeing as tracking scripts have a huge carbon impact, running your website through the tool can help you identify any trackers you might not have known about (so, ideally, you can remove them).
It can also give you a good starting point for paring down the number of tracking scripts you have running on your site, helping you be more thoughtful about what you actually need, rather than what you might have been told you need.
- Finds and identifies tracking scripts across ads, third-party cookies, session recording and remarketing
- The generated report contains details about each tracker type, explaining why using them on a website might be ethically problematic
- Measures script use on your site against that of popular websites from around the world
- There are loads of useful articles about digital privacy on their blog
This open-source developer tool generates an in-depth analysis of a chosen page on your website, and covers everything from page-load speed to accessibility and SEO performance. Simply input the URL and the tool will generate a report that gives your page a mark out of 100 across a huge range of elements.
All this data provides a great basis for making improvements to your website generally, but it’s particularly useful in helping you identify where improvements can be made to speed things up and lower your website’s emissions.
- In-depth analysis of your website at the page level
- Available as a browser-based developer tool in Chrome and Brave (press F12 and click the Lighthouse tab)
- Available as a web-based UI through PageSpeed Insights
- Recommendations across a range of industry best practices
As awareness around the climate impact of our digital activities increases, more and more organisations are looking for ways to help businesses practise sustainable web design and bring their website emissions under control.
The carbon calculators in this article all offer a fantastic jumping-off point for businesses to reduce the carbon impact of their websites and start operating online in a way that’s better for the planet as well as good for business and good for customers. As an eco-friendly web design agency, we test all the websites we build with many of them.
We’ve looked at how these tools can help you:
- Identify page speed improvements
- Understand how image size can cause page bloating
- Improve user experience as well as your website’s eco-friendliness
- Protect your customers’ privacy
- Understand how changes you make are impacting your website’s emissions
- Improve your chances of being found online by the right audience, not just a bigger one