Carbon Aware Project

The carbon aware project is a project about assessing the carbon impact of digital technologies. This project had two tracks:

1- Website redesign

Together with Studio Alvin, we completed a thorough overhaul of my studio’s website, which you can find here. We transitioned from a clunky dual presence hosted on both Tumblr and GitHub to a full CSS website on a Hugo framework, also hosted on GitHub and served through a CDN. To minimise carbon emissions, we focused on four main areas:

1. User experience
2. Green hosting
3. Image optimisation
4. Limiting animations, JavaScript, and various libraries.

Here are a few examples of the measures we took:

*Using a CSS script instead of JavaScript masonry to display projects. This script randomises the display, reshuffling at every build and is unique to each page.

• Utilising system fonts to avoid downloading fonts to the client’s terminal.
• Choosing GitHub for hosting, as it is said to run on renewable energy.
• Simplifying user navigation to eliminate unnecessary pages.
• Resizing and caching images.

All these measures resulted in a reduction of the website’s emissions, as tracked by carbon tracking tools (GreenIT, EcoGrader, EcoIndex).

We decided to maintain a primarily visual website, which makes reducing impact more challenging. The main area we still need to address is the project display area. We are currently exploring how we might replace some images with SVG assets to further reduce the load on the project display page.

All these measures resulted in a reduction of the website’s emissions, as tracked by carbon tracking tools (GreenIT, EcoGrader, EcoIndex).

We decided to maintain a primarily visual website, which makes reducing impact more challenging. The main area we still need to address is the project display area. We are currently exploring how we might replace some images with SVG assets to further reduce the load on the project display page.

2 Energy Sources Visualisation

On the other hand, together with Gijs de Heij, we developed a visualisation of the energy sources powering the internet. A functioning demo is available here. Though we have yet to find a way to implement it on a CDN architecture, this first prototype shows in real time which energies are powering your website visit. Our project started with inspiration from the low-tech website and the Solar Protocol, but we wanted to highlight the interdependency we are part of and to take into account the importance of the energy grid in our digital infrastructure.

The API consists of two parts, client side code which can easily be included in any web page and the server side code which interacts with the API’s providing geo localisation services and information on the current energy mix. The API is designed to be used as a service, where publishers include the client side code in their own webpage without the need to install server side code.

To determine the type of energy used in the request the API detects the location of the both device requesting the original webpage and the location of the server hosting the original webpage.

The address of the client device is detected by the server by reading the IP address of the device which sent the request. The location is then looked up in geo localisation databases. When the client device connects through a VPN, or a cellular network the precision of the localisation will be influenced.

To detect the location of the server hosting the original website, that is, the website which included the client side code, the API reads the ‘Origin’ or ‘Referer’ HTTP headers. These headers provide the hostname of the server hosting the original website. The IP address of the found hostname is looked up using DNS and a location is determined through the geo localisation API. The precision of the server localisation can be influenced by the configuration of the original website, e.g.: when it is hosted on a content delivery network.

This Project was co-funded by the European Union’s Single Market Programme.