Reducing website emissions

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

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)

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/