display: green; applying the web sustainability guidelines
A presentation at CSS Day in in Amsterdam, Netherlands by Hidde de Vries
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
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/
The tech sector has an elephant in the room: we use too much energy. In 2024, the World Bank estimated the internet to account for 1-4% of global greenhouse emissions, similar to aviation. The good news is: there are documented and measurable opportunities to improve. From code to infrastructure. In this talk, we’ll look at best practices from the W3C’s new Web Sustainability Guidelines and beyond, focusing on lessons you can apply today.
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Ecologi: emission reduction as a service
-
2015 Paris Agreement
-
European Commission: Europe’s Digital Decade: digital targets for 2030
-
Sustainable Web Manifesto
-
Hannah Smith at Pixel Pioneers 2022
-
Web Sustainability Guidelines (Draft)
-
iPhone 14 Product Environmental Report
-
Danny van Kooten’s blog post “CO2 emissions on the web”
From which I quoted: “Shaving off a single kilobyte in a file that is being loaded on 2 million websites reduces CO2 emissions by an estimated 2950 kg per month.”
-
Info on Website Carbon’s rating system
-
The Sustainable Web Design Model
Info on how emissions are calculated.
-
Fershad Irani’s talk “The Nuance of Quantifying Digital Carbon Emissions”
-
CO2.js, by Fershad Irani
-
Corporate report: Greening government ICT: annual report 2023 to 2024
Annual report of the progress made in 2023 to 2024 towards making digital services and technologies in government more sustainable.
-
ecograder.com: get a donut chart of how your site performs
-
Blog post: The web is fast by default: let’s keep it fast
-
Squoosh.app: simple no ads tool to make any images much smaller
-
js;dr = JavaScript required; Didn’t Read.
From which I got the quote: “In 10 years nothing you built today that depends on JS for the content will be available, visible, or archived anywhere on the web.””
-
The Green Web Foundation: check if your host is green
They have metrics for what “green” means, provide data and a tool to look up your domain right now.
-
Electricity 2024, from the International Energy Agency
from which I got the chart that showed energy usage could double.
-
The Guardian: “Energy demands from AI datacentres to quadruple by 2030, says report”
From which I got the quote that AI has the potential to reserve all the gains made in recent years.
-
Paper: “From Efficiency Gains to Rebound Effects: The Problem of Jevons’ Paradox in AI’s Polarized Environmental Debat”
By Alexandra Sasha Luccioni, Emma Strubell and Kate Crawford.
Compares the “AI to destroy all” camp with the “AI will save all” camp, and concludes, among other things, that we ‘cannot simply hope for the best outcome’.
-
Emissions from ChatGPT are much higher than from conventional search
-
AI crawlers vs sysadmins: “Amazon’s AI crawler is making my git server unstable”
-
AI crawlers vs sysadmins: “Looks my server is doing 70% of all its work for LLM training bots”
full quote: “it looks like my server is doing 70% of all its work for these fucking LLM training bots that don’t to anything except for crawling the fucking internet over and over again.“
-
AI crawlers vs sysadmins: “Please stop externalizing your costs directly into my face”
-
AI crawlers vs sysadmins: 50% growth on Wikimedia
Full quote: “bandwidth used for downloading multimedia content [grew] by 50%. This increase is not coming from human readers, but largely from automated programs that scrape [Wikimedia] to feed images to AI models.”
-
Are my third parties green?
-
Green Software Practitioner Learning Guide
-
The Linux Foundation’s free Green Software for Practitioners guide
comes with an exam you can do at the end
-
World Bank: Measuring the Emissions & Energy Footprint of the ICT Sector (PDF)
