Sustainable.devBETA Menu

Posted to Resource on September 6, 2020

Contributed by Laurent Devernay

How to Audit your website on a budget

Acknowledging the fact that the web has a huge carbon footprint, it seems mandatory to reduce the impact of websites. To get started on that, you could run a LCA (Lifecycle Assessment) but not everybody can afford that because it takes time, tools and some technical knowledge. The purpose of this article is to offer an easy and free way to audit a website, so that can anyone can afford to.

This article is based on the audits and testing that Laurent Devernay ran for a few months with his students. The full study can be found on his website (in French).

Sustainability audit’s for those who don't have a lot of time

The approach here is quite straightforward. First, install GreenIT Analysis, then, using Google Chrome, press F12 to open the developer tools and go to the GreenIT Analysis tab and launch the analysis. Make sure the "Activate best practices analysis" checkbox is checked.

If your EcoIndex appears to be A or B, you're mostly good to go. Check the best practices to identify some quick wins if you want to do even better.

Starting with a C EcoIndex (or worse), you should look for failing best practices. In my opinion, in that case, you should go for a more thorough audit, which is covered in the rest of this article.

Choose the right approach

To get started, identify the service(s) you want to audit. A digital service can be roughly defined as what your users come on your website to accomplish:

You can then browse the website, trying to achieve just that and get a first idea of the pages involved and the complexity of the task. You should then audit each of these pages. For a more generic approach, you can also audit a sample of significant pages. Audit the homepage then look for these pages:

Keeping roughly 5 of them is a good start. If you have any analytics on your website, it should help you focus on the most visited pages.

Get the right tools

The choice here is restricted to free tools.

GreenIT Analysis

This was already discussed here. It's easy to use, offers accurate measurement and checks some sustainability best practices. It should be noted that it exists on both Chrome and Firefox but the Firefox version lacks some measurements (due to at-time-of-writing missing APIs).

Fast or Slow

Fast or Slow is a performance tool (among many) but a very thorough one. It gives you recommendations, best practices, measurements from all around the globe, etc. You can also leave an email address to get a weekly update on your stats.

Wave

Wave is an accessibility auditing tool. Why should you use it? Because if some pages have accessibility errors, your users might be found fumbling around and cause the electricity toll to rise. It is essential to consider sustainability through accessibility, performance, design, security and other subjects.

A note on SEO

SEO also has a role to play regarding sustainability. If your site is the right place for your users to do whatever they want to do, it should be made easy to find.

Keep the right indicators

Thanks to the tools listed above, you will get a lot of information. Here are the indicators you should keep an eye on to get a good overview but also something to compare with other websites and services.

Indicator Type Tool
EcoIndex Calculated GreenIT-Analysis
Page size (KB) Measured GreenIT-Analysis
Number of HTTP requests Measured GreenIT-Analysis
Number of DOM elements Measured GreenIT-Analysis
Greenhouse Gases Emission (gCO2e) Calculated GreenIT-Analysis
Water Consumption (cl) Calculated GreenIT-Analysis
Performance Score Calculated Fast or Slow
Number of accessibility errors Calculated Wave
Number of contrast errors Calculated Wave

The Performance Score is great but if you or your users/clients already have some awareness on Performance, you should go for more specific indicators (such as First Contentful Paint, Time to Interactive, etc).

Keeping track

If you audit the website for your team or a client, there are a few things that should be written down. You should write a document containing:

For each service, you should note:

As a conclusion, you should note everything that went well with the website. It is important to focus on what is done right. Only then can you focus on what can be done better and how. It is important to note what the next steps are, in order to reduce the carbon footprint of the website.

Identify the next steps

After the audit (and in order to write a proper conclusion to it), you will have to look through all the recommendations from the different tools. Some tools give you insight on how to implement them and the expected results. I recommend browsing the web eco-design checklist from the Collectif GreenIT. There, you will find 115 recommendations and, for each of them, an estimated Priority (1 being the most urgent). This might prove useful to know where to go next.

If you start doing modifications on your website, it is heavily recommended to start auditing it on a regular basis. Fast or Slow can then play the role of the canary: get notified each week and watch the performance indicators closely. An improvement is always great but if you see some decline, it is often a sign that there are issues with the sustainability of your website. It should be time for a quick audit. Look for what has changed on the website.

Conclusion

This is only a first taste on measuring and maintaining the sustainability of your website. Keep in mind that you can find other meaningful impacts by choosing the right hosting and technical stack, designing with sustainability in mind, sharing content sustainably and removing non-essential functionalities.

Finally, you could add a page dedicated to the sustainability of your website containing what you did, how it went and what are the results of the audit. Keep open to suggestions and share what you learned; this is the best way to spread the word.