Wie das Web nachhaltiger werden kann

Es ist Frühling 2021. Während sich der grösste Teil der Welt nach wie vor im Pandemie-Ausnahmezustand befindet, überbieten sich die Internet-Gemeinde und die Kunstwelt gerade täglich im Schaffen von Non-fungible Tokens (NFTs). Nebst der Frage nach Sinn und Unsinn dieser Tokens, steht vor allem der massive Energieverbrauch in der Kritik, welcher bei deren Erstellung auf der Blockchain anfällt. Es ist bei Weitem nicht das erste Mal, dass die Blockchains damit bezüglich der Klimakrise ins Blickfeld der medialen Berichterstattung rücken. So findet sich gerade das Bitcoin Mining aufgrund des immensen Stromverbrauchs regelmässig in den Negativschlagzeilen wieder und wird mittlerweile als reales Risiko für den Klimaschutz gesehen, sollte sich nichts an der Energieeffizienz und -intensität ändern.

Nebst dem Crypto Mining hat es vor allem das Streaming von Inhalten in den vergangen Monaten immer öfters in die breite öffentliche Wahrnehmung geschafft. Verschiedenste Studien wurden herausgegeben, diskutiert, widerlegt und haben schlussendlich dazu geführt, dass betroffene Firmen aus der Industrie sich selbständig mit dem Thema auseinandergesetzt und eine aktive Kommunikation gesucht haben.

Ausserhalb des Fokus der Allgemeinheit bedarf auch das Trainieren von künstlicher Intelligenz teilweise Unmengen an Energie. Gemäss einer Studie der University of Massachusetts verschlang das Training eines einzelnen Modells zur natürlichen Sprachverarbeitung den Gegenwert an CO2-Emissionen, den 300 Hin- und Rückflüge zwischen San Francisco und New York oder fünf amerikanische Autos über ihren ganzen Lebenszyklus generieren. Dieser Umstand führt dazu, dass die KI-Industrie mitunter auch als "Ölindustrie des Webs" bezeichnet wird; ein Titel, den sie sich mit der digitalen Anzeigen-Industrie teilt, welche mit deutlich weniger gesellschaftsdienlichen Ansprüchen höchst ineffizient und verschwenderisch unterwegs ist.

Sieht man von diesen Bereichen ab, wird es im deutschsprachigen Raum jedoch ziemlich still bezüglich negativer Klimakritik am Web. Nach wie vor gilt die Digitalisierung als vermeintlich "sauber" und die digitale Transformation eher als Teil der Lösung als als Teil eines Problems. Dies, obwohl die durch die ICT produzierten Treibhausgasemissionen die viel gescholtene Flugindustrie längst überholt haben. Gemäss letzten Schätzungen aus 2019 liegt der globale Anteil des ICT-Sektors an Treibhausgasemissionen bei 3,7 Prozent, was einer Zunahme von über 50 Prozent seit 2013 entspricht. Setzen wir unser Wachstum ohne weitere Massnahmen fort, prognostiziert die EU, dass sich der Fussabdruck des ICT-Sektors bis 2040 auf rund 14 Prozent der globalen Emissionen erhöhen wird.

Webentwicklung trägt ihren Anteil am Emissionswachstum

Ein bisher wenig beachteter Treiber dabei sind unsere Websites. Seit 2013 hat sich die Median-Grösse einer mobilen Website gemäss dem HTTP Archive von 427 KB auf 1900 KB mehr als verdreifacht. Dabei fällt auf, dass vor allem zwei Dateitypen massgeblich an der Zunahme beteiligt sind: Bilder und JavaScript. Dies ist insofern nicht weiter verwunderlich, als dass die schneller werdenden mobilen Netzwerke und immer potenteren mobilen Geräte immer umfangreichere digitale Erlebnisse ermöglichen. Obwohl die Einsparungsmöglichkeiten im Vergleich zu den andern genannten Beispielen eher marginal erscheinen, sind hier vor allem die schiere Masse und die relativ einfachen Optimierungsmöglichkeiten massgebend, welche ein Handeln nötig machen.

Denn an all den genannten Emissionen hängt ein Preisschild für Mensch und Umwelt.

Wie viele Kilowattstunden Strom für die Bereitstellung, Übertragung und Konsumation von 1GB Daten anfallen, wird konstant debattiert und regelmässig neu definiert. Die neuesten Schätzungen der International Energy Agency (IEA) bewegen sich zwischen 0,025 und 0,23kWh/GB. Wie viel Energie bei der Übertragung der Daten umgewandelt wird, hängt mitunter auch von den verwendeten Netzwerken an. So verursacht die Konsumation über das Kabel einen Bruchteil dessen, was bei einer Übertragung mittels Mobilfunk anfällt.

Nun kommt aber auch noch die Art und Weise der Stromproduktion ins Spiel. Einen relativ guten Live-Überblick über die CO2-Intensität der Produktion und des Verbrauchs des Stroms in den verschiedenen Ländern liefert das Projekt Electricity Map. Auch wenn es bezüglich der Deklaration des Stroms und der Vollständigkeit der Daten bestimmt gewisse Unsicherheiten gibt, bietet die Karte einen guten Gesamtüberblick; die Daten sind auch via API verfügbar. Gerade in den Vereinigten Staaten wird jedoch noch ein grosser Teil der Datenzentren mit Kohlestrom betrieben, was auf der Karte leider nicht ersichtlich ist. Welche verheerenden Folgen der Kohleabbau aufgrund mangelnder Regulierungen in den Vereinigten Staaten nebst dem CO2-Ausstoss für gewisse Bevölkerungsschichten und die Umwelt mit sich bringt, lässt sich in Tatiana Schlossbergs Buch "Inconspicuous consumption – the environmental impact you don't know you have" nachlesen.

Wie sich diese Faktoren nun auf die Konsumation einer einzelnen Website auswirken, versucht das Projekt Website Carbon zu visualisieren. Auch wenn hier mit einigen Unsicherheiten gearbeitet wird, bleibt zumindest die direkte Vergleichbarkeit gewährleistet. Gepaart mit einer realen Anzahl Page Views mag der prognostizierte Ausstoss für die eigene Website erstaunen und zum Nachdenken anregen.

Förderung von Reparierbarkeit vs. geplante Obsoleszenz

Doch nicht nur die Daten müssen übertragen, sondern die dafür nötige Hardware muss zunächst produziert und vertrieben werden. Während sich dabei die Hersteller immer grössere Mühe geben, auf die Nachhaltigkeit in der Produktion zu verweisen, so bleibt vor allem die Reparierbarkeit und die oftmals schon im Vorfeld geplante Ausserstandsetzung nach wenigen Jahren problematisch.

Frankreich hat aus diesem Grund zu Beginn dieses Jahres einen "Repairability Index" eingeführt, welcher Hersteller von elektronischen Geräten ab dem kommenden Jahr verpflichtet, deren Reparierbarkeit auszuzeichnen. Es wird spannend zu beobachten sein, ob das Beispiel Schule macht und welcher Effekt dadurch erzielt werden kann. Im Schnitt fallen rund 80 Prozent der über den Lebenszyklus eines elektronischen Geräts ausgestossenen Treibhausgasemissionen bei der Herstellung an. Deshalb gilt, je länger ein Gerät in Betrieb bleibt, desto besser.

(Source: green-alliance.org.uk)

All diesen genannten Umständen zum Trotz darf nicht unerwähnt bleiben, dass die Europäische Union gerade in den digitalen Technologien auch ein riesiges Potenzial sieht, um die globalen Emissionen massiv zu senken.

Der Wind der Veränderung

Dafür muss aber zunächst ein Bewusstsein für die derzeitige Problematik geschaffen werden. Aktuell dominiert vielerorts eine Kultur unbewussten Konsums und unbewusster Verschwendung. Gerade in der Schweiz ist der Strom günstig und immer verfügbar und der Verbrauch wird kaum je gross hinterfragt. Ähnlich verhält es sich mit Rechenleistung und Speicherplatz. Bevor teure menschliche Arbeit in eine Code-Optimierung fliesst oder das bestehende System hinterfragt wird, kauft man oftmals einfach mehr Rechenleistung und Speicherplatz hinzu, um sich dem Problem zu entledigen. Dabei ist gerade den Anwenderinnen und Anwendern der Systeme kein Vorwurf zu machen. So ist wohl noch nie jemandem in seinem Intranet angeboten worden, dass das System statt des 10 MB grossen Original-Bildes eine auf 1 MB optimierte Kopie des Bilds speichern könnte.

Hier bieten sich für die Spezialistinnen und Spezialisten aus dem UX-Umfeld vielfältige Möglichkeiten, die digitalen Anwendungen zukünftig nachhaltiger zu gestalten und die Nutzer und Nutzerinnen bewusst zu nachhaltigem Handeln zu leiten. Auch wenn der Hebel jedes Einzelnen dabei zunächst klein erscheint, so ist es die Summe an kleinen Entscheidungen, die schlussendlich hilft, eine grosse Gesamtwirkung zu erzielen. Bestimmt werden neue elegante Lösungen schnell nachgeahmt, was den positiven Effekt zusätzlich verstärken wird.

Gerade im englischsprachigen Teil der Web-Industrie findet seit ein paar Jahren ein merklicher Umschwung statt. Während bei den grossen Cloud-Anbietern vermutlich primär monetäre und Marketing-orientierte Aspekte die Motivation hin zu einer effizienteren und nachhaltigeren Infrastruktur begründen, so befasst sich die Climate Action.tech Community mit allen möglichen Aspekten, wie sich das Web nachhaltiger entwickeln kann.

Auch wenn die Stimmen aktuell noch verhältnismässig leise sind, wird die Bewegung hin zu nachhaltigen digitalen Dienstleistungen zweifelsohne auch im deutschsprachigen Raum an Gewicht gewinnen. Es ist schon jetzt spannend zu verfolgen, wie sich Anbieter wie Google überlegen, ihre rechenintensivsten Aufgaben der Sonne folgend den ganzen Tag über den Erdball dorthin zu verlagern, wo gerade erneuerbare Energie zur Verfügung steht. Auch dies kann wieder zum Anstoss genommen werden, zu überdenken, zu welcher Zeit beispielsweise die Backup-Prozesse der eigenen Applikationen laufen.

Nachhaltigkeit und Performance schliessen sich nicht aus

Es ist noch gar nicht so lange her, als in den Anfängen des "modernen" Webs grosser Wert auf Optimierung gelegt wurde. Wie Steve Souders 2008 festgestellt hat, gehen Web-Performance-Optimierungen und ein bewusster Umgang mit Ressourcen Hand in Hand.

Bezogen auf unsere Websites gibt es eine Fülle an relativ einfacher technischer Anpassungen, welche helfen, den CO2-Ausstoss unserer digitalen Produkte und Dienstleistungen zu reduzieren, ohne das Erlebnis für unsere Besucherinnen und Besucher zu beeinträchtigen.

Der zentralste, aber in vielen Fällen wohl auch der schwierigste Punkt dabei ist, das Hosting mittels erneuerbarer Energie zu betreiben. Wenn diese Umstellung nicht unmittelbar realisierbar ist, stehen uns verschiedenste Massnahmen zur Verfügung, um die Effizienz unserer Website zu verbessern und die CO2-Emissionen dadurch zu verringern Die Liste zeigt einen Auszug und ist nicht abschliessend zu verstehen:

• Aktivierung von HTTP/2, bald HTTP/3 auf dem Webserver. Hierbei gilt es zu beachten, dass die Datei-Priorisierung richtig konfiguriert ist. Dank Multiplexing und komprimierten Headern erfolgt die Auslieferung der Website in den allermeisten Fällen ohne zusätzliche Optimierungen schneller. Die richtige Priorisierung wiederum hilft, dass die Rendering-kritischen Dateien zuerst ausgeliefert werden.

• Die Verwendung eines Content Delivery Networks (CDN). Das CDN verteilt die Dateien an verschiedene geographische Standorte. So können diese viel schneller konsumiert werden, was sich wiederum positiv auf den Energieverbrauch auf dem Endgerät auswirken kann.

• Gzip- und Brotli-Komprimierung auf dem Webserver aktivieren. Wie das bekanntere Gzip ist Brotli ein Kompressionsalgorithmus. Gegenüber Gzip arbeitet Brotli allerdings noch effizienter. Dies geht jedoch leider zu Lasten des Arbeitsspeichers und der Rechenleistung des Webservers. Aus diesem Grund empfiehlt es sich, die Assets bereits im Build-Prozess zu encodieren und mittels der Static-Option auf dem Server nur noch auszuliefern. Wie dies funktioniert, erklärt Jeremy Wagner in seinem Artikel "Brotli Static Compression". Welche Dateien überhaupt komprimiert werden sollten, hat der CDN-Anbieter Fastly dokumentiert. Mittels dieser Anpassung können in den meisten Fällen grosse Einsparungen bei der übermittelten Datenmenge erzielt werden.

• Betrieb der Website auf dem JAM-Stack. Längst nicht jede Website muss mittels eines der grossen JavaScript-Frameworks als Single Page Application (SPA) betrieben werden. In vielen Fällen bietet es sich an, die Seiten statisch aufzubereiten und die Website via CDN dem sogenannten JAM-Stack bereitzustellen und zu betreiben.

• Keine Autoplay-Videos. Automatisch abspielende Videos mögen für gewisse Produkte allenfalls beim erstmaligen Anschauen einen gewissen Mehrwert transportieren. Jedoch spätestens beim zweiten Besuch ist der Effekt verflogen und wir transportieren bloss noch unnötig Daten. Die Besucherinnen und Besucher sollten vor die Wahl gestellt werden, ob das Video wirklich konsumiert werden möchte.

• Serverside-Rendering. Ein Serverside-Rendering führt dazu, dass gewisse Arbeiten nur einmal auf dem Server statt auf jedem Gerät der Endkunden ausgeführt werden muss.

• Serverside-Rendering mit einem vorgelagerten Caching System. So lange sich nichts an einer Seite verändert, sollte sie nicht bei jedem Aufruf wieder von neuem auf dem Server zusammengestellt werden müssen.

• Code-Splitting. Sobald HTTP/2 auf dem Server verfügbar ist, können wir damit beginnen, den Code granularer zu unterteilen. Im Idealfall wird nur noch ausgeliefert, was für die derzeit angezeigte Seite nötig ist. Wie granular das Splitting sein darf, wird idealerweise wieder anhand von Messungen erhoben. Das Code-Splitting hilft nicht nur den Ladevorgang der Seite zu beschleunigen, sondern sorgt auch dafür, dass nicht die ganze CSS- oder JavaScript-Datei ungültig gemacht und aus dem Cache des Benutzers entfernt werden muss, sollte sich nur an einem Modul was ändern. Dadurch können potenziell viele Anfragen eingespart werden.

• Langlebige Cache Headers. Je länger eine Datei auf dem Gerät des Benutzers gespeichert werden kann, desto besser. So lange man eine gut funktionierende Cache-Invalidierung hat, können sehr langlebige Cache-Headers gesetzt werden.

• Lazy-Loading nutzen. Nach Möglichkeit, sollten Assets erst dann geladen werden, wenn sie auch effektiv genutzt und angeschaut werden. Das gilt für Bilder als auch für JavaScript- oder CSS-Dateien, die erst bei einer bestimmten Besucher-Interaktion benötigt werden. Die Herausforderung hierbei ist, diese weder zu früh noch zu spät zu laden, um die Besuchererfahrung nicht zu beeinträchtigen. Für iframes und Bilder unterstützt Google Chrome ab der Version 75 dieses optimierte Laden mittels eines nativen Attributes.

• Responsive Images. Obwohl es inzwischen verschiedene Möglichkeiten gibt, wie man Bilder optimiert ans jeweilige Endgerät ausliefern kann, sieht man in der Praxis immer noch sehr viel ungenutztes Potenzial. Oftmals werden die Bilder viel zu gross ausgeliefert, was nicht nur einen längeren Download zur Folge haben, sondern auch Einfluss auf den Speicherverbrauch nehmen kann.

• Aufbereitung und Auslieferung von Bildern. Bei der Aufbereitung und Auslieferung der Bilder liegt oftmals noch sehr viel Potential brach. Während früher die Bilder oftmals von Hand aufbereitet wurden, bietet sich heute auf jeden Fall eine automatisierte Lösung an. Um den Google Engineer Ilya Grigorik zu zitieren: "Automation ftw! If you're hand optimizing images, you're doing it wrong." Richtig konfiguriert, sorgen die automatisierten Dienste dafür, dass die Bilder in der bestmöglichen Konstellation für den jeweiligen Browser ausgeliefert werden. Je nachdem wie gut die aktuell verwendete Lösung ist, liegen hier bei einem Umstieg Einsparungen von 30-50 Prozent des Datenverkehrs ohne sichtbaren Qualitätsverlust im Bereich des Möglichen.

• Dark Mode. Am Dark Mode scheiden sich die Geister. Die einen mögen ihn, die anderen empfinden das Lesen von hellem Text auf dunklem Grund als eher mühsam. Unabhängig von persönlichen Präferenzen kann sich der Dark Mode bei OLED-Bildschirmen äussert günstig auf den Energieverbrauch auswirken. Erste Praxis-Tests zeigten je nach Mobiltelefon bis zu 30 Prozent weniger Verbrauch. Bei LED-Bildschirmen entfällt dieser Effekt.

• Nutzung von Intersection Observer. Die Intersection Observer API bietet uns in den neuen Browsern die Möglichkeit, zu prüfen, ob sich ein Element im aktuell sichtbaren Bereich befindet. Wir können uns die Intersection Observer zunutze machen, um rechenintensive Aktionen erst dann zu starten, wenn sie in den sichtbaren Bereich gelangen und diese gleich wieder zu beenden sobald sie den sichtbaren Bereich verlassen. So können wir zum Beispiel die Animation eines automatisch ablaufenden Videos oder Karussells stoppen und können auch hier wieder mit einem einfachen Trick mithelfen, unnötig Energie zu verschwenden.

• Reflows verhindern. Beim Laden sollte die Website möglichst wenig springen. Jeder Reflow zwingt den Browser, die Website erneut aufzubauen und kostet Energie. Besonders auf mobilen Geräten kann dies einen merkbaren Effekt haben. Bei Bildern kann dies zum Beispiel umgangen werden, indem mittels eines Platzhalters der benötige Platz vorreserviert wird.

• Service Worker. Besonders auf mobilen Geräten ist der Browser Cache oftmals relativ klein. Selbst wenn wir bei unseren Assets langlebige Caching Headers gesetzt haben, ist es daher möglich, dass diese früher oder später aus dem Cache verdrängt werden. Mittels Service Worker können wir mit der richtigen Strategie sowohl unsere statischen Assets (zum Beispiel JavaScript, CSS, SVG-Icons) als auch Inhalte in einem individuellen, durch die Entwicklerinnen und Entwickler kontrollierten Cache speichern. Wie Mathias Bynens von Google schreibt, entfallen in Chrome für JavaScript-Dateien, welche im Service Worker gespeichert wurden, die Parse- und Kompilierungsarbeiten beim wiederholten Aufruf; dies ist ein nicht zu unterschätzender Gewinn.

• Designsystem. In grossen Firmen lohnt sich der Aufbau eines sogenannten Designsystems. Dies hilft, dass die verschiedenen Teams nicht mehrmals dasselbe Modul in leicht unterschiedlichen Varianten bauen müssen, sondern möglichst viele Bauteile wiederverwendbar gestaltet werden.

Es gibt eine Vielzahl weiterer Möglichkeiten, wie die Bereitstellung und die Konsumation der durch uns erstellten Websites und der darüber beworbenen Produkte optimiert werden können.

Erfreulicherweise gesellen sich durch die Optimierung der Web Performance oftmals zusätzlich positive Faktoren hinzu; der wirtschaftliche Effekt schneller Ladezeiten auf "Engagement" und "Conversion" wird auf WPO Stats fortlaufend anhand von Erfolgsgeschichten aus der Praxis dokumentiert.

Es braucht Standards und Sensibilisierung

Fragt man bei Berufsleuten in der Web-Industrie herum, so wird schnell klar, dass die Umweltauswirkungen des Webs leider weder in der Berufsbildung noch im Studium ein Thema sind. Diesen Umstand gilt es so schnell wie möglich zu verbessern.

Es stellt sich die Frage, ob es nicht an der Zeit wäre, analog der Web Content Accessibility Guidelines (WCAG) die Arbeit an einem neuen Standard "Web Sustainability Guidelines (WSG)" in Angriff zu nehmen. Gerade der Bund und bundesnahe Betriebe werden sich zukünftig mit den durch ihre IT verursachten Scope 3 Emissionen befassen müssen, wenn man trotz stetig voranschreitender Digitalisierung den nötigen Beitrag zur Erreichung der Klimastrategie 2050 leisten möchte.

Wenn wir den Fokus nochmals öffnen; was können wir denn aktuell als Web-Industrie tun, um unseren CO2 zu verringern?

• Emissionen durch Optimierungen primär vermindern, statt bestehende Ineffizienz zu kompensieren.

• Emissionen verringern und Effizienz im Hosting-Bereich durch innovative Projekte in Richtung Kreislaufwirtschaft verbessern (Beispiele: Windcloud 4.0 und Sustainable Digital Infrastructure Alliance.

• Problematik und Lösungsansätze in Bildung aufnehmen, Wissen in der Industrie breiter abstützen und debattieren.

• Nachhaltige Beschaffung vorantreiben.

• Rechenintensive Aufgaben ausführen lassen, wenn ein Überschuss an erneuerbarer Energie im Netz vorhanden ist und nicht wenn fossile Energie importiert werden muss.

• Sillicon-Valley-Ambitionen hinterfragen; beispielsweise tut nicht jede App-gesteuerte Mikromobilitätsform der Umwelt zwangsläufig was Gutes, auch wenn sie batteriebetrieben funktioniert.

• Lösungen bauen, die auch auf älteren Geräten funktionieren. Damit reduzieren wir das Bedürfnis der Anwender und Anwenderinnen, stetig neue Geräte zu kaufen.

• Ganzheitlich Konzepte entwickeln hin zu einem Environment-Centered Design.

• Standardisierte Lösungen und Methoden zur Emissionsmessung erarbeiten.

Was können wir als Individuen tun?

• Das Sustainable Web Manifesto unterschreiben und dementsprechend handeln.

• Bewusst konsumieren. Auch wenn ein E-Commerce-Shop gratis Retouren anbietet, müssen die Pakete trotzdem in der physischen Welt hin und her geschickt werden und die Waren in den Retouren werden im schlimmsten Fall nach dem Zurücksenden vernichtet.

• Unterhaltungselektronik so lange wie möglich behalten. Mit jedem Jahr reduziert sich der ökologische Fussabdruck von elektronischen Geräten merklich. Ausgediente Geräte korrekt dem Recycling oder der Wiederaufwertung zuführen.

• Videochats haben Geschäftsreisen aktuell mehrheitlich abgelöst. Nicht immer muss aber die Kamera das ganze Gespräch hindurch laufen. Wenn die Kamera nicht nötig ist, am besten ausschalten.

• Nicht jeder Video-Stream muss auf jedem Endgerät in der bestmöglichen Qualität laufen. Oftmals führt die Reduktion der Qualitätsstufe zu kaum sichtbaren Einbussen, während im Hintergrund massiv weniger Daten transportiert werden müssen.

Lasst uns alle gemeinsam überlegen, wie wir das Web in eine nachhaltige Zukunft führen, damit noch viele Generationen von dieser wunderbaren und faszinierenden Erfindung profitieren können. Es gibt viel zu tun, packen wir es an.