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 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!
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.
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.
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)
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.
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:
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:
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
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