Bonus Episode: Grid-Aware Websites Project  ## Metadata - Author: [[Sustain WP]] - Full Title: Bonus Episode: Grid-Aware Websites Project - Category: #podcasts - URL: https://share.snipd.com/episode/14676fad-bd72-4057-a5f5-e1d9c28bec4a ## Document Notes ## Highlights - **Pivot From Carbon To Grid Came From Critique** - The GridAware idea grew from prior carbon-aware experiments and collaboration with Ishmael Valesko. - Hannah used those critiques to pivot the project from carbon-aware to grid-aware thinking. Transcript: Nahuai Badiola Hello, Hannah. Happy to have you back. It's always a pleasure to talk with you. And I'm going to go straight to the point so let's start from the beginning and where did you get the idea of creating a grid aware websites project yeah so we'd had a carbon aware website Hannah Smith Project in the green web foundation for quite some time some some of you might have heard or some of the listeners might have heard of Branch Magazine. Branch Magazine was actually one of the reasons I really wanted to come and work with the Green Web Foundation because I kind of saw the website and thought, oh, what a cool idea. So we'd kind of had this prototype idea for a while where we'd experimented with something similar because what we really wanted to do was start to demonstrate to people that we could Use the internet differently that we could have an internet that could be responsive to the world around it particularly say to carbon initially but like I said it was a very much a prototype Project it was done it was up and running but we always kind of knew that the code and the approach was had been done in a bit of a haste bit hastily yes a lot of room for improvement so we were Kind of thinking all right how can we improve what we'd already built, this prototype version of branch? ([Time 0:02:05](https://share.snipd.com/snip/e5ec0be0-80e6-4595-a7a9-8b1089c83207)) - **Grid Awareness Beats Carbon Tunnel Vision** - Grid-aware goes beyond carbon metrics by considering how the electricity grid actually operates. - Hannah Smith argues systems-aware design avoids narrow carbon-only fixes and supports grid resilience. Transcript: Hannah Smith So we'd had a carbon aware website project in the green web foundation for quite some time some some of you might have heard or some of the listeners might have heard of Branch Magazine. Branch Magazine was actually one of the reasons I really wanted to come and work with the Green Web Foundation because I kind of saw the website and thought, oh, what a cool idea. So we'd kind of had this prototype idea for a while where we'd experimented with something similar because what we really wanted to do was start to demonstrate to people that we could Use the internet differently that we could have an internet that could be responsive to the world around it particularly say to carbon initially but like I said it was a very much a prototype Project it was done it was up and running but we always kind of knew that the code and the approach was had been done in a bit of a haste bit hastily yes a lot of room for improvement so we were Kind of thinking all right how can we improve what we'd already built, this prototype version of branch? And we kind of came up with, okay, well, what would the next iteration be? And so we thought, I think we could look at something like grid aware websites, which would be the next iteration. Nahuai Badiola That's really interesting. If I recall, well, we started the project as carbon aware, right? But that was probably the first or the second meeting that you decided to change. And it was really interesting. Indeed, we had really interesting conversations about it. So do you remember when was that point where you switched or you decided it was more interesting to move from carbon to grid? Because that's a pretty interesting pivoting. Hannah Smith It was a bit of a shift. Now you're quite right. So when we wrote the proposal to our grant funder, we wrote the proposal about carbon aware websites because we were thinking about, oh, how do we iterate on the existing branch prototype? But around the same kind of time as we had submitted the grant application, I had been doing some work on the side with Ishmael Valesko, who I met through Climate Action Tech. And Ishmael was throwing up some questions around what carbon aware was was it actually useful was it meaningful did it actually hold the potential to reduce emissions in the way that People were saying it wasn't that work was really really fascinating and I did a lot with Ishmael and I took his ideas and I said, OK, well, given these doubts and concerns that he very Cleverly raised, I said, well, what would be better than this? You know, the concept of having our technology respond to the world around it is a really good concept. And I think as we move forwards in these climate crisis times we're only going to need to be better at that we're going to create need our tech to be more in tune with living systems so I kind Of thought okay well what would be the next best thing what would how would we improve this because I always have a mentality if you shoot someone's ideas down at least have the decency To say what you think might replace it or might be an improvement yes it's just a little a little mean so kind of came up with this idea of grid aware so still thinking about carbon as a metric In there but a lot of what Ishmael was saying was that if we all just went off and did carbon aware tech and carbon aware tech is basically something that asks finds out what the carbon emissions Are in a given area and then response and you might respond through shifting work to a different location where the carbon intensity is lower. Or you might shift it to a different time of day where the carbon intensity might be lower. But what Ishmael's research made me realize and his points made me realize is that you can't just do that in isolation from the realities of the way that the grid infrastructure actually Works. Just looking at carbon as the sole metric and the sole thing you're considering isn't enough. You need to be thinking about how the demand works, how grid operators scale up and scale down different types of energy sources in relation to demand. ([Time 0:02:22](https://share.snipd.com/snip/cc1135c4-5c36-45a8-8d40-3ff3499c4780)) - **Build Reusable Toolkits, Not One-Off Demos** - Experiment with websites that serve different versions based on grid metrics to learn real impacts. - Package code, docs and UX examples so others can reuse and iterate on your work. Transcript: Hannah Smith The idea of this project was to see what we could do around applying grid awareness to websites and I think it's good to think of a grid aware website as a subset or a um yeah a subset of the Overall grid aware technology or grid aware concept we kind of wanted to see all right what happens if we tried to make a website grid aware in an actually meaningful way so avoiding these Pitfalls of just saying well you know we're just shifting things around and because what we learned was actually that probably doesn't have a net reduction impact so the overall goal Was to just be in a bit of a playground actually and I think sometimes when you work in tech you sort of get a bit oh you know you've got to deliver this thing for this client and you've got To deliver these benefits and you know sell these things and what's wicked about the work we get to do at Green Web Foundation was that sometimes we do get funding to just experiment with Something. So the key things that we were trying to experiment with here were what happens if we create a website that offers up different versions of itself based on different metrics around the Grid? What do we learn from that? We also wanted to produce some code that other people could reuse and experiment with too. And that was, excuse me, a very key goal for the project. ([Time 0:10:07](https://share.snipd.com/snip/df165540-d871-4c87-b833-fdf45e6c0b10)) - **Use Cross‑CMS Advisory Groups** - Invite a cross-community advisory group to expand perspectives and adoption. - Recruit members already active in other open-source CMS communities to seed real-world experiments. Transcript: Hannah Smith I mean, It's hard to pinpoint sort of like any exact one light bulb moment. I think it was a convergence of a number of different ideas. But when you work in open source, you know that the reason why you work in open source is because people outside of you have different perspectives. And that was one of the reasons why I always enjoyed working in WordPress was that exposure to other people's perspectives you all have a common goal but you're seeing things from different Places and those perspectives when you sew them all together create something that's far better and more considered and more usable so I think as a as Green Web Foundation we've always Really understood the importance of other perspectives. The other thing with this particular project was we really wanted to see how other people would adopt these ideas and what they might do with them. Remember, it was an experimentation. Nahuai Badiola Yes. Hannah Smith So we kind of thought, well you know what are the mechanisms that we have available to us to really encourage that adoption and experimentation you can put a post on social media and say Hey we've built this thing why don't you have a play but chances are 0.001 percent of people are actually going to be geared up motivated you know, knowledgeable enough, blah, blah, Blah, to do it. So we thought, well, let's see if we can assemble a group of people that we know from our networks who are, A, willing to engage and give us their perspectives, but B, might be motivated Enough to apply these ideas into their own open source community. ([Time 0:13:18](https://share.snipd.com/snip/d782ec26-c867-42b7-a808-b443e91a686f)) - **Make Grid Features Easy To Use And Preview** - Lower setup friction: make plugins plug-and-play and include clear previews for different grid intensities. - Let editors override site defaults per page and show inline notices explaining behavior changes. Transcript: Nahuai Badiola So the idea was from the beginning was to have a plugin that was pretty much plug and play. So very easy to use because we have to lower all the barriers we can if we want people to engage with these kinds of new tools. So the idea would have to a very simple setting with the electricity maps that we didn't mention yet, but yeah, that was a key part of the whole project because we were relying on the API That they have. And they were kind enough to create a new API endpoint. They were talking together with you, with the Gringo Foundation, and it was like, okay, maybe we don't have to need an access to the whole API because they are monetizing it somehow. But maybe you can just send us three levels of how degraded it is it's low it's medium or it's intensity and maybe this very simple endpoint could be used on plugins like the one that i was Working on indeed i was i also talked with ryan solim which is part of of electricity maps and i was saying like i will build this plugin just using this endpoint. So it would be great if you are able to just release for free this endpoint, maybe cap it for X request so they don't have to pay too much in terms of cost. And I think that the idea is still there. Hannah Smith I didn't hear back from the electricity maps yeah i mean first shot was the one having the conversations with electricity maps directly and we haven't sort of checked in with them for A while on where their thinking is so my understanding is that there is still some stuff you can access for free, but it's not quite what we're hoping for. Nahuai Badiola Yeah, because the idea in the future versions was to, if that endpoint was for free, the idea was even to make simpler the backend of the plugin. Because right now, just to visualize it easily, it's the field for entering the electricity maps API key. And then there are three checkbox where you can decide if you want the images to be grid aware, if you want the videos to be grid aware, or if you want the fonts to be grid aware we decided To tackle these three elements before going deeper because images is uh you have to tackle them always because it's usually half of the weight of the page is an image so probably if you Can do modifications there there are an opportunity and another one that are videos but we were going specifically for the youtube embeds because they are really huge if you just embed And you do nothing else it's more than a megabyte so if you have several embeds it's like crazy big. And then the fonts is something that usually people think that is not so heavy or there is not so much megabytes, kilobytes loading. But depending on the website, it could arrive to half megabyte if you are not careful. So those were the three elements that we decided. So you could just set up in the general settings that you could, every element would be grid aware or not. The other thing we did is like since this is very difficult to to see what the yeah let me rewind a bit so in this case when you are when we are talking about grid aware websites we are thinking On the how is the intensity of the grid of the person that is visiting the web. So in this sense, it's very important for the plugin to explain how the people is going to see if they are in a high-int grid or in a medium or a low. Because for example, I was doing all this stuff in Spain, which we usually have a low intensity because we have quite a lot of renewable. So I couldn't see how the high intensity and medium intensity were displaying. So we had to build a preview for the people to understand. Okay, so people, when they exit from a location that they have high intensity, they will see it like this. And that was really important because if not, if the person that is setting all these things is not able to understand how it's going to visualize in different locations, That was going To be very difficult to get them to start using. So we built it in a way that everything is very WordPress native because I really like to be on top of all the news about WordPress. So it was just inside the blog editor, there was like three new links that you could go and preview the things, the page. So that was one of the things that we were happy about it. Also, since there is usually pages that are more important, like a checkout or a landing page or whatever, we also added in the editor the ability to change the setting for the images, Fonts, or video in that page. So maybe you want to be grid-aware in the whole website, but not in your landing page or in your checkout or whatever. So you could also change it in a very granular way in this sense. And also we added a small display that when you were going to add an image and you had the image grid aware checkout, a notification of saying, okay, this image is going to be added and it's Going to be displayed in a different way depending on the grid intensity. ([Time 0:24:31](https://share.snipd.com/snip/91ab61ce-4c65-4282-ade3-2a07a7b6ac03)) - **Transparency Creates Mindful Digital Behavior** - Grid-aware UX can nudge mindful user behaviour by explaining why assets are withheld. - Showing a clear message and offering a manual override links digital choices to physical grid conditions. Transcript: Nahuai Badiola So you could just set up in the general settings that you could, every element would be grid aware or not. The other thing we did is like since this is very difficult to to see what the yeah let me rewind a bit so in this case when you are when we are talking about grid aware websites we are thinking On the how is the intensity of the grid of the person that is visiting the web. So in this sense, it's very important for the plugin to explain how the people is going to see if they are in a high-int grid or in a medium or a low. Because for example, I was doing all this stuff in Spain, which we usually have a low intensity because we have quite a lot of renewable. So I couldn't see how the high intensity and medium intensity were displaying. So we had to build a preview for the people to understand. Okay, so people, when they exit from a location that they have high intensity, they will see it like this. And that was really important because if not, if the person that is setting all these things is not able to understand how it's going to visualize in different locations, That was going To be very difficult to get them to start using. So we built it in a way that everything is very WordPress native because I really like to be on top of all the news about WordPress. So it was just inside the blog editor, there was like three new links that you could go and preview the things, the page. So that was one of the things that we were happy about it. Also, since there is usually pages that are more important, like a checkout or a landing page or whatever, we also added in the editor the ability to change the setting for the images, Fonts, or video in that page. So maybe you want to be grid-aware in the whole website, but not in your landing page or in your checkout or whatever. So you could also change it in a very granular way in this sense. And also we added a small display that when you were going to add an image and you had the image grid aware checkout, a notification of saying, okay, this image is going to be added and it's Going to be displayed in a different way depending on the grid intensity. So we put a lot of effort trying to be like very, yeah, very didactic and try to also get easy to the person that is using it to visualize what was going to happen. And of course, we added also a banner that was going to be in the backend all the time till they close it saying, you just activated a plugin that is changing things in the front end based On grid intensity. So be aware. And yeah, and that all the back end part. And in the front end, the idea was to have a top bar very similar to the one that is displaying in Branch Magazine. Inspired by that because it was already pretty well designed. So we thought we don't have to reinvent the wheel. And the idea was also quite simple, just to say the intensity, the grid intensity, the location, and then in the other part, have the ability to change through the intensity so you can Also see the difference between them so and all the logic that was behind pretty much i was using server-side filters in wordpress so because one of the ideas of the of the of this project Was to move from javascript or client-side code that was doing the first version of branch to the servers or to the CDNs in the case of the workers. And yeah, pretty much the idea was to not to load anything in the intensity when the intensity was height, but place it a good placeholder explaining why it's not loading it, and then Give the opportunity of if you are clicking it and you really need to see it because you want it, they have this possibility. ([Time 0:28:09](https://share.snipd.com/snip/daab9d85-af07-4ede-9013-76f76cae583a)) - **Awareness And Nudge Are Core Benefits** - Grid-aware sites can both reduce impact and educate users by linking UI choices to real energy conditions. - Hannah views awareness and nudging as central wins alongside operational efficiencies. Transcript: Hannah Smith Was really really cool to hear you talk through all of that because yeah i mean ultimately you and nora were able to take these concepts that we've been talking about and apply them in Quite a different way um into uh a plugin that in theory anybody could could use i mean the way that we implemented the code into branch is undoubtedly you do need to have good developer Skills in order to have a play around with this. I really love what you did. I think one of the things we talked about with this project was how can we lower the barrier to entry of people experimenting here? And I think what you and Nora did was an amazing example. Nahuai Badiola I'm blown away by what you were able to produce yeah yeah i remember trying to deploy indeed i deployed the worker in my own website and everything using the toolkit that first had created Because the documentation was pretty good but i was thinking i spent like more than an hour or two hours to set it up I had to set up the APK for the Cloudflare so people that never heard about APKs you can ask for one APK maybe the electricity maps that right now is still necessary but you are going to ask to create a new account in Cloudflare not everyone is using CDNs because Some people just had like 90% of the traffic from the same country. So maybe it's not needed. So when I was creating the plugin and thinking on lowering as much as possible, the barrier was like, I think I have to check how I can do everything server side. And maybe we can remove one friction, the Clover API and the whole setup. And yeah, at the end, I think I'm not sure if there is a parity one-to with branch, but I think it's pretty close. And I was happy to have something that is easier to set up right now. Yeah. That was interesting. Yeah. Hannah Smith I mean, I think, you know, you've done some really important groundwork here for making this possible for others and inspiring others and showing them what's possible. I mean, you touched on so many things that i could just rabbit on about all day long um but i do think you know one of the key things that first shad in particular was interested in in experimenting On was what happens when you apply grid awareness or carbon awareness at a cdn level or the server level rather than in the user's device using JavaScript. Because that was what the first version of Branch did. And that was the example that people were copying. And Phish has just about finished doing some testing with the good people at Green Coding Berlin. And we've actually got some really good metrics that show. Yeah, it's about a 7% difference. Okay. So if you're running that JavaScript to implement grid awareness versus doing it on a CDN, we think there's about an overall 7 reduction and that's because user devices are not particularly Well optimized to do this but cdns are so that's assuming that there is still energy being used on the cdn it's not just like oh it's seven percent off the user device like we think it's Actually a seven percent reduction in the approach um which is pretty cool it is You rightly say it's complicated to set up and that's the trade-off. That's what we've learned. Nahuai Badiola We can have some efficiencies. Sorry, go ahead. I want to think that the approach that I'm using in the WordPress plugin is more similar to the one in the CDN because everything is happening not in the client but and I was I would guess That it was a bit more efficient but we didn't have data still in the in the last meeting we had I'm so happy to hear that we had it and and that is pointing that probably it has some benefit So yeah I think that's really good. Absolutely. Hannah Smith And I think, you know, the whole exciting thing about this project is, as you rightly said, this, for me, the kind of whole reason why you'd implement a grid aware website or why you'd Care about this is to create those nudges and that association between the fact that your digital usage does have an impact and that's not to say you shouldn't use it but you should use It more mindfully and consider how it could be used in different ways to reduce the impact and the whole process of this project working with the advisory group developing the code and Applying it to branch, doing the follow-ups with calls like this or summaries like this is, I think we have some really great potential here to raise awareness and create that link in People's minds and nudge more positive behaviours. And I think that's a massive contribution to the realm of digital sustainability, showing people what's possible. So I love that. And I love what you and Nora did, because I really feel that your work took these concepts and really inspires. You know, how does this work in practice? How would we actually tackle these for a larger audience of people? ([Time 0:37:19](https://share.snipd.com/snip/eddfbec3-2e0a-4712-9bf7-c847f03ed385)) - **Server/CDN Implementation Is More Efficient** - Moving grid-aware logic from client JavaScript to CDN/server yields measurable efficiency gains. - Early tests showed roughly a 7% improvement when implemented server/CDN-side versus client-side. Transcript: Hannah Smith Because that was what the first version of Branch did. And that was the example that people were copying. And Phish has just about finished doing some testing with the good people at Green Coding Berlin. And we've actually got some really good metrics that show. Yeah, it's about a 7% difference. Okay. So if you're running that JavaScript to implement grid awareness versus doing it on a CDN, we think there's about an overall 7 reduction and that's because user devices are not particularly Well optimized to do this but cdns are so that's assuming that there is still energy being used on the cdn it's not just like oh it's seven percent off the user device like we think it's Actually a seven percent reduction in the approach um which is pretty cool it is You rightly say it's complicated to set up and that's the trade-off. ([Time 0:40:10](https://share.snipd.com/snip/6fbcfb05-492d-4673-b063-f1d0e68dfc82)) - **Ship Modular Layers And A User Toolbar** - Combine a core library, CDN/server bridges, and a web component toolbar for flexible adoption. - Use the component toolbar to give users controls and visibility into grid intensity. Transcript: Hannah Smith Absolutely so there are a suite of code bases that you can use. There's one which we call the Core Grid Aware Websites Library, which enables you to set up the connection with electricity maps, which is the key data. Got that. There's then a separate set of plugins that are specifically for people using CDNs. There's a cloud flare worker plugin and netfly plugin which kind of creates um a bridge between the data and your website and then there's a third layer of things which fish developed Which is the grid aware websites component yes so we learned loads about web components in this project too so that was quite exciting and that came through uh and a suggestion through The advisory group as well actually to take that approach so yay for the advisory group but the third thing is a kind of it's as close to a drag and drop web component as we could get it with The the money and funding and so it creates this little tool, well, little, yeah, I suppose it is quite little, this toolbar that you can put actually anywhere in the website, top, middle, Or bottom, that gives you then, gives the user-centered controls. You've kind of got these three layers of plugins, and each one can be used separately or integrated together. ([Time 0:43:41](https://share.snipd.com/snip/4bebe3ff-87eb-4e43-9cec-4b112d6f06fa)) - **Power Cut Made Grid Awareness Personal** - Hannah Smith describes a power cut that made her crave low‑impact websites. - The experience convinced her grid‑aware sites could help users during outages and crises. Transcript: Hannah Smith I mean I'll tell you a story so as we were wrapping up the project the summary of the project we um we had a power cut um now I know you know this but the listeners not not know this. I live in the forest in Exmoor National Park, and it's quite a remote place. And we have lots of trees and lots of wind. And those two things combined together mean pylons come down quite often. And so we had a power cut right as I was a whole day power cut. It's actually quite short for us. We've had them for five or six days before. But it reminded me of how we take for granted the power to power our devices. So this one particular day, my phone had very little charge on it. And I was very, very, very conscious of where my electricity was going. And it really made me think, I was like, wow, I really wish that every website was a grid-aware website right now. And every website I go on, I could opt to go into low-impact mode and have a stripped-back, simple version of the site. Because I know that that would mean my phone would use less energy. So not really so bothered about the wider grid right now. What mattered to me as that particular individual facing the consequences of blinking climate change, I didn't have access, ready access to power and I wanted low impact websites. That experience came along at just the right time to remind me that, you know, we are going to be dealing with crises, with storms, with things that disrupt our infrastructure. And we need to be better prepared for it. ([Time 0:48:33](https://share.snipd.com/snip/fef25f20-5364-4f08-8647-1eb4805582e9))