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
Optimize Font Files
- 3 Font Rule
- WOFF2 not TTF
- Remove unused elements
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
- Search the directory
Browser Energy Usage
Safari Energy Impact Meter
Font Tools
- Modern Font Stacks system font stacks
- WebFont Generator to convert to to WOFF2
- FontDrop to investigate fonts
- Font Subsetter to remove unused characters
Index
- Awareness
- Best Practices
- Metrics
- Tools
- Community
Community
Artificial Intelligence & Cryptocurrencies
https://www.iea.org/reports/electricity-2024/executive-summary
Thanks!
Sustainable Web Development
By Simon MacDonald
