Grid Aware Websites

Websites that work with your local energy grid

I stumbled across the Green Web Foundation's framework for getting local energy information from the Carbon Intensity API and changing what your site does depending on fossil fuel heavy days.

For me, sustainability should be one of the first discussions in the discovery of a website design and build. This got me thinking about how I could improve my own website and use it to showcase how this could be implemented to clients.

Implementation

First step was to install the Grid aware library

npm install @greenweb/grid-aware-websites

Next up is to store data using a Netlify function.

import { GridIntensity } from "@greenweb/grid-aware-websites";

const zone = "GB"; // The zone ID string or lat-lon object you'd like to get grid intensity data for

const options = {
  mode: "average", // The type of comparison used to determine grid-awareness - either average or limit. Default: average
  minimumIntensity: 400, // The minimum grid intensity value (grams CO2e/kWh) before grid-awareness is triggered. Default: 400
  apiKey:  "you_api_key",
};

const gridIntensity = new GridIntensity(options);

const gridData = await gridIntensity.check(zone);

Once we know what the fuel mix will be for the day, do we just refuse to load assets like images when it is a fossil fuel heavy day? or there could be an opt in to let the user decide if they want to see images.