Sustainable Web

18. Forschungstage Informatik
25th & 26th June 2026
Robin Ohs & Andreas Schmidt | Saarland University

Prolog

  • Brief Intro Round
    name, BWInf/RPL, #gernePerDu?

  • Questions?
    shoot them right away

  • Hydration
    covered? we add breaks for you

  • Dehydration
    where?

  • Anything else?

Why are YOU here?

Maybe you ask yourself...
  • How bad is computing for the environment?

  • How can computing be made more sustainable?

Sustainability

A 50+ Year Tale of Science and Politics (and Computers)
in less than 20min

Date the Quote! Club of Rome (1972)

"Without substantial changes in resource consumption, the most probable result will be a rather sudden and uncontrollable decline in both population and industrial capacity."

Source

Since 50+ years, we know about the need for change in resource consumption, but only little has happened.

UN SDGs (2015)



Sustainable Development



Economic

growth vs. planet exploitation


Environmental

protect ecosystem
(fauna, water, …)


Social

social equity,
health care, …

Unclear?
SCS
Ethics for Nerds

Crises galore...

by computer scientists, these tend to be considered

Local
  • Global Warming
    caused by greenhouse gas emissions
    i.e. $gCO_2eq$

  • Pollution

  • Bio Hazard

Remote
  • Biodiversity Loss

  • Deforestation

  • Melting Ice & Sea Rise

The News

Cover

Aside

 

ICT sector barely referenced in this 2024 book
Forecast



One Planet



vs



One Life
or even YOLO


Spoiler
There is a Middle Way
to protect One Planet and have One Good Life!

How to Change Course?

  1. Stay focussed on this workshop 🥵
    and learn more about the domain

  2. Adopt sustainable practises
    also beyond computing

  3. Spread the word

Isn't this a CS workshop?

  • Sustainability without Computing
    I'm happy to discuss various things, sometimes as everyday as
    soap bars vs. bottles or worm systems


  • Computing for Sustainability
    What can we compute to make our life more sustainable?
    Earth Observation, Smart Grid, ...


  • Sustainable Computing
    How do we compute without spoiling our environment?
    Green Software, Repairable Hardware, ...

It needs a Vision to Build...



Pyramids

Temples

Cathedrals
e.g. Cologne
1248 - 1880

BER

Numerous workers worked hard* on these,
sure they would never see the result in their lifetime...
* Let's also ignore ancient working conditions for a minute...

Solarpunk

  • We're the First Generation to
    Build a Sustainable Future


Hannah Ritchie

in "Not the End of the World"

Hydration
Break


(Refresher on)
Web Technology

Web Architecture



How do they communicate?

Client

(HTTP) Request


									GET / HTTP/1.1
									Host: some.website
									User-Agent: ...
									Accept: */*
									
								

Server

(HTTP) Response


HTTP/1.1 200 OK
Content-Length: 12
Content-Type: text/plain; charset=utf-8

Hello World!

Building Web Applications

Structure - What Elements exist?
Style - How does it look?
Logic - What does my app do?

Preview:
A Calculator

Markup

  • HTML files loaded by browser
  • Define structure and content

Style

  • CSS
  • Visual Presentation (Style)

Style (picoCSS)

Logic


	function appendToDisplay(value) {
		document.getElementById('display').value += value;
	}

	function calculate() {
		const element = document.getElementById('display');
		const result = eval(element.value);
		element.value = result;
	}

Greening the Web
by Hand

Know Your Limits

Budget

Paris Agreement Yearly Budget for 1.5°C
which is no longer reachable
\[B= \frac{2tCO_2eq}{\mathrm{year} \cdot \mathrm{capita}}\] 🇩🇪 Reality: 7.02tCO2eq (in 2023)
[Wikipedia]

Your Hourly Spending Limit \(L = 228\frac{gCO_2eq}{h}\)

Offerings
  • 666W
    🇩🇪 Avg. 2025: 342gCO2eq/kWh

    • 57mins (@700W)
    • 20mins (@2000W)
  • 1.6km or 27km
    with fuel or electric energy

  • 15g Steak
  • 500g Tofu

Internet

  • Carbon Intensity \[I\;\mathrm{in}\;\frac{CO_{2}eq}{R}\] (\(R\) is arbitrary but fixed unit of work)

  • Downloaded Bytes
    Aslan et al.: \(60\frac{Wh}{GB}\)

  • Hourly Spending Limit \[666W / 60\frac{Wh}{GB} = 11.1 \frac{GB}{h} \] NetFlix 4K: 7GB/h or 63% of your limit
    (vs. Low: 0.3GB/h)

  • 325 million NetFlix users
    end of 2025; 4% of world population
    do not watch 24/7, but approx. 1h/day

Every Byte Counts!

Most Visited Website
  • Google
    87.5 bn visits/month
    according to similarweb

  • ecograder Weight
    1.77MB/visit
    Googled for 'Green Web'

Carbon Footprint
  • Data Rate: \(213 \frac{TB}{h}\)

  • Carbon Rate: \(\frac{4.2tCO2eq}{h}\)

  • Budget Rate: \(\frac{2.1\,\mathrm{cap.} \cdot \mathrm{yr} }{h}\)

  • Population: \(18.4\,k \mathrm{cap.}\)
    or Dudweiler

What to do about it?

User
  • Search less Reduce
    in the old days, people discussed about facts for an hour

  • Search differently Rethink
    e.g. using ecosia.org; smaller footprint

Provider
  • Lose weight Reduce
    lower data volume per visit

  • Host green Reduce
    lower carbon per data volume

Lower Volume




Minification


Compression


Message Formats

Minification

  • Same content, minimal bytes.

  • Shorten within language:

    • Drop optional elements.
      whitespace, separators, …

    • Compact arbitrary identifiers.
      local variables, functions, …

Before (115B)

								.klass a,
								.klass a:hover {
									color: blue;
									text-decoration: underline;
								}
								
								.klass p {
									margin-bottom: 1em;
								}
								
After (88B, -23%)

								.klass a,.klass a:hover{color:blue;text-decoration:underline}.klass p{margin-bottom:1em}
								

Compression

Lossless
  • Smaller,
    with restorable original.
    Usually code.

    Deduplicate byte patterns, outside language.
    Explicit decompression step needed.

Lossy
  • Smaller,
    not restorable.
    Usually media.

  • Merge information content, aim for minimal perceivable effect.
    Format stays.

Message Formats

Fundamentally
  • Textual (e.g. ASCII)
    Large, human-readable and sometimes self-describing.
    35691 (5B)

  • Binary
    Small, far from self-describing. Needs decoding instructions, e.g. layout.
    0x8b6b (2B)

JSON (157B)

{
  "messages": [
    { "user": "A", "message": "Hello World!", 
	  "timestamp": "2022-02-22T22:22:22Z"},
    { "user": "B", "message": "Hi there!",
	  "timestamp": "2022-02-22T22:22:22Z"}
  ]
}
							
MessagePack (128B, -18%)

								81 a8 6d 65 73 73 61 67 65 73 92 83 a4 75 73 65 72 a1 41 a7 6d 65 73 73 61 67
								65 ac 48 65 6c 6c 6f 20 57 6f 72 6c 64 21 a9 74 69 6d 65 73 74 61 6d 70 b4 32
								30 32 32 2d 30 32 2d 32 32 54 32 32 3a 32 32 3a 32 32 5a 83 a4 75 73 65 72 a1
								42 a7 6d 65 73 73 61 67 65 a9 48 69 20 74 68 65 72 65 21 a9 74 69 6d 65 73 74
								61 6d 70 b4 32 30 32 32 2d 30 32 2d 32 32 54 32 32 3a 32 32 3a 32 32 5a
								

Better Regularity




Caching


(HTTPS)
Server Push


Lazy Loading

Caching

Heuristic
  • Server responds with
    some.file including
    Date and LastModified.

  • Client stores response for processing.

  • If enabled, cache response for 10% of timestamp difference.

  • Accessing some.file before: use cache.

Explicit

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1024
Date: Tue, 22 Feb 2022 22:22:22 GMT
Cache-Control: max-age=604800
…
							
  • Relative: max-age

  • Absolute: Expires

(HTTPS) Server Push

normally
  • Request  index
    and download in full. as one example

  • Once browser renders  index, it finds
     fancy

  • Return to server, ask for  fancy

with Push

Server knows that
 index and  fancy
go together.
Tells the client on request.


server {
    listen 443 ssl http2;

    location = / {
        http2_push /img/fancy.png;
        root /var/www/html;
        index index.html;
    }
}
							

Lazy Loading

Idea
  • Opposite of eager push.

  • "Below the fold" content often not viewed.


Implementation

...
							

Greener Hosting

Local Intensity
🇩🇪 Avg. 2025: 342gCO2eq/kWh
  • Differs between places.
    Got solar panels? Wind mills?

  • Differs along "circuits".
    data center, switches, (fibre) cables, home router, smart phone

Ideas
  • Pick a green residential energy provider.

  • Pick a hosting provider that does.
    there are online sources

Hydration
Break

Greening the Web
with Automated Tools

Electricity Maps

ecograder.com


Website     Results

ecograder.com


Website     Results

co2.js

automates several tasks we did before by hand

Byte Emissions

import { co2 } from '@tgwf/co2'

// Using the Sustainable Web Design (SWD) model.
const swd = new co2({ model: "swd" })

// Use the perByte method to calculate emissions for 1 GB
const emissions = swd.perByte(1000 * 1000 * 1000)
							
Green Host Checking


import { hosting } = from "@tgwf/co2";

hosting.check("google.com").then((result) => {
  console.log(result);
});
								
Ground Truth: Green Domain Data Set

for more check the docs

grid-aware-websites

Idea
  • On load: access extra resource.

  • Extra resource is behind CDN.
    Content Delivery Network: geo-distributed replicas

  • Estimate location L via replica.

  • Ask ElectricityMaps for I(L).

  • Return I to adaptive client.

carbon.txt

  • Discoverable
    similar in spirit to robots.txt
  • Supports Compliance
    e.g. with EU Corporate Sustainability Reporting Directive (CSRD)


version="0.4"
last_updated="2025-12-22"

[org]
disclosures = [
    { doc_type='web-page', url='...', title='...' }
]

[upstream]
services = [
    {
        domain='www.cloudflare.com',
        service_type='content-delivery-network'
    },
    ...
]
							

Hands On

ElectricityMaps

Interesting questions are, e.g.

  • Which EU country had the lowest yearly average intensity in 2024?
    repeat for hourly and daily scale

  • Given a region, at which hour of the day is the energy cleanest?
    Does it differ during the year?

ecograder Comparison

(freely) register at ecograder or use snapshotted reports

Summary

  • Computing (and hence the web) must and can become sustainable.
    e.g. reduce carbon, but also hardware waste

  • Reducing data volume and regularity can help.

  • Various tools for carbon-awareness are already available.
    and more are released every day


Efficient Web
with wasm

Reminder

Efficiency can* improve sustainability!
— us, several minutes ago
(*= if no rebound happens)

Javascript's Inefficiencies

  • Client-side Execution
    tightly bound to client machine's capabilities

  • Interpreted
    things can change at runtime, disallowing certain optimizations

  • Untyped
    insecure, but also unclear what the most efficient machine type representation is

Use Case: Sorting

BubbleSort

function bubblesort(a) {
  for (var i = 0; i < a.length; i++)
  {
    for (var j = 0; j < (a.length-i-1); j++)
    {
      if (a[j] > a[j + 1]) {
        var temp = a[j];
        a[j] = a[j + 1];
        a[j + 1] = temp;
      }
    }
  }
  return a;
}
Usage

var arr = [234, 
  43, 
  /* ...*/
];
bubblesort(arr);
We use arr with 1 million entries.

Demo:
PureJS

TypeScript

Add Types transpiles to JS
fill it

Demo:
TS2JS

WASM

Compile from many languages to WASM
fill it

AssemblyScript

Add WASM Types and compile to WASM
fill it

Demo:
AS2WA

Results

Approach Runtime
PureJS ???
TS2JS ???
AS2WA ???