How to analyze your website's carbon emissions

You can't manage what you can't measure. While I absolutely disagree with that phrase, there are some advantages with measuring and analyzing certain things. And one part is the carbon emission analysis of your websites and digital products. I think there is many, many more things we can't really measure yet, but we can still manage them. That's why I disagree with that phrase from the beginning. But as I said, there are definitely some really cool things we can do already to get a gist of our websites carbon emissions.

With that, welcome to the Green Web Podcast, a podcast about ecologically and socially sustainable design. I'm your host, Sandy Dähnert, a freelance UX/UI designer and researcher based in Cologne in Germany and the mind behind Green the Web.

One part of green web design is lightweight design and therefore reducing your websites data. Your websites push and pull requests, as well as the websites carbon footprint. And before we start, of course, the most eco friendly website is the one that is not existing. But once we need and have a website, we also need to know how to reduce the data and energy footprint of it as far as we can. And you might be familiar with the topic in general already, or also from my first episode about the topic I did about a year ago, a little bit more, I think, than a year ago, and things have changed a little bit. But I also want to get into the basics again in case you are new to the topic. So topics in the podcast will be what is the carbon footprint of a website? What tools are out there to measure the carbon emissions? Why does each tool claim a different CO2 footprint and how to work with it? How did those tools change over the last years and months, and what is not visible with those carbon calculators, at least in my opinion, and how to work with the tools and their suggestions in real life. Let's dive into the first question. What is the carbon footprint of a website? Well, websites are not just based on code, but also on materials. They are not just floating around in outer space, but they are actually hosted on data centers, are transported via telecommunication networks and are viewed on different devices. Those are all really very materialistic things data centers, telecommunication networks and devices. And when an Http request is sent from a device such as a phone or a computer, it will travel through an extensive web until it reaches the location where the website is hosted, maybe even several data centers. The data is hosted on. The request is received by a web server that will then process and send back the data. This will increase energy consumption on the server and all included devices in between. From the beginning to the end, the energy required to power data centers, servers, networking equipment and user devices contributes to significant carbon emissions and environmental degradation. Much of this energy comes from nonrenewable sources such as coal, oil, and natural gas, leading to increased greenhouse gas emissions and greater climate change. Sometimes it's not that obvious, but we constantly use energy while streaming music, watching series, scrolling through social media, reading emails, clicking on notifications, searching for a recipe on the web, watching cat videos. There are so many things we do not even thinking about what is going on in the back end of it, and you for your website. You won't just have the data from your own data servers or where you have your website located on, but maybe also from third party providers, from social media feeds, from whatever you have included in your website, your app, your online shop, whatever digital product you're having. So there's many different components included in the carbon emission of a website or a digital product. And the rapid expansion of digital infrastructure necessitates the extraction of finite resources such as minerals, for example, rare earth metals and water, leading to resource depletion and environmental degradation and mining areas, and additionally, the manufacturing and disposal of electronic devices contribute to electronic waste, so-called e-waste accumulation, further straining natural resources and ecosystems. So there is a huge bulk around the topic, and as we are building more and data heavier websites, we contribute to the need for new devices. Every single year, there is a new device and a new range and series of devices coming out. We need higher internet broadband and more data servers. Like 20 years ago, we didn't need 5G and super high speed Wi-Fi because there was not even websites that needed that much of that. Weren't that data hungry. We didn't need those massive data servers and data centers. It wasn't a thing. We didn't need it. But now we do because we keep continuing and building even bigger our digital products. And an extra megabyte here and there doesn't sound that bad, but if we scale it up and look at the monthly number of visitors, we start to see the whole picture. In an average website costs about 1.76g of CO2 emissions per page view. That's one of the statistics from Whole Grain Digital and the website Carbon Calculator. And with about ten K of monthly page views, that equals 211kg of CO2 emissions per year for just one single website. And that's just for 10,000 monthly page views. And your website might be like 100,000 monthly page views. And there is billions of websites out there, 1 billion websites, millions of new ones every single year. That is massive. So what tools are out there to measure the carbon emissions? And there is a couple of different ones. I won't mention all of the tools that are out there, because there are some smaller ones that are up and coming or in different languages as well. But I will share those that are currently my favorites, that have been around for a while, that are really dedicated into this sphere and the industry, and how to build even better calculation tools and are in English. So for everyone easily to get into, the ones that I most frequently use is one digital beacon, the second one Ecograder, and the third one Website Carbon. Digital Beacon is an awesome tool that I always like to use for website analysis. It shows carbon emissions, the page size, and many useful tips. It also has a website badge that you can integrate, for example in your footer, and that it shows the carbon emission of that single page to yourself as well as your users. And you have a great reference to hey, you're really caring for your website's carbon emissions. Ecograder is another tool that allows you to analyze websites. It also gives you detailed advice on how to make the site greener. It has a little bit of a different approach to things and how to display certain areas, which is great to dive deeper into as well. It's from Mighty Bytes, one of the agencies that has been in sustainable design for the longest time, and then website carbon, as I mentioned, as the third favorite tool of mine, is a simple tool that shows the website's carbon emissions compared to others and whether the site is hosted on renewable energies, plus, the website carbon website batch is also available. Similar to the digital beacon batch. I actually have that website Carbon Batch on my website down below. In the footer also displays the carbon emissions of that single page. And there is also a WordPress tool, the Website Carbon WordPress plugin that I love to use on my website, on clients websites that I put it in. It uses the same API and shows you then a list of your pages on your website and their emissions, which is awesome and really great. And there is a couple of other tools that I also like to use once in a while. There is, for example, the GlobeMallow browser add on, which is a browser add on that generates a report on the environmental sustainability of the website, and gives also a couple of advice on how to optimize it. It's a little bit more tech related and more for the tech savvy users, I would say. Then there is a couple of different tracking tools out there that start including carbon emissions in their statistics. For example, I use on my website with carbon that has been there for a couple of years already. I also know that Stats is showing carbon emissions in their statistics and both, like with carbon and stats, are cookieless tracking tools that I highly recommend to use anyways, instead of Google Analytics or any other cookie setting analytics tools. And you can find even more on my website in the tool list. But I know, especially from those two, that they show carbon emissions and just checking in once a month what carbon emissions that tool is showing me of that specific website. And if you're using maybe even website builders like Sprout and Eddie, two of the new website builders out there that really care for lightweight, sustainable websites, which is awesome in its own way. Um, they also show carbon emissions in their statistics, right in the website builder. Which is awesome. And then if you do have like mobile and web applications, public applications, not yet published things, then I would recommend GreenSpector and getting into how to work with that specific application settings and how to analyze those carbon emissions. Because all of the tools that I listed earlier, they are only available for live public websites, online shops, but not for applications that are behind like lock ins or are not public or not yet published. Okay, those are my favorite tools. You will find the links to them in the podcast description, so no worries, they are all there and they do all claim a different carbon footprint. And I want to dive with you for a short second into why and how and how to work with that. Because I was so confused at the very beginning of well, what is right? What is wrong? What should I do with that now? Like looking into website carbon calculator and then into my WithCabin carbon emission statistics and then to Digital Beacon. It was just all different numbers and they are all based on different calculations and assumptions. It's one of the things that they are currently trying to get closer to each other. So there is a more standardized method behind it, but so far still like they are getting closer, but most of them still do have different. Calculations and assumptions below them, and different studies show various results. Every calculation is just an estimation. We still don't have absolute correct numbers, because there are so many factors that come into carbon emissions of a single page of a website, and all tools have different lenses and angles from where to look at those numbers. And that is one of the brilliant things, because we need to have different angles and perspectives and then get together to discuss, okay, how can we support each other, adjust our individual tools and calculators to get to something that is really valuable and more and more correct for the user who uses it? And most website carbon calculators look at the amount of data transferred, the sources from where it's transferred from, estimated amounts of energy consumed to transmit that data over the internet, carbon intensity constants that vary from each other, factors for returning visitors, and caching like those, are the main things that they usually look at. Plus, carbon emissions depend on many aspects such as data servers, networks, the electricity grid and users hardware. And most of the times we. When we put something in those calculators, we have no idea about the user's hardware. Of course. Is he or she looking at this website from their smartphone, from their laptop, from something even bigger than that and the electricity grid? What is currently at that specific moment of the user's request to get onto that website? What is the electricity grid in that exact moment? We don't know. It's an estimation because the electricity is changing through the day and through the weeks and months, and it's very different from the country and their electricity mix. So we can only estimate at the current moment. And all calculators factor them in in a different way. And that is why there is no one true number of carbon emissions. It's an estimation. Just look at the current page and estimate highly from that. Get a feeling for the footprint. Most tools tell you whether that website performs great, good or bad. And once you've measured several websites, you get a feel on yourself for what is good and what is not. Currently, it's more about the comparison in between different websites as well as your different states of your websites. Once you start optimizing it, and it's a great way to start discussions in your company and your team, with your colleagues, with your clients, um, whoever you have discussions about any kinds of KPIs with. So how did those tools change? Over the last years and months, there has been a lot of discussion around those tools, their measurements and their progress. And I would say in the last 1 to 2 years, it got more intense as there was more calculators coming out. It's a beautiful thing that different people try to find different kinds of access to the carbon emissions, the carbon footprint, and how to have different mindsets in how to measure that in the most accurate way. And what I see is a huge improvement over the last, especially two years, but also in the last five years in those tools, not to imagine how far we will come in the next years with them. There is a lot of pressure around on those tools nowadays because we are more people talking about it. That is a brilliant thing because it is more widespread. The topic in general, more people are using it, more people need to understand it. So those tools have to become more understandable, clearer in their descriptions, but also have more pressure as well as hopefully investors to get those things even more accurate. And in the last months, there have been a couple of changes, especially for standardized ratings. Before that, those measurements were quite distant from each other. Now, as I said earlier, already they become closer and there is a first standardized rating with the digital carbon rating system developed through the Sustainable Web Design Collaboration. I also linked an article about it down below in the podcast description, and there is now ratings from A+ to F as we know it, from refrigerators and other things around, and you can even learn a lot more. From it from the sustainable web design website. As I said, it's linked down below and you can get a better feeling for the rating itself, whether you're doing great or not. But also there's standardized aspects and factors behind those different ones, like a plus. What does it actually mean? A b c d e f? What do those actually mean is getting more standardized. And it's actually an open source methodology for calculating website carbon emissions. So everyone can access this rating system. And they are working on this rating system and hope to bring even more focus on it, but also developing and adjusting and optimizing it over time to get even clearer results for everyone. This way we have a standard scale that hopefully all calculators will use. I know plenty of them already do, but a couple not yet, but having a standard scale, it provides a universally recognized scale that enables digital product teams to understand how their website ranks against others. It's easier to set goals. It facilitates setting goals and page weight budgets, allowing people to measure and improve progress over time. Moreover, the rating system simplicity enhances communication by making it easier to convey sustainability criteria and finally, by removing the ambiguity associated with numbers. The rating system promotes transparency and encourages informed decision making in those different calculators. There's also new aspects included in that I sometimes feel like, okay, I have no idea what it is like. Recently I just saw in the Digital Beacon calculator there's now fetch and some other things that got in there, and I was like, what is that? And obviously when you're a web developer, you probably know what it is. But I as a UX, UI designer, I had no clue. So I actually got into the Climate Action Tech Network and just asked around. And hopefully there will be even more progress into explaining everything to noobs like development noobs like me, and to others who have no idea what certain things are. Other things like different statistics for images and media and fonts and stuff is quite clear, but certain things that just got into those calculators were not, at least for me, and I guess for plenty of others as well. So I hope there is much more improvement in explaining what is going on with those calculators, what they are showing, what the statistics are so everyone can easily use it and understand the statistics that are shown. Even though I don't always understand everything that is listed in there, because a lot of it is quite development heavy. It's an easy entry into green web design. There is no hurdles, no sign in, or a couple of them have a little bit of a sign in, but no payment. It's all free. That's why I really love them and want to encourage everyone to check them out. It gives you a feeling for what is good, what is not good. It's also, though not the answer to it all. There's so far no possibility to really grasp the carbon footprint of a website, of an app or a newsletter of any kind of digital product, but it gives you an estimation and a first step into what is a website's carbon footprint. What I think, in my opinion, is not visible with those carbon calculators. And what I think is missing is a couple of different things. So those carbon calculators, they are super useful. I'm so incredibly grateful that they are there and there are certain things we can measure with them. But there's also a couple of things we just cannot measure with those calculator, because we still have to do our own audits. For example, all of those like multi-step forms, they are not calculated interactions, requests and data that comes up at a later stage in the usage of a digital product that's not in there to have other digital products, such as documents or emails. It's not in there to have downloads, things that need to be downloaded from the user, like all kinds of different things from insurances or plane tickets or anything like that, anything that has to be downloaded, there's nothing of that in the calculators or anything that has to be uploaded. And then having, for example, opportunities to upload megabytes and gigabytes of user content somewhere, it needs to be stored on data servers. Again, that's. Not calculated in those carbon tools. That's why I also love to go through my like ten energy eating monsters that I often talk about that I also share in my green UX UI design course, and I talked about it in the episodes and past episodes here and on my Instagram and stuff, to have a look into certain things that you just can't measure or you cannot measure with those tools, because there are just in a later point in the usage of the product or or just not easily calculated with any kind of tool. And that comes especially in terms of storage variations on a website, color or click paths cannot measure that with a calculator. Whether that's good or not or whether it can be reduced or not, it's a thing we still have to audit. Still, I love those carbon calculators. I just want to mention it here that it's not the full picture. There is still a couple of other things we have to have a look into. And a carbon calculator is don't just say, well, this is your number and then all is good and perfect and uh, happy rainbows. But there is more to it than just that. So how to work with the tools and their suggestions? I actually use just my favorite ones most of the times and have a look into all different ones so I get more of a feeling and a gist of what might be like. The correct number might be somewhere in the middle. I'm quite pragmatic about it and use certain things at certain times. For example, the website carbon result is very strong in color and visual appeal. If you have a really bad rating on your website, you get a huge red screen saying this is really bad and if you have a great website, it's like bright green. Um, it's awesome to use in meetings with colleagues and clients and stuff, because then it's quite obvious what the result is. I like that for that. If I want to go deeper into things, I use more the eco grader or digital beacon. If I want to look into WordPress websites, I love to use the website carbon WordPress plugin, for example, or also having those badges down below in the footer. So I always see, oh, why is that single page so much heavier than any other of my own websites? Or also if I see it from other websites, I love to have this transparency and pick and choose what calculators I usually use, because you cannot use all of them all the time. And also how, as I'm a freelancer, do, um, huge applications and websites and online shops, but also smaller pages, for example, on WordPress. And every single client needs something different. So pick and choose what is actually valuable for you or what is most helpful for you, but also for your clients. If you also work as a freelancer, for example, and there is no right or wrong, it's just getting into your own workflow and using things over and over again to know how to interpret the results that those specific tools are giving you. And if there is a client that I feel like, okay, we cannot really go into carbon emission statistics yet, maybe, um, I always try to go via like Google PageSpeed insights and give them like other reasons, for example, performance reasons to say, well, the performance of this website is really bad and the reason for it is the size of the images, and then they can work on that based on like more common statistics than carbon emissions, and just mix and match what is most suitable to the client and their mindsets. Let's say this way, um, again, I listed all of the links down below in the podcast description, but also in my green tool list on my website. I am very happy that all of those tools are existing. They are incredibly helpful. But as I said, also not the only source of truth and not painting the whole picture, but a part of it. Luckily there is more standardized ratings coming up or have come up already and there is more progress and working together.

So I guess there will be so many more beautiful things coming out of that in the next months and years of collaborating between those different calculators. And yeah, just get into it, try it out, try 1 or 2 or three of them and see how you can work with it. If you understand everything, what's appealing to you again there? There is no right or wrong and let me know. What is your favorite carbon calculator? Do you know any other ones that I haven't mentioned, but you feel like those should definitely be in the list. Then let me know. Let me know on Instagram. Let me know on LinkedIn or to send me an email.

Subscribe to the Green the Web podcast where I'm talking about loads of ecologically but also socially sustainable UX/UI design topics. This is season two of the podcast, so dive into the many awesome episodes that are already published. Rate the podcast! I'm always so excited to see that there's many people rating the podcast on Spotify and also on Apple Podcasts. It really lights up my heart and visit me on greentheweb.com. There is actually a new group live cohort of the green UX UI design course coming up. If you're keen on getting in there, just sign up. I'm happy to hear about your thoughts on today's episode. Connect with you to read from you as always, and then see you in the next episode.