Towards a Sustainable Web
Insights from the W3C's
Sustyweb Guidelines
IPC Berlin 2024
Carsten Windler
Carsten Windler
Principal Engineer @
linkedin.com/in/cwindler
carstenwindler.de
plana.earth
Data centres are significant drivers of growth in electricity demand in many regions. After globally consuming an estimated 460 TWh in 2022, data centres’ total electricity consumption could reach more than 1 000 TWh in 2026.
This demand is roughly equivalent to the electricity consumption of Japan.
How can that be?
1,000,000,000 monthly visits* x 2 gCO2e x 12 = 24,000,000,000 gCO2e = 24,000 mtCO2e per year
~5,700 gasoline-powered cars*
driven for one year
What can we do about it?
- Check cache headers
- Optimize images
- Enable lazy loading
- Bring out trash
Sustyweb
Sustyweb
What is Sustyweb?
- 80+ paragraphs on sustainable IT
- 270 A4 pages
- Tons of additional resources
- Organized in 4 sections
- Amazing
Sustyweb
Sustyweb
User-Experience Design
Web Development
Hosting, Infrastructure and Systems
Business Strategy and Product Management
User-Experience Design
§ 2.10 - Use Recognized Patterns
better user-experiences → less time → fewer emissions
§ 2.10 - Use Recognized Patterns
§ 2.11 - Avoid Manipulative Patterns
Dark patterns in E-commerce
§ 2.11 - Avoid Manipulative Patterns
Dark patterns
- Manipulating the visitor
- Ethically bad
- Unsustainable
- Should be avoided
§ 2.11 - Avoid Manipulative Patterns
Doomscrolling
- FOMO
- Keeps people using app
- Autoplay content
§§ 2.15 ff.
Take a More Sustainable Approach to Assets
Hmmm...
this needs more
animations
§§ 2.15 ff.
Take a More Sustainable Approach to Assets
- 270 request
- 5.9 MB data (compressed)
- 14.9 MB assets
- 45 request
- 816 KB data (compressed)
- 2.1 MB assets
§ 2.29 - Incorporate Compatibility Testing
- Support older devices
- Longer usage of devices → less e-waste and emissions
§ 2.29 - Incorporate Compatibility Testing
Web Development
§ 3.2 - Minify Your HTML, CSS, and JavaScript
Better performance → fewer emissions
Optimize caching
Less assets
Use native functionality
Optimize assets
Lazy loading
No or fewer Ads
Minify HTML/CSS/JavaScript
Tree-shaking
Fewer requests
SVGs instead bitmaps
No videos
DOM size
§ 3.2 - Minify Your HTML, CSS, and JavaScript
😱
§ 3.1 - Identify Relevant Technical Indicators
Performance budgets
§ 3.7 - Rigorously Assess Third-Party Services
External Services
- Emissions unknown
- Use as few as possible
- Click-to-load
§ 3.7 - Rigorously Assess Third-Party Services
Libraries / Modules / Packages
- Only when really necessary
- Compare alternatives
- Performance?
§ 3.7 - Rigorously Assess Third-Party Services
Frameworkless
- Yes, that's right
- Consider using no framework
- Wtf?
- VanillaJS
- VanillaPHP
Hosting, Infrastructure and Systems
§ 4.1 - Choose a Sustainable Hosting Provider
Green Hosting Database
§ 4.11 - Use the Lowest Infrastructure Tier Meeting Business Requirements
Dark data: 6.4 million tonnes of CO2e / year
- Store only what is necessary
- Log only what is necessary
- Data retention
- Garbage collectors / log rotation
- Compression / file formats
§ 4.12 - Store Data According to Visitor Needs
Business Strategy and Product Management
Business Strategy and Product Management
- Have an Ethical and Sustainability Product Strategy
- Assign a Sustainability Representative
- Raise Awareness and Inform
- Communicate the Ecological Impact of User Choices
- Include Responsible Financial Policies
Communicate the Ecological Impact of User Choices
Benefits of a sustainable web
- Reduce emissions
- Save money
- Better user experience
- Better SEO
- Higher conversion rates
Criticism
Cons
- Wants to achieve too much
- No "Low hanging fruits"
Pros
- Vast amount of information
- Expert knowledge
