Exploring Grid-Aware Websites

Summary

Over the past year, I’ve had the incredible privilege of getting to participate in the Grid-Aware Websites (affectionately abbreviated to GAW) advisory group. The Green Web Foundation team have thoroughly explained what a grid-aware website is in this detailed case study of the Branch Magazine redesign, but if I had to put it in my own words, a grid-aware website responds to the cleanliness or dirtiness of a user’s electricity grid. In simpler terms, whether it is currently using more renewable energy sources or fossil fuels. To do so in the most performant way possible, this currently involves getting a user’s rough location and using the Electricity Maps API to check the current status of the grid, and then returning that information to a serverless function on the edge so that the website can be modified, all before it reaches the user’s browser. To explore this concept, I’ve thrown together a small demo of what this might look like in two of my favorite web tools that I believe are conducive to this effort, and written up a few of my personal thoughts. Why implement grid-awareness?Many folks may notice that the in brief approach outlined above, there’s a non-trivial amount of code required to implement grid-awareness. Since less code = better performance = greener websites, isn’t this a bit counterintuitive, if not self-defeating? I hear you, and it’s something we’ve thought about a lot as a group, and the Green Web Foundation have addressed this question excellently in their FAQ. Essentially, this is an experimental approach to see if this is a viable way to reduce the carbon emissions of websites.I would love nothing more than for every site and application to be the best version that it could possible be, but we’re definitely not living in that world at the moment. The collective push by performance, sustainability and accessibility advocates have not been able to make the industry shift meaningfully, despite strong real world incentives to make sites more us...