Sustainable Web Development

Simon MacDonald

@macdonst@mastodon.online

Index

  • Awareness
  • Best Practices
  • Metrics
  • Tools
  • Community

How much does the global Internet contribute to greenhouse gases?

3-4%

https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think

🌐

=

✈️

=

🌍

We can’t recycle our way out of climate change

✅

https://www.cbc.ca/news/science/one-person-actions-climate-change-1.6642485

Report: Plastics, Oil Industry Deceived Public on Recycling Use for More Than 50 Years

https://www.desmog.com/2024/02/15/recycling-plastic-center-for-climate-integrity-report-fraud/

Good News!

Everyone in this room has an outsized impact

How do you sell sustainable web development internally?

Performance

Look for ways to improve performance while reducing the amount of energy your site uses.

 

Regulation

Countries are enshrining their climate goals into law. Consequently, in order to do business with these countries, you will need to show your commitment to sustainable practices.

Large sites like Amazon or Walmart have found that each 100ms delay on their sites leads to 1% less sales.

The 🇬🇧 Gov already requires this and 🇨🇦 Gov has published their strategy.

Certification

Some companies require ISO14001 certification in order to do business with them.

Branding

It's crass but branding works. Otherwise, manufacturers wouldn't slap a "lite" label on all those products in the grocery store. 

Having these environment certifications can give you a competitive advantage when landing deals.

Other studies show "eco friendly" goods are outperforming conventional ones 2 to 1 and have a price premium of 27%

Index

  • Awareness
  • Best Practices
  • Metrics
  • Tools
  • Community

Use the right language

〞

In programming, the rule of least power is a design principle that "suggests choosing the least powerful language suitable for a given purpose".

– W3C TAG Finding 23 Feb 2006

Use
The
Platform

Tracking

No Tracking

Resist 3rd Party Tracking Scripts

Tracking Alternatives

  • Server Side Analytics
  • Use a streamlined client side solution

Optimize Font Files

Cut Down on Image Sizes

  • Use vector images (SVG) over photographs when appropriate
  • Use a tool like ImageOptim to remove metadata and compress images
  • Use modern (smaller) image formats like webp
  • Set the "lazyload" attribute on images that are below the fold
  • Blur the edges of images to reduce file size
  • Use the srcset and sizes on the img element to deliver the right sized image to the user
<img src="image.jpg" 
     srcset="small.jpg 300w, medium.jpg 600w, large.jpg 900w"
     sizes="(max-width: 300px) 100vw, 
            (max-width: 600px) 50vw, 
            (max-width: 900px) 33vw, 900px"
/>

Reduce JavaScript Usage

  • Stop using JavaScript for things HTML and CSS can do better.
  • Evaluate whether you really need a framework for your site or not.
  • Use dynamic imports
  • Compress your code (gzip/brotli) 

Cache Agressively

  • Fingerprint your files
  • Cache forever

Block the Bots

  • Bots are energy vampires
  • Use your providers Web Application Firewall (WAF)
  • And/or write your own robots.txt
# Allow all bots
User-agent: *
Disallow: 

# Except ChatGPT and Bard
User-agent: GPTBot
Disallow: /

User-agent: Google-Extended
Disallow: /

A few words about colour

  • Organic Light Emitting Diode (OLED) screens
  • Black pixels use the least energy
  • White pixels use the most energy
  • A general rule of thumb is that darker colours use less energy
  • The caveat is blue uses more power than red or green

Index

  • Awareness
  • Best Practices
  • Metrics
  • Tools
  • Community

Metrics

Web Metrics

  • Largest Contentful Paint (LCP)
  • First Input Delay (FIP)
  • Cumulative Layout Shift (CLS)
  • Interaction to Next Paint (INP) 

Sustainable Web Metrics

  • Data Transfer
  • Carbon intensity of electricity

Estimating Data Transfer Emissions with Page Weight

Page Weight: the total number of kilobytes the first time someone visits a page.

Page Weight

2018-06-01 to 2024-01-01

https://httparchive.org/reports/state-of-the-web#bytesTotal

Page Weight Budgets

  • Profile your site to create a benchmark for page weights
    • First visit
    • Subsequent visits
  • Benchmark your site against the industry leaders

🏋️‍♀️

💡

>

kWh/GB

Carbon intensity of electricity

gCO

2

/kWh

Not are sources are equal

gCO

2

/kWh

Intensity of electicity generation by region

Page Weight *

Energy Intensity =

Total amount of CO2

Index

  • Awareness
  • Best Practices
  • Metrics
  • Tools
  • Community

Checking CO2 Emissions

Estimating CO2 Emissions

  • CO2.js works in browser and node.js

Electricity Generation by Region

Green Web Hosting

Browser Energy Usage

Safari Energy Impact Meter

Font Tools

Index

  • Awareness
  • Best Practices
  • Metrics
  • Tools
  • Community

Community

Artificial Intelligence & Cryptocurrencies

https://www.iea.org/reports/electricity-2024/executive-summary

Thanks!