Aware Web

Aware Web - A light weight widget

A simple embeddable widget for website designers and developers to make their websites carbon aware. Taking the power of carbon emission information and helping them with optimising their websites to make them less carbon intensive is the goal of this widget.

The problem

The internet consumes a lot of electricity. 416.2TWh per year to be precise. To give you some perspective, that's more than the entire United Kingdom.

Hosting with a sustainable web host is just NOT enough anymore. Optimising for the average user anywhere in the world helps reduce the carbon emissions even more! 

What does Aware Web do?

For web developers and designers, it is a simple, light-weight, privacy friendly embeddable JS that auto optimises your websites based on the user's location and their closest grid and provides seamless experience of your existing website while making it less carbon consuming and more carbon aware!

1. Doesn't track or store any data of the user or the website.

2. Works in real-time and uses the available grid rating to decide what to optimise on the website.

3. Gives the power to web developers to easily make their websites less carbon emitting without having to worry about 100 different things to change.

4. Light weight plugin and CDN (soon to come) to make the plugin itself less carbon intensive.

5. Developers have full control of what elements to tweak and what elements to NOT optimise for better user experience.

How it uses the Carbon Aware API/SDK

Uses CarbonAware.WebApi's /emissions/bylocation API to fetch the rating information and here is the flow:

- When a user opens any Aware Web enabled website, based on their location, the closest grid region is determined using the latitude and longitude values.

- Once the closest region is determined, the region and the current time are passed to the /emissions/bylocation API to fetch the rating. 

- Depending on the thresholds set (will be configurable in the future), the widget auto decides which elements to restrict and which elements to show.

Impact

According to figures from the HTTP Archive, websites have only become less efficient over the years: today, the average web page weighs in at around 2MB, compared with less than 500KB back in 2010.

According to online carbon calculator Website Carbon, the average website produces 1.76g of CO2 for every page view; so a site with 100,000 page views per month emits 2,112kg of CO2 every year.

Climate-friendly websites are still very much in the minority; after all, there are 1.83 billion websites on the internet today, most of which do not observe carbon-lite design principles

if(electricity is clean) = basic optimisations to be in place and less carbon footprint

if(electricity is dirty) = optimise website for better consumption of resources and even lesser carbon footprint

Reducing emissions is possible by (a few reasons)

• Limiting the number of images that feature on each web page. Images are the single largest contributors to page weight. The more images you use and the larger those image files, the more data needs to be transferred and the more energy is required. Opting for SVG graphics instead of formats like JPEG, PNG and GIF can help decrease image size, and you can use a compression tool to reduce it even more.
• Swapping custom fonts for system fonts, which are already preinstalled on most devices, to further lower emissions.
• Reduce payloads and bloats when not required.

Most of these can be achieved with lesser human intervention and more automation which Aware Web will become the go-to for in the future making the web less carbon intensive and more energy friendly. Reduction may be marginal but the volume of websites that can potentially use this simple integration and enable better websites and their millions of requests to resources is incomprehensible.

Feasibility

Highlights of Aware Web

 - Works with any website on the planet.

 - Requires the least amount of time required to integrate with just two lines of code and extremely customisable with easy to understand language.

<!-- AWARE WEB WIDGET -->        
<div class="ca-widget"></div>
<script id="ca-widget" src="./widgets/widget.js" data-config="./widgets/config.json" async defer></script>

To get to production ready, here are the things to do:

1. Move to webpack and NodeJS to make it minified and smallest size possible.
2. Better API integrations to find closest grid to the user and also the host of the website itself.
3. Installable WordPress plugin as a start to help reach the 43.2%* of websites built on just WordPress.

Vision and Next Steps

The goal is simple. Giving power to Web Developers and Designers to let them focus on designing better experiences and letting Aware Web handle the basics of becoming less carbon intensive and using more clean energy when available.

The immediate next steps for this project are:

1. Host the widget on a CDN
2. Move the project to NodeJS completely and use webpack to auto-minify and make the widget javascript extremely light and the least resource intensive possible.
3. 3.  To create awareness, the Carbon Aware Website badge to become more interactive and provide information to users in easy to understand language.
4. Create standardised replacements for high resource consuming elements on the web like files, media (images, videos, etc), iframes, etc.
5. Launch as alpha to a few customers to gather feedback and improve on the feedback.
6. Give additional parameters to the web developers to configure what elements to hide/replace if the energy is bad.

Github & Screenshots

The MVP Resource is accessible on Github or click here: https://github.com/harishkotra/aware-web

Before Aware Web

After Aware Web

Note: Kitten images are just indicative. Will be replaced with a more neutral user friendly images before going to production

Resources

1. https://www.wired.co.uk/article/internet-carbon-footprint

2. https://vwo.com/blog/reduce-website-carbon-footprint/

3. https://blog.hubspot.com/website/wordpress-stats