#177 – Charlotte Bax on Reducing Your Website’s Carbon Footprint  ## Metadata - Author: [[WP Tavern]] - Full Title: #177 – Charlotte Bax on Reducing Your Website’s Carbon Footprint - Category: #podcasts - URL: https://share.snipd.com/episode/f3ed5c9f-4885-4ab9-8783-08d3f43aad3f ## Document Notes ## Highlights - **Charlotte's Sustainable Web Journey** - Charlotte Bax transitioned from sustainable lifestyle blogging to sustainable web design by aligning her passion with her technical skills. She founded Enor Toolbox to bulk measure website CO2 emissions. - She emphasizes making sustainability an integral part of web design through practical tools and advocacy. Transcript: Nathan Wrigley Would be helpful too. Yes. Charlotte Bax Well, I started out as a sustainable lifestyle blogger really like in 2000 and something. And I didn't really feel like I was at the right place in my work at that time. I was doing a job at the service center for ICT. It was really overwhelming. So I decided to make my hobby into my work. And I chose the web design side. And after only a year, I think, I stumbled upon a sustainable website challenge by some Dutch guys that I got to know then. And that was a missing link between my sustainable lifestyle and my work as a web designer. So I really went down that digital sustainability rabbit hole and I sort of rebranded myself as a sustainable web designer under the name of DigiHobbit. Well, so I'm building sustainable websites for quite some years now. Two years ago, I really wanted a tool to make estimating the CO2 emissions of websites easier because, for example, Website Carbon by WholeGrain Digital. I love that tool. And there's also some other tools I really love, but you have to copy paste every single page of a website in there. So I wanted the tool to do that in bulk. So I asked a friend to build me a tool to do that really easily. And he did. And that sort of escalated into a full blown startup. ([Time 0:03:58](https://share.snipd.com/snip/aa874bc1-e9f1-4fe4-a15f-9f1c49d57391)) - **Internet's Huge Hidden Footprint** - The internet's carbon footprint rivals major industries, ranking as the seventh largest global polluter if considered a country. - The pollution impact is hidden from users, creating a disconnect between usage and environmental consequences. Transcript: Nathan Wrigley To 10% is related to ICT. I would never have suspected it because it's completely divorced. I switch my computer on, there's no pollution in my house because of that. It's happening elsewhere. So how does ICT rate? If it's 8 to 10%, where does it sort of slot into all the other industries? Charlotte Bax Well, it's more than aviation. There's this book, Sustainable Web Design by Tom Greenwood. There is this graph somewhere quite in the beginning that puts the internet, if it were a country, it would be the seventh biggest polluter in the world. So that's really, really big. And you don't see it because all the pollution happens elsewhere. Like you don't have a data center or an energy plant in your backyard. It's all hidden away. Or there's those big boxes next to the highway, you know. You don't see it. And in Dutch, we call it far from your bed show. ([Time 0:07:37](https://share.snipd.com/snip/ad6e596f-95d3-4266-a935-e44f80009dea)) - **Choose Green Web Hosting** - Choose green web hosting certified by the Green Web Foundation to reduce your site's carbon footprint. - Verify if your hosting uses renewable energy through their online database or tool for easy sustainability checks. Transcript: Charlotte Bax Organization, the Green Web Foundation. They have this database of web hosting providers that are using renewable energy. And they have a tool you can put in your website and see if your website runs on renewables. And if you are a web hosting provider, you can send evidence to the Green Web Foundation that your data centers are running on renewables, so they can add you to that database, which is Also very good for your reputation as a web host. Nathan Wrigley Right. Okay. So as you say the things that you mentioned in your talk, I'll throw them back at you just so that we're absolutely certain what we're talking about. So every website, obviously, well, most of them need some kind of hosting environment. And what you're saying is go out and be proactive. Look for this badge, this Green Web Foundation badge. They've done the hard work, if you like. You can be certain that if there's a Green Web Foundation sticker on there, there has been an exchange to and fro between the host and the Green Web Foundation. And they classify that as sustainable. What does that mean? Does it mean that like is it 80% of their energy consumption is renewable or 100% or do you know? Charlotte Bax I don't know that exactly. You should ask Chris Adams but there also yeah I learned that also from that book from Tom Greenwood you can make a difference between certain ways of using renewable energy such as like Actually producing your own renewable energy by having solar panels on the data center, for example. You can invest in green energy, you can buy it from a green energy supplier. And there's a fourth thing, and it is that you buy certificates from other countries. And that, yeah, I think that's greenwashing but as far as I know they don't show that yet in the Green Web Foundation database I have contacted them like months maybe more than a year ago About it whether they would do that and they were open to the idea I think someone was even working on it but it just takes a long time because they are not a commercial party, of course. They also just run on subsidies and they have just so many resources. Nathan Wrigley Okay, so there's the first piece. There's one thing that you can do. That's a really easy, concrete thing to do. We all need the hosting. So when you go, go and look and have some trust in the Green Web Foundation's badge, if you like. You trust that they've done the due diligence and that that is in some way superior in the way that that energy is captured or what have you. Charlotte Bax Okay, so that was one thing. But I have a little disclaimer. Not all Green Web hosting providers are in that database yet. And not all of them show the badge. But it's really easy just to check your own website through the tool on their homepage. Nathan Wrigley Okay, thank you. Okay, what was next? What did you ([Time 0:11:53](https://share.snipd.com/snip/97b0c919-b188-4121-bf94-857e8648c314)) - **Optimize Site Architecture and UX** - Design website architecture and user experience to minimize unnecessary page views for visitors. - Efficient site navigation reduces data traffic and CO2 emissions by lowering server load. Transcript: Charlotte Bax You can make sustainable choices in your architecture and your UX design. Just make it very easy for your visitors to find things on your website so they don't have to go here and there to search for stuff and produce lots of unnecessary page views. Because that's all data traffic and that's all CO2 emissions. That's the thing you can do. Just think really good about that website architecture. ([Time 0:14:43](https://share.snipd.com/snip/5979daae-ea3e-4361-965f-4ad6b7bdb786)) - **Use Efficient Image Formats** - Scale images appropriately and prefer lightweight formats like WebP or AVIF for significant size reduction. - Use SVGs for icons and logos to ensure scalability and reduce file sizes compared to raster images. Transcript: Nathan Wrigley Okay, lovely. Next one. Charlotte Bax Next one is design and content creation. Yeah, what your website looks like. There's lots of sustainable choices you can make in the assets that are shown on the front end, such as images, video, audio, the fonts that you use, the CSS styling, etc. We could do a whole podcast on that alone. So things I talked about previously this morning is scaling your images. Be very picky in your images. Also, sometimes I see websites that have so many pictures on it. I think people are afraid to be boring or something. But use the that are actually valuable to your content to tell a story instead of just putting a thousand pictures on there just because because images they tell more than a thousand Words but also images are very very heavy compared to just plain text so I guess it's a couple of things there. Nathan Wrigley The first thing is use images when necessary. Yes. So that there's not unnecessary images being loaded, but also I'm imagining that we're probably trying to lean into newer image formats. Yes. So not only reducing the scale of the image so that it's the correct dimensions and it's not, you know, this giant image which is being shrunk in the browser needlessly downloading a Charlotte Bax Four megabyte image that really is like 150 kilobytes i saw this like on a government website that i tested and there was this a really small icon it was like 36 pixels wide or something And there was an image like 6 000 by 8 000 pixels loaded for that. And I was my heart bleeded. Nathan Wrigley Yeah, this should have been about 3k. And it was probably more in the sort of four or five megabyte territory. Charlotte Bax Yes. Yes. I don't know the exact numbers, but terrible. Nathan Wrigley But image formats are changing as well, aren't they? You know, in the past, we were everybody familiar with PNGs and JPEGs and things like that. And now we've got things like WebP and AVIF images as well. My understanding is that they are significantly reduced in their scale with no measurable difference in the way that you can see them. They look basically identical. Charlotte Bax Yes, yes, that's really nice. WebP and AVIF, they are web-friendly formats for your images and they are really lightweight. They also, they support transparent background and animation. So they are also really good alternatives to PNG and GIF, not only to JPEG. And what I also like is that you can change the image quality when exporting to that format. Just like with JPEG, you can say I want quality of 90% or image quality of 80% or even less. And when you're choosing something between 80 and 90%, usually you don't really see the difference. You can just play around with that on your computer, but ([Time 0:15:57](https://share.snipd.com/snip/7c61d049-95af-430a-a48b-d7453ccbaf87)) - **Avoid Autoplay Background Videos** - Avoid autoplaying background videos as they significantly increase site weight and degrade user experience. - Use thumbnail images that open videos on demand to reduce initial page load and tracking scripts. Transcript: Charlotte Bax On that and I explained I didn't know anything about the sustainability park yet by then but I explained that it is a big file that gets loaded automatically it really slows down your Website also so it's a bad user experience so I recommend that they didn't do it but they really wanted to but i really hate how some websites shove like an enormous amount of megabytes Nathan Wrigley Down your throat as a visitor by those autoplay background videos yeah and also i think there's a move to make it so that and i don't know if the block editor the video block automatically Does this i could be wrong about that the idea of having an image placeholder instead of the video itself because the mere putting the iframe onto the page there's some communication Between let's say YouTube if you're embedding something from YouTube whereas really you don't need to engage YouTube until somebody's actually clicked the play button so having Some placeholder there click the button click the image and then the video begins to load. I guess there's something there. That's a good idea. Charlotte Bax I have a trick for that. When you embed a YouTube video or a Vimeo, they do the preload is nothing really good, which is nice. So you don't shove that many megabytes through someone's throat. But what YouTube does and Vimeo also, but less is they put a lot of tracking scripts in that embed. So what I like to do is something I did for one of my latest websites for the Rotterdam Metal Band and My Dice. They have this showreel of their newest songs on top of their homepage. And I put an image thumbnail there. And when you click that, it opens a modal. So the video and all those tracking scripts, they are loaded only when you click on a thumbnail to open the modal that's a nice little trick to work around that yeah ([Time 0:22:13](https://share.snipd.com/snip/cd10b25d-f05f-43ae-bfb7-3190cbc34d4c)) - **Implement Caching and CDNs** - Implement caching on WordPress sites to reduce server computations for repeated page loads, saving energy. - Use CDNs to distribute cached content close to visitors, improving speed and sustainability based on audience distribution. Transcript: Charlotte Bax Yeah, yeah, there's caching, of course, which can make a huge difference. WordPress is based on a database. So in theory, every time someone visits a page on your website, the server has to calculate the web page and then send it over to your visitor. But if you use, for example, server-side caching, you can do that once and send the generated page to all your visitors. So that saves a lot of computing energy server-side. But there's also browser caching, which means that certain assets that you can reuse, for example, your CSS style sheets and your fonts, you can retain in the browser so they don't need To get loaded on every page your visitor goes to. Nathan Wrigley There's so many different ways of tackling this, isn't there? Whether that's through your web host or a collection of plugins that you might use. But yeah, caching, the idea being that it's stored somewhere kind of ready to go. It's already been created. Somebody just comes along and if you like, just picks it up. Whereas in the typical WordPress way, there's this whole crunching of data. There's all this PHP being rendered in the background. And the database is being called to construct the page. And really, if the page isn't being changed from minute to minute, there's no need for all of that. You can just have a cached version. And increasingly, you know, you don't even have to make that cached version travel across the globe because you can put it at the edge in different countries and so on and so forth. So there's a whole load of interesting stuff. Charlotte Bax But caching, enforce that where possible if you have a i always recommend people to look at their target audience for choosing their hosting for example i live in the netherlands and My target audience is mostly dutch companies and dutch governments so it makes sense for me to host my website in the netherlands but if your target audience is all over the world, I really Recommend using a CDN to distribute all your cached web pages. It makes it more sustainable and it also makes it a lot quicker. Nathan Wrigley It's curious that one, isn't it? Because in many ways, using a CDN, ([Time 0:24:21](https://share.snipd.com/snip/1b469c3e-0415-41ae-9e6a-eb3523a9031d)) - **Manage Visitor Traffic Carefully** - Manage website visitor traffic because total CO2 emissions equal page weight multiplied by traffic volume. - Bot traffic can inflate emissions dramatically and deserves attention for sustainability. Transcript: Charlotte Bax There's visitor management, because obviously the page weight is not the only factor of a website, but also you have to multiply that with all the page visits to get your total CO2 emissions Over time so if you have a lot of visitors and that's not only the human visitors but also the bots of course then that's a lot of co2 emissions and that can be up to hundreds of times more Than you actually realize Joost de Falk had a really great talk about that a few years ago, 2022, at WordCamp Netherlands. I wasn't there myself, but I have seen the YouTube video and I really, really recommend people checking that out because he can explain that really well. Nathan Wrigley So this is to do with the amount of traffic that you're getting? Charlotte Bax Yes, yes, the amount of traffic. So page weight times traffic is CO2 emissions, basically. Nathan Wrigley Okay, Yes. Okay, next one. Charlotte Bax That's the last one in my list, and that is sort of the cherry on top. And that is to make your website grid ([Time 0:28:00](https://share.snipd.com/snip/a8ca8efb-f135-4f2b-9a0f-c6c553184123)) - **Grid-Aware Websites Adapt to Energy Mix** - Grid-aware websites adapt content complexity based on the energy mix of visitors’ local grids for sustainability. - This emerging technology can reduce emissions by serving minimalist or rich experiences depending on renewable energy availability. Transcript: Nathan Wrigley Okay, Yes. Okay, next one. Charlotte Bax That's the last one in my list, and that is sort of the cherry on top. And that is to make your website grid aware. I don't know if you're familiar with Fershad Irani. He's one of the pioneers in website sustainability. He does a lot of projects for the Green Web Foundation. And currently he is working on GridAware website toolkit to make your website responsive to the energy mix on the local energy grid from your visitor. And he does that with Cloudware CDN workers. I hope I explained that right, because that's an area that I'm less familiar with. But what it does, for example, if your website visitor is in an area where the energy grid is mostly running on fossil fuel energy, then it shows a more minimal experience of your website To the visitor. And when they are in an area where the grid is a big percentage renewable energy, then it shows a more rich experience of your website. Gosh, that's fascinating. Nathan Wrigley So it's like progressive enhancement, but for sustainability. So I might see an entirely different page with, let's say, I don't know, a greater number of images on it or something like that given the awareness that the website has of where I'm viewing It or where it is being hosted I wasn't sure about that but is it more about the visitor or more about the location of the hosting of that it's about the visitor in this case yeah and I think Charlotte Bax He does that in a really really smart way there's also sort of a version of the toolkit that does it browser based. I don't know enough about that to explain it right, I think. Nathan Wrigley Genuinely, that's fascinating. That really feels like he's pushing the boundaries. What I'll do is I'll try to find a link to something. Charlotte Bax There is a page on the website of the Green Web Foundation. And if you contact Fairshot through LinkedIn or Mastodon, or I'm happy to link you with him, he is currently working on it. And he is looking for people and websites to experiment with it. I think it's a really nice experiment to see how much effect this can have. I'm really curious about it. Nathan Wrigley It kind of feels like a technology which is going to be very difficult to pull off, but very profound if it is pulled off. You can imagine high traffic websites, and I'm thinking of news organizations, for example, the BBC or something like that, that just have millions of views every few minutes, I would Have thought, and could really benefit from something like that. You know, showing a different website, I'd never heard of that. That's fascinating. Charlotte Bax Yeah, but it's a really new project. He is still developing the toolkit right now. I think it's a really amazing project, and that could be really impactful for those really high-traffic websites. I have seen earlier this week, I had a video call with Farshad, and he showed me a demo version on, oh, I don't know the name. I can't recall it, but it was like an online magazine. There was this menu, there was just this dropdown in the menu bar with four items, live, low, medium and high. So you could choose the settings yourself or you just could go with the live thing based on your own energy grid. Nathan Wrigley Right, so like a demo and you can pick how you would like to see it in four different versions. Okay. Charlotte Bax Yeah, the live version is like how it is shown based on your energy grid but as a visitor you can also choose your own way if you want to see the more rich version or the more minimized version And the information on the website it just stays the same of course but it shows less images and that kind of stuff but if you view it in the minimalist version, you can still opt to see images If you want to by just clicking on it. It's a really smart way he does that. ([Time 0:28:54](https://share.snipd.com/snip/e5f9a172-f16a-48b4-bea5-ba6db48b8182)) - **WordPress Needs Sustainability Focus** - WordPress could lead in sustainability but currently lacks an official sustainability policy unlike competitors. - An impromptu sustainability team formed recently aims to reinstate this focus for WordPress’s future. Transcript: Nathan Wrigley EU. This is all about WordPress. How do you feel WordPress by default? So ignoring any plugins, if I just chuck a default version of WordPress, a vanilla version of WordPress out there, how does it do in terms of sustainability compared to other things In the environment? Charlotte Bax Oh, that's really funny, because I haven't really done any research into that. What I have done is I made it some time ago, but I checked some of the WordPress vanilla themes against some of my favorite themes, just making a staging website with only a lorem ipsum Paragraph and just the vanilla theme and then checking how much page weight it is and how much co2 emissions on first load but that's ages ago and i maybe you just sort of started a new project In my head to just nice yeah measure the co2 emissions of wordpress themes and vanilla wordpress i think that's a good idea yeah because it feels to me, especially if you're using a WordPress Nathan Wrigley Default theme, they do seem to be quite light. You know, there's a lot of text and very, I mean, some of the themes that we've had in the past, I can't remember, I'm just trying to conjure it up. It might be in 2021 or something like that. It was basically all text. And I just wondered if WordPress itself could be proud of its sustainability over time, or whether it was something that, you know, compared to other CMSs. But you know, if you don't have that data, that's okay. Charlotte Bax I don't have the data, but I do think that maybe WordPress could be more of a front runner in terms of sustainability. For example, I learned that Drupal already has like a sustainability policy and they are doing certain things on that. But unfortunately, our own sustainability team got canceled. But yesterday, during Contributor Day, there were like 10 people or something. They really wanted to do a sustainability table. So we just impromptu did that. The table cards, they were there. So we just did it. And we formed a new team, still an official. I have no idea how it happened, but apparently I'm a team rep now. There's some of the old sustainability team members that also want to continue their work. So we sort of started an impromptu petition to get the sustainability team their official status back so it can become a core value of WordPress. And I think that it would really help WordPress to be a front runner, especially in Europe where sustainability is, as far as I know, sustainability is a bigger thing in Europe than in America or Asia. That's how I feel it. And I think if we don't jump on that sustainability bandwagon, ([Time 0:33:16](https://share.snipd.com/snip/4957c0f7-0b91-4b79-888c-933612ff8ac5))