Measuring a website's carbon footprint

Welcome, everyone, to the Green Web podcast, a podcast about ecologically and socially sustainable design. I'm your host, as always. Sandy Dähnert, a designer myself.

In today's episode, we will get into a little introduction to measuring a website's carbon footprint. There is a lot of things that we can consider in measuring a website's carbon footprint and reducing your website's CO2 footprint is just one part of green web design, and it's actually one of the easier parts that we can do.

So in this episode we will talk about what is the carbon footprint of a website. We will talk about the tools that are out there to measure the carbon emissions. We will talk about why does each tool claim a different CO2 footprint and how to work with that, and yet how to work with those tools and their suggestions in general. So let's get right into it.

The first question that I want to raise in this podcast episode is what is the carbon footprint of a website? And there is a lot of discussion around that. The things that are most common to think of are the data service that the website is located on and hosted on the telecommunication networks that transport the data from the data servers to the devices where the website is shown as well as the devices themselves. There is a couple of like first level, second level and third level emissions in there because of course we can look at also the devices, their manufacturing process and how it's produced and stuff. But is this really the carbon footprint of a website? There is a discussion around it, I think not. But there is also a couple of other extra things to look at. Like the total footprint of a website over its lifetime from really the first creation, putting it out there up to the time where it gets relaunched or even unpublished. It's about the average size of a web page. It's about the usage of those pages, like how many people are actually going onto those different pages of one website. There's a couple of things or quite a lot of things to look at when discussing the carbon footprint of a website. Of course, the first thing is data service. The website or digital product doesn't just float around in outer space. It's lying somewhere. It's hosted on a data server, maybe even on several data servers and maybe even far away from where you want to exit it or where your users want to exit it. And you won't just have the data from your own data service, but maybe also from third party providers, from social media, from whatever you have included in your website or your app. So the data servers in themselves have a carbon or energy footprint with using electricity to run and to be cooled down with electricity or water. Plus, there is a lot of discussion around performance. What exactly is green hosting and so much more like This is a topic in itself that is in depth. But just to keep in mind, data service do have a footprint, a huge footprint as we have a lot of data servers and you definitely in one website most of the time have several data servers that serve this website to be shown on a user's device. Of course, you have the telecommunication networks that deliver the data and that transfer the data to your users or to you. And then you have the devices that the website is being displayed on. You have a lot of steps in between and around, such as the energy mix of the country the data service is in, as well as the devices that the user is using it in. We do have a couple of assumptions already, but it's not that easy yet to really find out the exact carbon emission of a website because there are so many different factors that we have to put in this equation. But in general, keep in mind there is energy consumption in hosting the website. There is the delivering process as well as the viewing process of a website and app or any other kind of digital product. Plus all those factors, those especially energy factors around the data service, the telecommunication networks, the devices and the actual usage of this web page. It could be a huge website with one visit per month. It could be a really small website, but with millions of users visiting this website per month. Of course, there is a different footprint. So we have to keep this in mind and put it into consideration. So. We know that there is a carbon emission of websites and all kinds of digital products. The question is what tools are out there to measure the carbon emissions? And I have my favorites that I use all the time. And there is a couple of more a couple of other tools out there that I've heard of, some that I haven't tried out myself yet. The ones that I use the most is Digital Beacon, EcoGrader, Website Carbon and the Globe Mellow browser add on. I have linked all of those tools down below in the description, so you can just click on there. You don't have to search for it, but easily find it in the description. And there is a lot of discussion around those tools, their measurements and their progress. And as we've seen from the first part of this episode, the carbon emission of. A website is hard to put into words like there's so many different factors. There was a whole list of things to consider, and each tool does that in a different way. In the beginning I was super confused because every single tool tells you a different CO2 footprint of your website. And I was like, Why? I don't get it? Because I was just not very aware of the energy equation that lies beneath every calculator. But now, knowing that it's not that easy to have an exact number of a carbon footprint of a website or a digital product, understand, okay, those are all just estimations and like ways to see more or less where your website is standing. Each tool is based on different calculations and assumptions. Different studies show different results. Every calculation is just an estimation. All tools have different lenses and angles from where to look at those numbers, and that is okay. We need all of those different tools to get closer to what carbon emissions for websites or digital products actually are. Most website carbon calculators look at the amount of data transferred to 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, users and caching. There's a lot of things that they already put in knowing that carbon emissions depend on many aspects, such as the data service networks, electricity grid uses, hardware, all of those things. We know that there is no one true number of carbon emissions, at least what we know. Yet we also usually put in to those calculators the current page. Most of the times it's the home page that we put in and there comes an estimation from that for the whole website. But it's usually just a page that we put in that this calculator is analyzing, which means all of those calculators are really, really helpful, but they are just estimations and they're to give you a feeling for the footprint rather than an exact number because there is no exact number. What I see is a huge improvement over the last four years in those tools not to imagine how far we will come in the next years with them. It's an easy entry into green web design. There is no hurdles, no sign and no payment. It's all free. That's why I love them and want to encourage everyone to check them out. I know there's some discussions around how valuable those numbers then actually are. If they are not like the one correct carbon emission numbers, but I find it so valuable and an easy intro into making a website more lightweight and carbon emission reduced. At least I know it's not the answer to it all. There is so far no possibility to really grasp the carbon footprint of a website or an app of a newsletter of any kind of digital product. But it gives you a first step into what is a website's carbon footprint into the feeling for it. Most tools tell you whether that website performs great, good or bad. Once you've measured several websites, you get a great feeling yourself for what is good and what is not. So what I use those tools for is especially long term comparison and to get into discussions because it's so helpful to put in your website into one of those calculators and it tells you that your website is really, really bad. It tells you in red as well. And then you screenshot that and you show it to your stakeholders and then you're like, Yeah, you have a visual. You have actually a visual to present to someone that this is not great. Just for that. I love it. So let's have a look at my favorite four tools that I always use to analyze websites. The one that I use the most frequent is Digital Beacon. It's an awesome tool. It's done by designed and created by Align, which is a little agency by Chris Butterworth. It's really, really helpful. It shows CO2 emissions. It shows the page size. It shows so many things on a content type level. That's what I find the most useful in this tool. So you can see what's the size and CO two emissions of. Images on your website of fonts, on your website, on third party tools, on your websites, on animations and interactions on your website, you can really see what are the most problematic parts of your website just within this tool. That's so valuable. And then I immediately see, okay, there is three megabytes of images, so I know this website could be easily a lightweight website if they just scale and compress the images right away. Done. Perfect. Sometimes it's more the fonts or it's the script. So it's the JavaScript, for example, where things are interactive. That's why we use JavaScript for. Then I know, okay, this is the part where we need to dig in to. Amazing. Like, really simple to look at. And to dive deeper into those little things that I can see. That's the reason why this website is rated bad, for example. Plus, it gives you a lot of advice down below, a lot of advice that is more technical and more on the development end of website creation. Some things that I even don't really understand, but that is okay as well. Plus a couple of things that are easy to understand for your UI designers as well, and to really give awareness to in the creation and the design process. Big recommendation to go for this tool and to put in your website in there. A second tool that I really like to use is EcoGrader. It's quite similar to what it does. It also gives you detailed advice on how to make the site greener. It's done by Mighty Bytes. It's an agency that has been in this green design bubble for a very long time. Really admire it as well. It's just a different form of showing you those analysis. Just test it out. Which one is more for you? I really like both. And do mix and match them. And when I'm in a new process for a new website, for example, that is already existing and I just have to do every brush or optimizing the UX or something like that, then I definitely look at the two of them. If I want to have a really, really intense visual, if a website is especially when it is bad, then I go to website Website Carbon is a very simple tool that you put in your website and then it tells you in a very visually prominent way whether it's better than 50% of websites out there, then it's good or worse than that, and then it's in pure red. It screams at you that your website is really, really bad. It also tells you whether your website is hosted green. So those are the two main things that it gives you, plus a carbon emission stat. And I think it was I'm not really sure about that, but I think it was the first tool or one of the first tools that was out there for carbon emissions, for websites calculating it. And they have those little comparisons down below where you can see how many trees have to be planted to compensate this emission of how many sparkling bubbles are equivalent to it and a couple of other fun. And yeah, sweet little comparisons to put in that you can use for presentations especially and discussions with stakeholders. There is also a website carbon website snippet that I for example use on migraine, the web website as well as have seen on many, many other websites as well. Plus there is a WordPress tool that you can use that like a WordPress plug in that shows you or analyzes every single page. Of your WordPress website and gives you an overview of what are the bad and what are the good pages of your website in carbon emissions. Really helpful, really like that. So you don't have to go through every single page of your website individually, but I actually have it with this plugin just right there as an overview. I can highly recommend that. And by the way, website carbon is done by Whole Grain Digital, one of the first agencies that has been around for. Light weight and green design as well. Really love it, especially for the visual aspect. Love using that. And then the fourth of the tools that I wanted to recommend here is the global browser add on, and it's a browser add on that generates a report on the environmental sustainability of the website, gives you advice on how to optimize it. It's really easy to go in. It's a lot smaller in like those little details that it gives you and statistics and all that, but it's browser add on so you don't have to do much other than click on a browser add on. If you just want to have a little checkup and gives you some extra advice and tips and tricks to go for, just check that out as well. Easy to put in. Yeah. Those are my four favorites that I actually use constantly, and I'd give me a great estimation of where this website is located in good or bad spheres in carbon emissions, Digital Beacon, EcoGrader, Website Carbon and the Globemellow browser add on. I really constantly and frequently used those ones and what I actually do, how I work with those tools and their suggestions is I get a website request, I put this website and all four of those tools and get a first feeling of where this website stands, where to look at, what are the most immediate things that we need to do or that I can highlight in that is what needs to be done and write down those statistics and just look at the main things and plan from there. So I see in Digital Beacon, images and script are really, really heavy. I see an echo grader. The statistic for X, y, z, I can reduce it and optimize it and this and this and this kind of way. So I put those things together as a little audit and then can go into discussions with the client and tell them why I would do certain things a certain way. What I definitely want to add to how I work with the tools is they do have a lot of advice that are technical. I do look at all of those things for sure, but I did go nuts with looking at all those things and not understanding certain things that I went to being pragmatic, picking and choosing the things that I can do, but also telling the client and the developers. In this project that please look at those statistics and look at the things that those tools are telling you. Because I can't do everything. As a U.S. designer, I can do only a certain amount of things. And those tools are really, really valuable for developers as well, maybe even more for developers. So I do use them for myself, but just up to a certain point. And then I share those results with others that are in the team, that are in the process around this website or a digital product, and tell them to use the rest and to get deeper into what they can optimize and improve around those things. Plus, as I said before, I share those statistics, and especially for example, the website carbon visuals for discussions and to underline why I choose a certain way of designing things, I can use those statistics to say, Yeah, it's because you, your website has this and that problem. That is why I would suggest this way to going forward. There is always no right or wrong. I just used those statistics to help me design in a better way or to do this audit and to tell the client how to do it in a better way. So my biggest, biggest advice is don't get overwhelmed with those different tools, because I got overwhelmed when I first looked at them and thought, Oh my God, I. Could like, there is no chance that I can do all of those things. How do I understand all of those advice? And you don't have to. If it's not your sphere, you don't have to. You can just. Use it to share it with people that do things in this area. Plus, there is two other tools that I really like to use for discussions. When I see, for example, that this website is really bad in carbon emissions and the page size is really big, and maybe, maybe the client that I'm talking to is not really into carbon emissions, doesn't really look at those things, but is really, really interested in performance as every client is into performance of their website. I use a little trick and go via metrics or Google page speed insights. Those are two other tools that I put in the website and it shows you information on loading speed on blockers of the website on all kinds of performance statistics that I can then use to say, okay, your page size is this isn't this big, It loads this and this. Slow. Really, really slow. That's why users are frustrated and bounce from your website, for example. This is one way of putting things. Of course, if we want to reduce the page speed, we have to reduce the page size. This way we also reduce the page. Carbon emissions did it, did it like there is ways of communicating carbon emissions in different ways, like with page size and page performance and speed and stuff. And you can definitely easily do that with the tools of Google page speed insights as well as cheat metrics. There's other tools out there of course, as well. Those are two tools that I often use. They also give you as well as especially in the development realm, a lot of tips and advice for improvements and optimizations. Many, many, many, many tips are there that you can just send along for development as well. And they are extremely helpful to get into those discussions and to get more of a bigger picture. So I bombarded you with quite a lot of tools today. Just to wrap it up. We had a look at what is the carbon footprint of a website. And now knowing that there are so many different aspects of carbon emissions in digital products, that we do have tools out there to analyze those carbon emissions. But there are no perfect or exact numbers yet. We just get an estimation into where this website or digital product is located more or less. But we learned that those tools are out there to help us get a feeling for is this website good? Is this website bad? As well as seeing the improvements over time? Because you can test it over time again and again and you can see whether you improved your website to the better or maybe to the worse. That happens definitely as well. But it shows you exactly where you're standing at right now in comparison to where you've been before. And we know that there is different carbon emission footprint statistics in every single tool. We know that it's okay. It's just because of the different calculations that are lying underneath. And they will get better and more evolved and more studies will be taken on this. So we will learn even more about it. And we also know that we can, as designers, look at certain things in the tools, certain statistics that help us for an audit or help us in improving this website. But we also know that we don't have to understand every single advice and every single tip that those tools and calculators give us. We can bring it to other team members, especially for developers and yeah, share it with others that they can do their part as well. Digital Beacon, Ecograder, website carbon and globe mellow browser add-on are my four favorites. If you have any others that you really, really enjoy using, then please let me know on Instagram or on Linked in. I'm really excited to hear about that. And yeah, you can find all of the links down below in the description. You can find all of the tool links on my website GreentheWeb.com/tools as well. Really easy to remember.

And that's it for today. Subscribe to the podcast. Share this episode with your loved ones and people that you think you need to hear about this podcast today. It's just a really awesome way for others to find this podcast and to find this episode. If you feel like others should check it out, then share it as well as give this podcast a rating on Apple, on Spotify, on any other platform that you are listening to, it has really, really helps a lot more than you think. And yeah, follow me on Instagram or LinkedIn at Green the Web. Check out all the free resources on my website. There are so much more to discover and spread the joy of getting into this beautiful green web design sphere. It's it's such a lovely one. You can be really creative in it. I'm a big advocate for it and I'm really excited to have you on board in the next episode as well. See you next time.