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.