What I learned from creating a carbon aware website

Shortcast over Coffee
ILLUMINATION
Published in
6 min readMar 24, 2024
Photo by Matthias Heyde on Unsplash

Why do we need it?

We overlook the amount of carbon emitted each time we load a website or prompt ChatGPT. Large language models like ChatGPT have a significant environmental impact due to the enormous energy consumption and carbon emissions associated with training and running these AI systems. According to estimates, ChatGPT emits 8.4 tons of carbon dioxide per year, more than twice the amount that an average individual emits (4 tons). The water footprint is also substantial — the training of GPT-3 used around 700,000 liters of freshwater for cooling in Microsoft’s data centers. Even a simple 20–50 question conversation with ChatGPT consumes water equivalent to a 500ml bottle.

Addressing this issue requires greater transparency from companies developing AI systems, as well as advocacy for sustainable practices.

What is carbon aware computing?

Carbon-aware computing is a new approach to software and hardware design that aims to minimize the environmental impact of computing operations. It involves optimizing software and hardware to reduce energy consumption, leveraging renewable energy sources, and implementing algorithms and efficient strategies to lower carbon emissions associated with computing activities.

The core principle of carbon-aware computing is to develop and utilize computing resources in a way that minimizes the carbon footprint, thereby reducing the contribution to climate change. This approach encompasses various techniques, such as energy-efficient coding practices, hardware power management, data center location optimization, and the utilization of renewable energy sources like solar, wind, or hydroelectric power. By adopting carbon-aware computing practices, organizations and individuals can reduce their environmental impact while still meeting their computing needs without compromising on quality and latency.

In a nutshell, just Imagine AWS moving your task to a data center in Amsterdam instead of Virginia with negligible change in latency and performance as it’s powered entirely by wind energy.

How did I make my website carbon aware?

I wouldn’t have been able to succeed if it wasn’t for the Green Software Foundation and the works of Fershad Irani for his own website https://fershad.com/carbon-aware-site/. A huge shoutout should also go to https://www.electricitymaps.com/ Electricity Maps and https://www.gridstatus.io/ .

I still believe that a near real-time mapping of each state’s power sources can go a long way in monitoring and developing carbon aware software. We are not there yet. But hopefully soon…

The following documentation outlines the steps I took to build my podcast website https://shortcastovercoffee.com/ that is aware of its carbon footprint and adjusts its content accordingly based on the user’s location and the current carbon intensity of the electricity grid.

The website uses the user’s IP address to determine their approximate location and fetches the carbon intensity data for that region from a third-party API. It then compares the current carbon intensity with the annual average for that region. If the current intensity is higher than the average, the website hides certain carbon-intensive sections or content to reduce its overall carbon footprint.

1. Fetching the User’s IP Address

fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(data => {
// Use the IP address in the next API call
return fetch(`https://api.thegreenwebfoundation.org/api/v3/ip-to-co2intensity/${data.ip}`);
})

The website uses the ipify API to fetch the user’s IP address, which is then used in the next API call to retrieve the carbon intensity data.

2. Fetching Carbon Intensity Data

fetch(`https://api.thegreenwebfoundation.org/api/v3/ip-to-co2intensity/${data.ip}`)
.then(response => response.json())
.then(data => {
// Process the carbon intensity data
const { data: intensityData } = averageIntensity;
const value = intensityData.hasOwnProperty(data.country_code_iso_3)
? intensityData[data.country_code_iso_3]
: intensityData['USA'];
    // Compare the current intensity with the annual average
if (value < data.carbon_intensity) {
// Current intensity is lower than the average
// Show all content
} else {
// Current intensity is higher than the average
// Hide carbon-intensive sections
}
})
.catch(error => {
// Handle errors
});

The website uses the API provided by The Green Web Foundation to fetch the carbon intensity data based on the user’s IP address. It compares the current carbon intensity with the annual average for that region and decides whether to show or hide certain sections of the website.

3. Toggling Website Sections

document.addEventListener('DOMContentLoaded', function() {
var flag = spotifyFlag; // This is your flag. Set it to false to hide the section.
var toggleSection = document.getElementById('hero');
  if (flag) {
toggleSection.style.display = 'none'; // Hide the section
} else {
toggleSection.style.display = 'block'; // Show the section
}
});

Based on the comparison of carbon intensity values, the website toggles the visibility of certain sections using JavaScript. In this example, the hero section is hidden or shown depending on the value of the spotifyFlag variable.

4. Calculating the Website’s Carbon Emission

async function calculateCarbonEmission() {
try {
const websiteCarbonCalculator = new WebsiteCarbonCalculator({ pagespeedApiKey: 'AIzaSyBV9c3IyhIe--ySKvNek5f225gGm5mBisc' });
const result = await websiteCarbonCalculator.calculateByURL('https://shortcastovercoffee.com');
    if (result && result.co2PerPageview !== undefined) {
document.getElementById('data-container').textContent = `CO2 Emission per Pageview: ${result.co2PerPageview.toFixed(4)}g CO2`;
} else {
document.getElementById('data-container').textContent = "Result object is missing or doesn't have the co2PerPageview property.";
}
} catch (error) {
// Handle errors
}
}
calculateCarbonEmission();

The website also calculates its own carbon emission per pageview using the website-carbon-calculator library. This information is displayed on the website to raise awareness about its carbon footprint.

By implementing these features, the website becomes aware of its carbon footprint and takes steps to reduce its impact on the environment by hiding carbon-intensive sections when the current carbon intensity is high. This approach not only reduces the website’s carbon emissions but also raises awareness among users about the importance of sustainability and environmental consciousness.

I have to mention that creating a carbon aware website does not move the needle much in the larger landscape of tackling climate change. However, it is still something.

Cloud providers like Google Cloud are investing heavily on carbon aware computing. As of today,Amazon Web Services (AWS) and Microsoft Azure do not have a mechanism to shift computing resources to data centers operating on cleaner sources of energy. Both the companies are part of the The Climate Pledge so I am hoping it’s only a matter of time before they do so as well.

How can I contribute to the carbon aware movement?

One of the best ways to associate with the carbon aware computing movement is to follow the works of The Green Software Foundation https://greensoftware.foundation/ Green Software Foundation. Their mission is to reduce the total carbon emissions associated with software by advocating for emissions abatement rather than neutralization. They aim to change the culture of building software across the tech industry, making sustainability a core priority alongside performance, security, cost, and accessibility.

The Green Software Foundation holds a hackathon every year. Their Carbon Hack 2024, is underway from 18th March to 8th April 2024 (https://hack.greensoftware.foundation/?utm_source=articles&utm_medium=website&utm_campaign=hack24). This year, the hackathon challenges developers to use the Impact Framework, a tool that allows measuring and calculating the environmental impact of software. The theme of Carbon Hack 2024 is measurement, and participants are encouraged to build solutions that align with and extend the capabilities of the Impact Framework. They can create models, manifest files, content, or contributions to the framework itself, focusing on measuring carbon emissions, water consumption, or any other environmental impact of software. So, what are you waiting for? Sign up, contribute to this wonderful cause and make your software carbon aware!

Opportunities in Climate Tech

Post the Inflation Reduction Act of 2022, there has been a discernible surge in climate tech startups and opportunities in them as a result. Steven Zhang has built a remarkable website (https://www.climatetechlist.com/) where you can explore numerous such opportunities. This field is only going to explode in the next 5–7 years. Remember, to order our next batch of cheap plastic on TEMU we need a safe and healthy planet to live on!

Note: No Generative Pre-Trained Transformers were harmed in the process of generating this content.

--

--

Shortcast over Coffee
ILLUMINATION

I am Bala and I host the podcast "Shortcast over Coffee"