Digital Carbon Tracker

This tool tracks bandwidth usage paired with APIs from Electricity Maps 🔗 and IPinfo 🔗 to estimate the carbon footprint of your website. It is an open source prototype. All the is available on Github 🔗. Feel free to improve it!

Mainly relying on the Javascript Performance API, logs as networks request when the page loads. But order to be more precise, it can also listen to lazy loaded requests which happens after the page load.

Lazy loaded images

HTML

    
    <picture>
      <source srcset="img.webp">
      <img src="img.png" loading="lazy" onload="lowww(this)">
    </picture>
  

The function onload="lowww(this)" will trigger the tracker. It's important to use width and height attributes as it helps the browser when to load the asset.

HTML5 Video & Audio

HTML

    
    <video loop controls webkit-playsinline playsinline preload="none" onplay="lowww(this)">
      <source src="720.webm" type="video/webm">
      <source src="480.mp4" type="video/mp4">
    </video>

    <audio controls preload="none" onplay="lowww(this)">
      <source src="audio.mp3" type="audio/mpeg">
    </audio>
  

The function onload="lowww(this)" will trigger the tracker, again. To reduce your wbesite impact, you should avoid preloading content whenever you can.

Video.js

HTML

    
    <video class="video-js" controls preload="none" width="1280" height="720" data-setup="{}" onplay="lowww(this)"">
      <source src="720.webm" type="video/webm">
      <source src="480.mp4" type="video/mp4">
    </video>
  

If you use video.js plugin, the tracking would work the same as HTML5 Video.

On-demand embedded content · Experimental and not precise

Using the function lowww_custom on click with the attribute data-lowww which should contain a manually estimated kb size, it is possible to roughly track external content bandwidth usage and impact. The function lowww_custom can load on demand an external content such as a Youtube video is the example below.

HTML

    
    <div id="player-container">
      <button name="iframe-loading" id="player" data-lowww="25000" onclick="lowww_custom(this)">Load me</button>
    </div>
  

Javascript

    
    function lowww_custom(element) {
      //Update tracking
      let estimated_size = Number(element.getAttribute('data-lowww')) * 1000;
      bytes = bytes + estimated_size;
      carbon_rating();
      //console.log(bytes);
    
      //Load external content
      let code = '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/hswqVIDA_Kc?si=nvTs1rX3tOblMndC&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>'
      '
      element.parentNode.innerHTML= code
    }
  

Auto-loading embedded content · Experimental and not precise

Recommendation: for a lower impact, avoid loading external content. If you do, then you should avoid to preload it. This tool is unable to track external requests so if you have to preload external content like a youtube video or a calendly embed (like in the example below), add the class lowww_auto to the embed with the attribute data-lowww which should contain a manually estimated kb size.

HTML

    
    <div class="lowww_auto calendly-inline-widget" data-lowww="2500" data-url="https://calendly.com/lowwwimpact"></div>
    <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>