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

Yes, we’re all somewhat hypocritical. And… Cover of Ariana Grande’s single “Yes, And?”

We can make the world greener faster at work

EC D g tal Strategy 2030 i i i 2015 Par s Agreement

T IC emissions > aviation emissions

“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)

We can make the world greener faster at work

i t af dr r’s to i Ed Web Susta

Ed i t af dr r’s to 6 principles 92 guidelines 253 success criteria 100+ contributors

User E Hosting, Infrastructure &S y y v x Business Strateg

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

Progress over perfection

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

i i i i El m nat on vs offsett ng

i i i i i i i n o t a n El El m nat on vs offsett ng

We can make the world greener faster at work

Make smaller web pages

Median website size is growing and growing… T T Data: H PArchive 2011 467 kB 2025 2678 kB

“Shav – Danny van Kooten i dannyvankooten.com/blog/2020/website-carbon-emissions

“Shav ~5 fl ghts – Danny van Kooten (AMS- NYC) ~118 kg of beef i i dannyvankooten.com/blog/2020/website-carbon-emissions

Website Carbon Rating Scale based on Grams CO2e per pageview websitecarbon.com/introducing-the-website-carbon-rating-system

websitecarbon.com

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

Somet i T – Fershad Irani,

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.

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

i M

T A Dutch C

i A Dutch C

“Deta l s data” – Emily rotter (Nomensa) on images in Planet Centred Design i i T youtube.com/watch?v=znz-f_QEGnQ

Ways to save mages Blur or blur parts Remove some background Simplify image i Use image compression

<img src=”” alt=”” loading=”lazy” />

Reduce assets (especially JavaScript)

css-tricks.com/reduce-your-websites-environmental-impact-with-a-carbon-budget

• 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

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

there is so much in between (this is also about attitude)

T he same website today. It’s even bigger.

T he same website today. It’s even bigger.

T he same website today. It’s even bigger.

WSG 4.3. Compress files where it is beneficial

WSG 5.2. Assign a sustainability representative

As people in tech, for us a large part of this is a people problem

ecograder.com

ecograder.com: CSSDay.nl breakdown

i Use Web Platform features

WSG 3.16 Dependencies are appropriately used and maintained

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

i Support older dev

Only more sustainable once you’ve read ~100 books Gerry McGovern, World Wide Waste

Don’t be the reason users upgrade

Dutch CoronaCheck app required Android 6+, iOS 12+

T Dutch CoronaCheck app required Android 6+, iOS 12+ here was a paper fallback. QR code for travel

Progressive enhancement is a good approach

Progressive enhancement is a good approach

Progressive enhancement is a good approach

Progressive enhancement is a good green approach

i Choose green host

WSG 4.1. Choose a sustainable hosting provider

i The cloud s real

i The cloud s real

Colocat on data centres 100 kW - 1 MW, 1-200,000 m2 i Secaucus, New Jersey (Equinix)

i Use or move to a green prov

Find out current state thegreenwebfoundation.org

GWF lists 329 verified green hosting providers in 34 countries. Ask sales reps how theirs compares.

Factors include: renewable energy equipment longevity waste recycling From: WSG, 4.1

T here is only one grid

Green goals easier to find than stats

i Cons

Carbon How clean energy is at a given time i 2 (eg CO /kWh)

Our team

Our team

Our team Anna Mei Jacob Ouiam David George

Only necessary features

i Avo

AI

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.

Eemshaven, the Netherlands

Middenmeer, the Netherlands

AI

International Energy Agency, Electricity 2024, Analysis and forecast to 2026.

AI

“Em – Wim Vanderbauwhede i wimvanderbauwhede.codeberg.page/articles/google-search-vs-chatgpt-emissions

“Em – Wim Vanderbauwhede i wimvanderbauwhede.codeberg.page/articles/google-search-vs-chatgpt-emissions

AI

“AGI”

“AGI” • Not well defined • Not in extince • Not sure if it can solve global warming

arxiv.org/pdf/2501.16548v1

Adding AI means adding magnitudes more emissions

…so finding ways to not use it is green

i Maybe let users opt-out of what’s carbon-

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

You could give users choice i Greener opt on 🌳

i “If you add profan

i Work on remov

Stylesheets

CSS, CSS, CSS!

Colours

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

@media (prefers-color-scheme: dark) { /* provide dark mode */ }

Dark mode good, eco mode better?

i Most OLEDs can turn off p xels (needs full black)

@media (prefers-reduceddata:reduce) { /* offer lighter version */ }

@media (monochrome) { /* all monochrome devices */ }

i Greener pr

CPU/GPU usage

@media (prefers-reducedmotion:reduce) { /* don’t impact CPU/GPU if isn’t preferred */ }

i F

We can make the world greener faster at work

Summary Make smaller web pages Support older devices Choose green hosting Only necessary features (probably avoid AI) Use greener CSS

Slides + links are live on h i T Thank you!

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

Tools Ecograder, https://ecograder.com/. Are My T Website Carbon, https://www.websitecarbon.com/.

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).

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/