Grid Aware
This site is Grid Aware, meaning that it changes its design based on the quantity of fossil fuels on your nearest energy grid. Learn more.

Grid aware site

What is a grid aware site?

The concept of grid (or sometimes carbon) awareness is one of the core principles of Green Software.

Grid aware software adapts to the conditions of the electricity grid it is running on, changing how it behaves based on the mix of renewables and fossil fuels powering the grid.

Grid aware websites change their content and user experience based on the user’s electricity grid. The concept was originally developed by Branch magazine and later by the Green Web Foundation’s Grid-aware websites project.

How does grid awareness on this site work?

Grid awareness is powered by Astro’s on-demand rendering and Electricity Maps.

When someone visits this website, the following happens:

  1. Server middleware detects the user’s IP address and translates this into a rough geolocation, good enough to determine which country the user is located in
  2. Data is fetched from the Electricity Maps Carbon Intensity Level API about the carbon intensity on the user’s electricity grid. Carbon intensity roughly maps to how much fossil fuel is being burned in the country at that time and returns a high, moderate or low level result
  3. When rendering the page, the carbon intensity level is passed to components which can decide how to change their behaviour
  4. The carbon intensity level is stored in a cookie, to reduce load (and therefore carbon emissions!) on the Electricity Maps API

If anything goes wrong or no data is available, grid awareness is disabled and components default their regular behaviour

Differences to the Green Web Foundation’s grid-aware website tool

This is slightly different from the grid-aware websites tool, which modifies server responses in an edge worker. The assumption that the underlying content of the page can’t be changed doesn’t hold here as I chose to rebuild my site from scratch to support grid awareness.

What changes on this site?

When the carbon intensity level is high, the following changes are made in components:

  1. The “scramble” animation in the header is disabled
  2. Images are replaced with a text placeholder, inspired by Branch magazine
  3. CSS animations/transitions are disabled, inspired by the Obs.js library
  4. More ideas to come!

A banner is also displayed at the top of the page, informing the user about what is happening and what the current carbon intensity level is. In future I may implement a way for the user to override the level manually.

Is making this site grid aware worth it?

Does a grid aware website really save emissions? Do those emissions savings stack up to

The only real way to know this is via measurement, which I have not attempted. Measurement is unfortunately a difficult & much discussed problem in green software, although more tools are becoming available and accurate. In the future I plan to move hosting to a verified green host, at which point I plan to run some measurements.

In the meantime this was a fun learning experiment to put green software techniques into practice. Sharing these techniques and the Electricity Maps API is also important to me, as I believe there are many other interesting use cases.

Open code

The code for this site is available on Github, and released under a Parity 6.0 licence.

Thanks

This site was inspired by many great people & projects in the Green Software community: