# data[].attributes.title
display: green; applying the web sustainability guidelines

# data[].attributes.blurb.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Yes, we’re all somewhat hypocritical. And… Cover of Ariana Grande’s single “Yes, And?”

# data[].attributes.slidedeck.data[].slides[].desc.html
We can make the world greener faster at work

# data[].attributes.slidedeck.data[].slides[].desc.html
EC D g tal Strategy 2030 i i i 2015 Par s Agreement

# data[].attributes.slidedeck.data[].slides[].desc.html
T IC emissions > aviation emissions

# data[].attributes.slidedeck.data[].slides[].desc.html
“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)

# data[].attributes.slidedeck.data[].slides[].desc.html
We can make the world greener faster at work

# data[].attributes.slidedeck.data[].slides[].desc.html
i t af dr r’s to i Ed Web Susta

# data[].attributes.slidedeck.data[].slides[].desc.html
Ed i t af dr r’s to 6 principles 92 guidelines 253 success criteria 100+ contributors

# data[].attributes.slidedeck.data[].slides[].desc.html
User E Hosting, Infrastructure &S y y v x Business Strateg

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Progress over perfection

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
i i i i El m nat on vs offsett ng

# data[].attributes.slidedeck.data[].slides[].desc.html
i i i i i i i n o t a n El El m nat on vs offsett ng

# data[].attributes.slidedeck.data[].slides[].desc.html
We can make the world greener faster at work

# data[].attributes.slidedeck.data[].slides[].desc.html
Make smaller web pages

# data[].attributes.slidedeck.data[].slides[].desc.html
Median website size is growing and growing… T T Data: H PArchive 2011 467 kB 2025 2678 kB

# data[].attributes.slidedeck.data[].slides[].desc.html
“Shav – Danny van Kooten i dannyvankooten.com/blog/2020/website-carbon-emissions

# data[].attributes.slidedeck.data[].slides[].desc.html
“Shav ~5 fl ghts – Danny van Kooten (AMS- NYC) ~118 kg of beef i i dannyvankooten.com/blog/2020/website-carbon-emissions

# data[].attributes.slidedeck.data[].slides[].desc.html
Website Carbon Rating Scale based on Grams CO2e per pageview websitecarbon.com/introducing-the-website-carbon-rating-system

# data[].attributes.slidedeck.data[].slides[].desc.html
websitecarbon.com

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Somet i T – Fershad Irani,

# data[].attributes.slidedeck.data[].slides[].desc.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
i M

# data[].attributes.slidedeck.data[].slides[].desc.html
T A Dutch C

# data[].attributes.slidedeck.data[].slides[].desc.html
i A Dutch C

# data[].attributes.slidedeck.data[].slides[].desc.html
“Deta l s data” – Emily rotter (Nomensa) on images in Planet Centred Design i i T youtube.com/watch?v=znz-f_QEGnQ

# data[].attributes.slidedeck.data[].slides[].desc.html
Ways to save mages Blur or blur parts Remove some background Simplify image i Use image compression

# data[].attributes.slidedeck.data[].slides[].desc.html
<img src=”” alt=”” loading=”lazy” />

# data[].attributes.slidedeck.data[].slides[].desc.html
Reduce assets (especially JavaScript)

# data[].attributes.slidedeck.data[].slides[].desc.html
css-tricks.com/reduce-your-websites-environmental-impact-with-a-carbon-budget

# data[].attributes.slidedeck.data[].slides[].desc.html
• 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

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
there is so much in between (this is also about attitude)

# data[].attributes.slidedeck.data[].slides[].desc.html
T he same website today. It’s even bigger.

# data[].attributes.slidedeck.data[].slides[].desc.html
T he same website today. It’s even bigger.

# data[].attributes.slidedeck.data[].slides[].desc.html
T he same website today. It’s even bigger.

# data[].attributes.slidedeck.data[].slides[].desc.html
WSG 4.3. Compress files where it is beneficial

# data[].attributes.slidedeck.data[].slides[].desc.html
WSG 5.2. Assign a sustainability representative

# data[].attributes.slidedeck.data[].slides[].desc.html
As people in tech, for us a large part of this is a people problem

# data[].attributes.slidedeck.data[].slides[].desc.html
ecograder.com

# data[].attributes.slidedeck.data[].slides[].desc.html
ecograder.com: CSSDay.nl breakdown

# data[].attributes.slidedeck.data[].slides[].desc.html
i Use Web Platform features

# data[].attributes.slidedeck.data[].slides[].desc.html
WSG 3.16 Dependencies are appropriately used and maintained

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
i Support older dev

# data[].attributes.slidedeck.data[].slides[].desc.html
Only more sustainable once you’ve read ~100 books Gerry McGovern, World Wide Waste

# data[].attributes.slidedeck.data[].slides[].desc.html
Don’t be the reason users upgrade

# data[].attributes.slidedeck.data[].slides[].desc.html
Dutch CoronaCheck app required Android 6+, iOS 12+

# data[].attributes.slidedeck.data[].slides[].desc.html
T Dutch CoronaCheck app required Android 6+, iOS 12+ here was a paper fallback. QR code for travel

# data[].attributes.slidedeck.data[].slides[].desc.html
Progressive enhancement is a good approach

# data[].attributes.slidedeck.data[].slides[].desc.html
Progressive enhancement is a good approach

# data[].attributes.slidedeck.data[].slides[].desc.html
Progressive enhancement is a good approach

# data[].attributes.slidedeck.data[].slides[].desc.html
Progressive enhancement is a good green approach

# data[].attributes.slidedeck.data[].slides[].desc.html
i Choose green host

# data[].attributes.slidedeck.data[].slides[].desc.html
WSG 4.1. Choose a sustainable hosting provider

# data[].attributes.slidedeck.data[].slides[].desc.html
i The cloud s real

# data[].attributes.slidedeck.data[].slides[].desc.html
i The cloud s real

# data[].attributes.slidedeck.data[].slides[].desc.html
Colocat on data centres 100 kW - 1 MW, 1-200,000 m2 i Secaucus, New Jersey (Equinix)

# data[].attributes.slidedeck.data[].slides[].desc.html
i Use or move to a green prov

# data[].attributes.slidedeck.data[].slides[].desc.html
Find out current state thegreenwebfoundation.org

# data[].attributes.slidedeck.data[].slides[].desc.html
GWF lists 329 verified green hosting providers in 34 countries. Ask sales reps how theirs compares.

# data[].attributes.slidedeck.data[].slides[].desc.html
Factors include: renewable energy equipment longevity waste recycling From: WSG, 4.1

# data[].attributes.slidedeck.data[].slides[].desc.html
T here is only one grid

# data[].attributes.slidedeck.data[].slides[].desc.html
Green goals easier to find than stats

# data[].attributes.slidedeck.data[].slides[].desc.html
i Cons

# data[].attributes.slidedeck.data[].slides[].desc.html
Carbon How clean energy is at a given time i 2 (eg CO /kWh)

# data[].attributes.slidedeck.data[].slides[].desc.html
Our team

# data[].attributes.slidedeck.data[].slides[].desc.html
Our team

# data[].attributes.slidedeck.data[].slides[].desc.html
Our team Anna Mei Jacob Ouiam David George

# data[].attributes.slidedeck.data[].slides[].desc.html
Only necessary features

# data[].attributes.slidedeck.data[].slides[].desc.html
i Avo

# data[].attributes.slidedeck.data[].slides[].desc.html
AI

# data[].attributes.slidedeck.data[].slides[].desc.html
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.

# data[].attributes.slidedeck.data[].slides[].desc.html
Eemshaven, the Netherlands

# data[].attributes.slidedeck.data[].slides[].desc.html
Middenmeer, the Netherlands

# data[].attributes.slidedeck.data[].slides[].desc.html
AI

# data[].attributes.slidedeck.data[].slides[].desc.html
International Energy Agency, Electricity 2024, Analysis and forecast to 2026.

# data[].attributes.slidedeck.data[].slides[].desc.html
AI

# data[].attributes.slidedeck.data[].slides[].desc.html
“Em – Wim Vanderbauwhede i wimvanderbauwhede.codeberg.page/articles/google-search-vs-chatgpt-emissions

# data[].attributes.slidedeck.data[].slides[].desc.html
“Em – Wim Vanderbauwhede i wimvanderbauwhede.codeberg.page/articles/google-search-vs-chatgpt-emissions

# data[].attributes.slidedeck.data[].slides[].desc.html
AI

# data[].attributes.slidedeck.data[].slides[].desc.html
“AGI”

# data[].attributes.slidedeck.data[].slides[].desc.html
“AGI” • Not well defined • Not in extince • Not sure if it can solve global warming

# data[].attributes.slidedeck.data[].slides[].desc.html
arxiv.org/pdf/2501.16548v1

# data[].attributes.slidedeck.data[].slides[].desc.html
Adding AI means adding magnitudes more emissions

# data[].attributes.slidedeck.data[].slides[].desc.html
…so finding ways to not use it is green

# data[].attributes.slidedeck.data[].slides[].desc.html
i Maybe let users opt-out of what’s carbon-

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
You could give users choice i Greener opt on 🌳

# data[].attributes.slidedeck.data[].slides[].desc.html
i “If you add profan

# data[].attributes.slidedeck.data[].slides[].desc.html
i Work on remov

# data[].attributes.slidedeck.data[].slides[].desc.html
Stylesheets

# data[].attributes.slidedeck.data[].slides[].desc.html
CSS, CSS, CSS!

# data[].attributes.slidedeck.data[].slides[].desc.html
Colours

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
@media (prefers-color-scheme: dark) { /* provide dark mode */ }

# data[].attributes.slidedeck.data[].slides[].desc.html
Dark mode good, eco mode better?

# data[].attributes.slidedeck.data[].slides[].desc.html
i Most OLEDs can turn off p xels (needs full black)

# data[].attributes.slidedeck.data[].slides[].desc.html
@media (prefers-reduceddata:reduce) { /* offer lighter version */ }

# data[].attributes.slidedeck.data[].slides[].desc.html
@media (monochrome) { /* all monochrome devices */ }

# data[].attributes.slidedeck.data[].slides[].desc.html
i Greener pr

# data[].attributes.slidedeck.data[].slides[].desc.html
CPU/GPU usage

# data[].attributes.slidedeck.data[].slides[].desc.html
@media (prefers-reducedmotion:reduce) { /* don’t impact CPU/GPU if isn’t preferred */ }

# data[].attributes.slidedeck.data[].slides[].desc.html
i F

# data[].attributes.slidedeck.data[].slides[].desc.html
We can make the world greener faster at work

# data[].attributes.slidedeck.data[].slides[].desc.html
Summary Make smaller web pages Support older devices Choose green hosting Only necessary features (probably avoid AI) Use greener CSS

# data[].attributes.slidedeck.data[].slides[].desc.html
Slides + links are live on h i T Thank you!

# data[].attributes.slidedeck.data[].slides[].desc.html
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

# data[].attributes.slidedeck.data[].slides[].desc.html
Tools Ecograder, https://ecograder.com/. Are My T Website Carbon, https://www.websitecarbon.com/.

# data[].attributes.slidedeck.data[].slides[].desc.html
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).

# data[].attributes.slidedeck.data[].slides[].desc.html
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/

# data[].attributes.resources.data[].title
Ecologi: emission reduction as a service

# data[].attributes.resources.data[].title
European Commission: Europe’s Digital Decade: digital targets for 2030

# data[].attributes.resources.data[].title
Danny van Kooten’s blog post “CO2 emissions on the web”

# data[].attributes.resources.data[].desc.html
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.”

# data[].attributes.resources.data[].desc.html
Info on how emissions are calculated.

# data[].attributes.resources.data[].title
Fershad Irani’s talk “The Nuance of Quantifying Digital Carbon Emissions”

# data[].attributes.resources.data[].title
Corporate report: Greening government ICT: annual report 2023 to 2024

# data[].attributes.resources.data[].desc.html
Annual report of the progress made in 2023 to 2024 towards making digital services and technologies in government more sustainable.

# data[].attributes.resources.data[].title
ecograder.com: get a donut chart of how your site performs

# data[].attributes.resources.data[].title
Blog post: The web is fast by default: let’s keep it fast

# data[].attributes.resources.data[].title
Squoosh.app: simple no ads tool to make any images much smaller

# data[].attributes.resources.data[].title
js;dr = JavaScript required; Didn’t Read.

# data[].attributes.resources.data[].desc.html
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.””

# data[].attributes.resources.data[].title
The Green Web Foundation: check if your host is green

# data[].attributes.resources.data[].desc.html
They have metrics for what “green” means, provide data and a tool to look up your domain right now.

# data[].attributes.resources.data[].title
Electricity 2024, from the International Energy Agency

# data[].attributes.resources.data[].desc.html
from which I got the chart that showed energy usage could double.

# data[].attributes.resources.data[].title
The Guardian: “Energy demands from AI datacentres to quadruple by 2030, says report”

# data[].attributes.resources.data[].desc.html
From which I got the quote that AI has the potential to reserve all the gains made in recent years.

# data[].attributes.resources.data[].title
Paper: “From Efficiency Gains to Rebound Effects: The Problem of Jevons’ Paradox in AI’s Polarized Environmental Debat”

# data[].attributes.resources.data[].desc.html
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’.

# data[].attributes.resources.data[].title
Emissions from ChatGPT are much higher than from conventional search

# data[].attributes.resources.data[].title
AI crawlers vs sysadmins: “Amazon’s AI crawler is making my git server unstable”

# data[].attributes.resources.data[].title
AI crawlers vs sysadmins: “Looks my server is doing 70% of all its work for LLM training bots”

# data[].attributes.resources.data[].desc.html
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.“

# data[].attributes.resources.data[].title
AI crawlers vs sysadmins: “Please stop externalizing your costs directly into my face”

# data[].attributes.resources.data[].title
AI crawlers vs sysadmins: 50% growth on Wikimedia

# data[].attributes.resources.data[].desc.html
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.”

# data[].attributes.resources.data[].title
Green Software Practitioner Learning Guide

# data[].attributes.resources.data[].title
The Linux Foundation’s free Green Software for Practitioners guide

# data[].attributes.resources.data[].desc.html
comes with an exam you can do at the end

# data[].attributes.resources.data[].title
World Bank: Measuring the Emissions & Energy Footprint of the ICT Sector (PDF)