Reducing website emissions

Stuart Lowe's slides for #PlanetData4 (21st October 2021).

Reducing website emissions

Stuart Lowe, ODI Leeds
21 October 2020

The median website is about
4 times as large as 10 years ago
(8 times larger on mobile) Source: httparchive.org, September 2021
0 1MB 2MB
MobileDesktop

Measuring emissions

I adapted Website Carbon’s CarbonAPI code (PHP; MIT licence) and analysed the carbon emissions for:

  • UK Local Authorities

    408 websites
    mean = 1.28g
    median = 0.97g
    worst = 9.71g

  • UK Universities

    165 websites
    mean = 3.15g
    median = 1.98g
    worst = 30.28g

  • UK Government orgs

    582 websites
    mean = 1.08g
    median = 0.59g
    worst = 42.05g

* mean for UK websites is 1.76g (Website Carbon)

What can you do?

Images and videos

  • is the image necessary?
  • use appropriately sized images (don’t add a 6000x3000px image)
  • use responsive images
  • use vector graphics (SVG) instead of photos if you can
  • minify images using TinyPNG/TinyJPG, ShortPixel, or SVGMinify
  • check if a modern image format such as WEBP is smaller than a JPG/PNG
  • reduce video usage
  • don’t autoplay videos

Fonts

  • custom web fonts can add as much as 250kB of page weight
  • use fewer font variations
  • use system fonts (WOFF/WOFF2 are smaller than TTF/OTF)

Code

  • write cleaner, shorter HTML/CSS/Javascript
  • avoid unnecessary CMS plugins e.g. Danny van Kooten saved 59kg CO2
  • avoid unnecessary code libraries – you might not need jQuery etc
  • reduce Javascript use or use it efficiently (transfer & processing)
  • reduce tracking/advertising scripts
  • use static webpages (a CMS needs database lookups to create the page)
  • use Progressive Web App techniques to cache data on the user’s device

Finding out what to improve

Get tips from tools such as Lighthouse (Chrome) or PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/

Thanks

open-innovations.org/projects
(0.03g of CO2/visit)