UTdisplay: U RE Ogreen F FUT E OFGOVERE O APPLYING THE WEB SUSTAINABILITY GUIDELINES TODAY T HIDDE DE VRIES - CSS DAY, AMS Hidde de Vries, CSS Day 2025, Amsterdam
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Yes, we’re all somewhat hypocritical. And… Cover of Ariana Grande’s single “Yes, And?”
Slide 7
We can make the world greener faster at work
Slide 8
EC D g tal Strategy 2030 i i i 2015 Par s Agreement
Slide 9
Slide 10
Slide 11
T IC emissions > aviation emissions
Slide 12
“If the nternet was a country t th would be the 13 largest em tter between Mex co and Braz l” – Sustainable Web Manifesto i i i i i T (based on CO2 emissions in Our World in Data vs I emissions data from Green Web Foundation)
Slide 13
We can make the world greener faster at work
Slide 14
Slide 15
i t af dr r’s to i Ed Web Susta
Slide 16
Ed i t af dr r’s to 6 principles 92 guidelines 253 success criteria 100+ contributors
Slide 17
User E Hosting, Infrastructure &S y y v x Business Strateg
Slide 18
Impact Low Quick wins Med um Noticeable sustainable impact H gh Significant long-term benefit Med um Some changes are needed H gh Heavy refactoring required Effort i i i i Low Minimal implementation
Slide 19
Progress over perfection
Slide 20
10100101010 101010101010 101010101010 101010101010 101010101010 10100101010 Data centres Emissions of server hardware (making and running) What adds to the footp i i Consumer dev Networks Data downloads/ uploads
Slide 21
i i i i El m nat on vs offsett ng
Slide 22
i i i i i i i n o t a n El El m nat on vs offsett ng
Slide 23
We can make the world greener faster at work
Slide 24
Make smaller web pages
Slide 25
Median website size is growing and growing… T T Data: H PArchive 2011 467 kB 2025 2678 kB
Slide 26
“Shav – Danny van Kooten i dannyvankooten.com/blog/2020/website-carbon-emissions
Slide 27
“Shav ~5 fl ghts – Danny van Kooten (AMS- NYC) ~118 kg of beef i i dannyvankooten.com/blog/2020/website-carbon-emissions
Slide 28
Website Carbon Rating Scale based on Grams CO2e per pageview websitecarbon.com/introducing-the-website-carbon-rating-system
Slide 29
websitecarbon.com
Slide 30
e h t n o e t o N numbers EASIER O MEASURE SOME IMES MISSED transferred data, number of H P requests, and DOM size calculations in JS. CPU/GPU, memory. Real user journeys. T P Archive Web Almanac, Sustainability. T T T T T –H
Slide 31
Somet i T – Fershad Irani,
Slide 32
Slide 33
n w ( O2e) = ([(OPDC × (1 n tor) + MDC) + (OPN + MN) + (OPUD + MUD)] × V tio) + ([(OPDC × (1 n tor) + MDC) + (OPN + MN) + (OPUD + MUD)] × V io × (1 tio)) Data transfer Amount of GB transferred when using a service r o e t i e t e s r g i a a R G P r w o r e t a e i p c N s R i E a i s E e F h n c o g i r a s n u i s t C t i e s c a m o R i t a E E H F a E C e g D g g e n a e i r t r e s e G v o i sustainablewebdesign.org/estimating-digital-emissions a A V E R H E SWDM Carbon ntens ty Grams of carbon emitted per kWh at a given time.
Slide 34
CO2. s • Est mate carbon em ss ons produced by • • transferring data on the internet. Get different forms of gr d ntens ty data, like annual average and marginal data by country. Check if a website uses a known green web host. i i i i i j i thegreenwebfoundation.org/co2-js
Slide 35
i M
Slide 36
T A Dutch C
Slide 37
i A Dutch C
Slide 38
“Deta l s data” – Emily rotter (Nomensa) on images in Planet Centred Design i i T youtube.com/watch?v=znz-f_QEGnQ
Slide 39
Ways to save mages Blur or blur parts Remove some background Simplify image i Use image compression
Slide 40
<img src=”” alt=”” loading=”lazy” />
Slide 41
Reduce assets (especially JavaScript)
Slide 42
css-tricks.com/reduce-your-websites-environmental-impact-with-a-carbon-budget
Slide 43
• 151 requests • 1.3 MB transferred • over 20 JavaScript files • pictures of palm trees hidde.blog/the-web-is-fast-by-default-lets-keep-it-fast
Slide 44
What if we optimised for simplicity (radically)? • 2 KB • 0.2 seconds to load hidde.blog/the-web-is-fast-by-default-lets-keep-it-fast
Slide 45
there is so much in between (this is also about attitude)
Slide 46
T he same website today. It’s even bigger.
Slide 47
T he same website today. It’s even bigger.
Slide 48
T he same website today. It’s even bigger.
Slide 49
WSG 4.3. Compress files where it is beneficial
Slide 50
WSG 5.2. Assign a sustainability representative
Slide 51
As people in tech, for us a large part of this is a people problem
Slide 52
ecograder.com
Slide 53
ecograder.com: CSSDay.nl breakdown
Slide 54
i Use Web Platform features
Slide 55
WSG 3.16 Dependencies are appropriately used and maintained
Slide 56
WSG WSG T 3.16 Daekpeenad d e n c i e f s o a r e e g a t n a v . 1 2 3. appropfreiaatteulryeussaenddand native maintaoin n e d y t i l a i t c n fu
Slide 57
Slide 58
Slide 59
i Support older dev
Slide 60
Only more sustainable once you’ve read ~100 books Gerry McGovern, World Wide Waste
Slide 61
Slide 62
Slide 63
Slide 64
Don’t be the reason users upgrade
Slide 65
Dutch CoronaCheck app required Android 6+, iOS 12+
Slide 66
T Dutch CoronaCheck app required Android 6+, iOS 12+ here was a paper fallback. QR code for travel
Slide 67
Progressive enhancement is a good approach
Slide 68
Progressive enhancement is a good approach
Slide 69
Progressive enhancement is a good approach
Slide 70
Progressive enhancement is a good green approach
Slide 71
i Choose green host
Slide 72
WSG 4.1. Choose a sustainable hosting provider
Slide 73
Slide 74
i The cloud s real
Slide 75
i The cloud s real
Slide 76
Slide 77
Colocat on data centres 100 kW - 1 MW, 1-200,000 m2 i Secaucus, New Jersey (Equinix)
Slide 78
i Use or move to a green prov
Slide 79
Find out current state thegreenwebfoundation.org
Slide 80
GWF lists 329 verified green hosting providers in 34 countries. Ask sales reps how theirs compares.
Slide 81
Factors include: renewable energy equipment longevity waste recycling From: WSG, 4.1
Slide 82
T here is only one grid
Slide 83
Slide 84
Green goals easier to find than stats
Slide 85
i Cons
Slide 86
Carbon How clean energy is at a given time i 2 (eg CO /kWh)
Slide 87
Our team
Slide 88
Our team
Slide 89
Our team Anna Mei Jacob Ouiam David George
Slide 90
Slide 91
Slide 92
Only necessary features
Slide 93
i Avo
Slide 94
Slide 95
AI
Slide 96
Colocation data centres Largest data centres (“campuses”) until recently up to 1MW ~150 MW New developments (“megacampuses”) ~1-2000 MW Empire of AI, chapter 12.
Slide 97
Eemshaven, the Netherlands
Slide 98
Middenmeer, the Netherlands
Slide 99
AI
Slide 100
Slide 101
Slide 102
International Energy Agency, Electricity 2024, Analysis and forecast to 2026.
Slide 103
AI
Slide 104
“Em – Wim Vanderbauwhede i wimvanderbauwhede.codeberg.page/articles/google-search-vs-chatgpt-emissions
Slide 105
“Em – Wim Vanderbauwhede i wimvanderbauwhede.codeberg.page/articles/google-search-vs-chatgpt-emissions
Slide 106
AI
Slide 107
“AGI”
Slide 108
Slide 109
“AGI” • Not well defined • Not in extince • Not sure if it can solve global warming
Slide 110
Slide 111
Slide 112
Slide 113
arxiv.org/pdf/2501.16548v1
Slide 114
Slide 115
Adding AI means adding magnitudes more emissions
Slide 116
…so finding ways to not use it is green
Slide 117
Slide 118
i Maybe let users opt-out of what’s carbon-
Slide 119
WSG e h t e t a c i n u 5.4 Comm r e s u f o t c a p m i l a c i g o l eco choices
Slide 120
You could give users choice i Greener opt on 🌳
Slide 121
i “If you add profan
Slide 122
Slide 123
i Work on remov
Slide 124
Stylesheets
Slide 125
CSS, CSS, CSS!
Slide 126
Colours
Slide 127
WSG S S C e l b a n i 3.12 Susta a i d e m e c n user prefere d e s u e r a s e i r que
Slide 128
@media (prefers-color-scheme: dark) { /* provide dark mode */ }
Slide 129
Dark mode good, eco mode better?
Slide 130
i Most OLEDs can turn off p xels (needs full black)
Slide 131
@media (prefers-reduceddata:reduce) { /* offer lighter version */ }
Slide 132
@media (monochrome) { /* all monochrome devices */ }
Slide 133
i Greener pr
Slide 134
CPU/GPU usage
Slide 135
Slide 136
@media (prefers-reducedmotion:reduce) { /* don’t impact CPU/GPU if isn’t preferred */ }
Slide 137
i F
Slide 138
Slide 139
Slide 140
We can make the world greener faster at work
Slide 141
Summary Make smaller web pages Support older devices Choose green hosting Only necessary features (probably avoid AI) Use greener CSS
Slide 142
Slide 143
Slides + links are live on h i T Thank you!
Slide 144
Links H https:// almanac.httparchive.org/en/2024/sustainability Green Software Foundation, https://learn.greensoftware.foundation/. T T GOV.UK, Greening Government Commitments IC 2024, https://www.gov.uk/government/publications/greening-governmentict-annual-report-2023-to-2024/greening-government-commitments-ictannual-report-2023-to-2024
Slide 145
Tools Ecograder, https://ecograder.com/. Are My T Website Carbon, https://www.websitecarbon.com/.
Slide 146
Books Gerry McGovern, World Wide Waste (2020). Anne Currie, Sarah Hsu, Sara Bergman, Building Green Software (2024). Tom Greenwood, Sustainable Web Design (2021). Tim Frick, Designing for Sustainability (2016).
Slide 147
Technical specifications Software Carbon Intensity (SCI) Specification. https:// sci.greensoftware.foundation/. Digital Services Ecodesign ISO standard. https://www.iso.org/standard/ 86105.html Web Sustainability Guidelines. https://w3c.github.io/sustainableweb-wsg/
