This website is grid-aware

The concept of a grid-aware website is one where the content/user experience of a site changes depending on some fuel mix of the user's electricity grid. Implementing grid awareness on this website is inspired by the Grid-aware Websites project that we are developing at Green Web Foundation.

Jargon buster

There was a bit of jargon in that first sentence, and there might be more further down the page. So here's a summary of some key terms:

  • Grid-aware: A grid-aware product/tool/service reacts to certain properties of an electricity grid. These could be the types of fuel used to generate power (fossil fuels, renewables, nuclear) or other measures such as how much load is on a grid at a point in time. Based on these data points, grid-aware products/tools/services will adjust their behaviour.
  • Fuel mix: A term used to the describe the balance of renewable, low-carbon, and fossil fuel energy used to generate the electricity of a particular region or electricity grid.
  • Cloudflare Workers: A code execution platform that is globally deployed and runs on CDN edge nodes.

What makes this site grid-aware?

All of the magic that makes this website grid-aware is thanks to Cloudflare Workers, Electricity Maps, and the Grid-aware Websites library.

When someone visits this website, the following process is kicked off:

  1. A Cloudflare Worker checks the request.
  2. The Grid-aware Websites Cloudflare Plugin is run to get the origin country of the request (that is, the country the website visitor is based in).
  3. The Grid-aware Websites library is then used to:
    • Fetch data about the current power breakdown of that region from the Electricity Maps API.
    • Determine if the amount of "low-carbon" power (i.e. renewables plus nuclear) is lower than 50%.
    • If so, then it will return a status of gridAware: true.
    • This tells the Cloudflare Worker that the page should be modified to make it "low impact" before it is returned to the user.

If at any point along in that process there is no data available, something goes wrong, or gridAware: false is returned then the original web page will be shown.

What gets modified on the site?

When the grid-aware flag is set on this website, the following changes are made inside the Cloudflare Worker before the page is returned to the user:

Open-source

The Grid-aware Websites library is open-source on GitHub. There is also a repository with a demo website that can be deployed to Cloudflare Pages, which also includes an example Cloudflare Worker that's setup to help people get started.