Über unsMediaKontaktImpressum
Henning Fries 12. Januar 2021

Green Webdesign oder #FrontendsForFuture

In Bezug auf den CO2-Ausstoß lesen und hören wir immer öfter den Satz: "Wäre das Internet ein Land, dann wäre es im internationalen Ländervergleich auf Platz sechs hinter China, den USA, der EU, Indien und Japan" [1]. Sogar bis in die Tagesschau hat es dieses Statement geschafft. Anscheinend braucht der "unsichtbare" Riese eine Metapher damit wir uns vorstellen können, dass auch das Internet Strom konsumiert und damit maßgeblich zum weltweiten CO2-Ausstoß beiträgt. Dabei hat das Internet doch keinen Auspuff! Es ist eben nicht wahr, dass nur weil uns die digitale Welt immateriell erscheint, die digitalen Technologien klimaneutral sind.

Kommen wir noch einmal zurück auf das Land Internet. Da wir uns anscheinend mit dieser Analogie anfreunden können, möchte ich uns Internet-Schaffende einmal als die Bewohner des Landes "Internet" betrachten. Viele von uns verbringen ihr gesamtes professionelles (Arbeits-)Leben in diesem Land, ohne jemals hinterfragt zu haben, woher die Energie hinter all den Servern kommt und wie wir, die Bewohner dazu beitragen, die Energie zu verbrauchen. Aber die Rechenzentren und deren Server sind nur ein Teil der großen Maschine Internet, der größten kohlebetriebenen Maschine auf dem Planeten!

Viele der großen Internetkonzerne machen schon einen Schritt in die richtige Richtung und setzen auf nachhaltige Energiegewinnung und Energiestrategien. So hat sich Google bereits 2012 auf die Fahnen geschrieben, auf nachhaltige Energie zu setzen. Google bezieht heute nach eigenen Angaben 100 Prozent seiner Energie aus erneuerbaren Energien [2]. Auch viele Hoster haben auf erneuerbare Energien umgestellt. Dennoch ist das Hauptproblem der Ressourcenhunger der Einwohner des Landes Internet.

"Other things being equal, the degree of cultural development varies directly as the amount of energy per capita per year harnessed and put to work."– Leslie White [3]

Betrachten wir alleine Deutschland, so braucht "das Netz" 55 Terawattstunden – die Energie von gut 10 großen Kraftwerken, also so viel Strom wie die ganze Stadt Berlin. Ein Drittel der Energie fließt dabei in Klimaanlagen, die zur Kühlung der Rechenzentren verwendet werden. Ansteigen wird dieses Energiepotential noch durch die weitere Verbreitung des Internet of Things. Experten wie Dr. Ralph Hintemann vom Borderstep Institut für Innovation und Nachhaltigkeit rechnen mit einem Mehrenergieaufwand von 70 Terawattstunden pro Jahr in der EU. Das sind mehr als 10 Prozent der Bruttostromerzeugung in Deutschland und mehr Strom, als Deutschland gerade mit Wind- und Solarkraft erzeugt [4].

Im Jahre 2014 gingen weltweit monatlich 40 Exabyte (das entspricht 40 Millionen Terabyte) an Daten über die Leitungen. Im Jahr 2019 waren es bereits knapp 140 Exabyte und bis zum Jahr 2022 wird ein Anstieg auf über 270 Exabyte prognostiziert. Neueste Zahlen vom März zeigen, dass am Internet-Knotenpunkt DE-CIX in Frankfurt ein neuer Rekord gemessen wurde [5]. 9,1 Terabit pro Sekunde [6]. Das entspricht einem Datentransfer von mehr als 20 Blu-rays pro Sekunde. Zwar sind diese Zahlen bedingt durch die Corona-Pandemie, allerdings soll zukünftig im Rahmen der Digitalisierung ja auch mehr ins Homeoffice verschoben werden. Wer wissen möchte, wie sich diese Daten zusammensetzen, schaut sich am besten mal den Vortrag von Brad Frost zum Thema Bullshit an [7].

Streaming-Dienste machen einen Großteil des Datenflusses innerhalb des Internets aus. Der globale Datenverkehr besteht zu 80 Prozent aus Video-Daten. Diese Dateien sind besonders sperrig und konsumieren erheblichen Speicherplatz auf den Servern und dementsprechend auch viel Energie bei der Übertragung. Dank der Corona-Pandemie konnten die Streaming-Dienste einen enormen Zuwachs verbuchen. Alleine Netflix konnte Anfang des Jahres 1,8 Millionen neue BenutzerInnen in Deutschland dazu gewinnen – im ersten Quartal 2020 lag die Zahl der AbonnentInnen bei über 7,2 Millionen. Im Jahr 2019 veröffentlichten Forscher des französischen Thinktanks "Shift Project" eine verstörende Studie [8]. Allein das Video-Streaming hat 2018 mehr als 300 Millionen Tonnen CO2-Äquivalente verursacht. Wenn wir uns wieder der Länderanalogie bedienen wollen, so entspricht das dem Jahresausstoß an CO2 von Spanien. No-Fun-Fact: 27 Prozent entfallen auf pornographische Videos. Diese führten 2018 zu 80 Millionen Tonnen CO2-Emissionen – so viel wie alle Haushalte Frankreichs im selben Jahr produzierten.

Die Energiegewinnung vollständig auf erneuerbare Energien umzustellen löst nicht das Problem des Ressourcenhungers im Land Internet. Zurzeit ist der Anteil regenerativ erzeugten Stroms an der gesamten Stromnachfrage von Informations- und Kommunikationstechnologien immer noch gering. Je mehr digitale Lösungen in alle Lebens- und Wirtschaftsbereiche einziehen, die ohne Strom nicht funktionieren, desto größer wird die Herausforderung, die Versorgung der Welt mit 100 Prozent erneuerbarer Energie überhaupt zu realisieren [9]. Erfahrungen zeigen, dass immer wieder Rebound-Effekte auftreten. In der Ökonomie spricht man vom Jevons-Paradoxon[10]. Das ist eine Beobachtung von William Stanley Jevons, der zufolge ein technischer Fortschritt, der die effizientere Nutzung eines Rohstoffes erlaubt, letztlich zu einer erhöhten Nutzung dieses Rohstoffes führt, anstatt sie zu senken. Oder mit den Worten von Tilmann Santarius: "Bequemer konsumieren heißt oft mehr konsumieren" [11].

Was können wir tun, um mit unserem Schaffen ein nachhaltigeres Internet zu realisieren? Ein tolles aber, vielleicht etwas extremes Beispiel, ist die solarbetriebene Website des LowTech Magazine, die wenn die Batterie leer ist, auch mal einfach vom Netz geht [12]. Wir könnten aber auch eine Bewegung wie Frontends For Future ins Leben rufen? Das erfordert allerdings, dass wir, die Bewohner des Landes Internet, dieses Land besser kennenlernen und dabei helfen, die Digitalisierung nicht auf dem Rücken der analogen Umwelt auszutragen. Das schöne ist, dass wirklich jeder etwas dazu beitragen kann, den Ressourcenverbrauch zu reduzieren, sogar ich als programmierender Designer.

Frontends For Future

Ein beträchtlicher Teil des gesamten Internet-CO2 Fußabdrucks – bis zu 40 Prozent – entfällt auf das Frontend, also den von Designern gestalteten Teil. Die meisten Bemühungen, den Stromverbrauch zu reduzieren, konzentrieren sich jedoch speziell auf Rechenzentren und schenken dem Design oder der Frontend-Anwendung wenig bis gar keine Aufmerksamkeit. Auch einfach ein wenig mehr User Experience drauf zu werfen, hilft an dieser Stelle auch nicht weiter. Eine Website kann schnell laden und hat einen schnellen First Meaningful Paint, lädt aber später via Lazy-Load viele großformatige Bilder und Videos nach – tolle UX aber schlechte Ökobilanz. Nachhaltiges Webdesign erfordert ein ganzheitliches Herangehen – alle Projektbeteiligten müssen und können ihren Teil beitragen.

Nachdem das "Warum" geklärt ist, kommen wir nun zum "Wie". Metaphern scheinen ja zu funktionieren (s. das Land Internet), also werden wir uns auch einer Mischung aus Metapher und Eselsbrücke bedienen, um den Weg zu nachhaltigeren Websites und somit zu einem nachhaltigeren Internet in unserem Langzeitgedächtnis zu verankern: Das Torten-Prinzip: Testen, Optimieren, Reduzieren, Thematisieren und Engagieren – kurz TORTE!

Die Green Webdesign TORTE

Der erste Schritt ist bekanntlich der schwerste und birgt die Frage "Wo sollen wir anfangen?". Wir müssen uns selbst ein paar unbequeme Fragen stellen bzw. ein paar unbequeme Antworten akzeptieren: Ist die Ökobilanz unserer Website eher die eines Fahrrades oder die eines SUVs? Dem Prinzip TORTE folgend heißt es also testen, testen, testen, um ein Verständnis unsrer Website zu bekommen – getreu dem Motto: "You can’t manage what you can’t measure" (nach Peter Drucker) [13].

T wie Testen

Beginnen wir bei der Energieversorgung. Strom ist das Lebenselixier all unseres Schaffens. Wenn der Strom ausfällt, verschwindet alles das, was wir designt, programmiert und gebaut haben. Die Server, auf denen die von uns erstellten Produkte und Dienstleistungen gehostet werden, benötigen rund um die Uhr Strom 24/7/365. Das Internet verbraucht Strom server- wie auch clientseitig. Wir müssen uns immer wieder die Tatsache bewusst machen, dass Daten Elektrizität sind und die Gewinnung von Elektrizität einen CO2-Ausstoß verursacht.

Daten → Elektrizität → CO2

Ein guter Anfang ist es daher nachzufragen, woher die Energie für unser Opus kommt. Ein tolles Tool hierzu bietet der Service von The Green Web Foundation [14]. Mit diesem Tool lässt sich gegen eine gut gepflegte Datenbank abfragen, ob unser Hoster regenerative Energien verwendet oder nicht – was vielleicht ein Grund wäre, über einen Wechsel des Hosters nachzudenken. Mit diesem einfachen Tool gewinnen wir schon wichtige Einblicke in unsere Website, die wir oft einfach aus Bequemlichkeit ignoriert bzw. die wir als gottgegeben hingenommen haben. Schon an dieser Stelle können wir Wirkung erzielen, positiv etwas verändern und die Ökobilanz unserer Website verbessern. Einfach nur durch die Auswahl eines "grünen" Hosters. Die The Green Web Foundation liefert auch gleich eine Liste der grünen Hoster mit [15].

Jetzt gilt es, weitere Fakten über unsere Website in Erfahrung zu bringen und ein tieferes Verständnis für den ökologischen Fußabdruck unseres digitalen Gewerks zu erhalten. Dies kann wiederum über einige nützliche Online-Services von statten gehen oder auch mit Hilfe der Developer Tools in unserem Browser. Exemplarisch seien an dieser Stelle der Website Carbon Calculator und Ecograder aufgeführt [16]. Der Website Carbon Calculator berechnet die CO2-Emissionen einer Website anhand von fünf Schlüsseldaten und gibt darauf basierend eine recht ordentliche Schätzung ab:

  • Datentransfer über das Kabel
  • Energieintensität von Web-Daten
  • Vom Datenzentrum verwendete Energiequelle
  • Kohlenstoffintensität der Elektrizität
  • Website-Verkehr

Eine genaue Erklärung der Schätzung findet sich auf der Website. Die zugrundeliegende Datenbasis ist recht aktuell und stammt aus den Jahren 2017/2018.

Neben Angaben zum Hosting gibt uns das Tool Hinweise auf den tatsächlichen CO2-Verbrauch beim Besuch unserer Website und stellt einen vergleichbaren Kontext her, wie sich der CO2-Ausstoß mit realen Szenarien vergleichen lässt. Die Resultate des Website Carbon Calculator können nur bedingt aussagekräftig sein, da das Tool oftmals auch nur schlau raten kann. Allerdings ist es eine prima Hilfe, uns für dieses wichtige Thema zu sensibilisieren und dazu zu motivieren, unsere Websites schlank und performant zu halten.

Ecograder taucht schon ein bisschen tiefer in die Technik unserer Website ein und unterzieht sie verschiedenen Tests wie z.B. Google Page Speed Insights und MozRank. Auch hier wird am Ende der Evaluierung ein Score ausgespuckt und es werden gleich ein paar Vorschläge gemacht, was wir noch verbessern können.

Ein anderes Tool, das mehr Einblick darüber gibt, was wir eigentlich so über die Leitung schicken ist Pingdom Website Speed Test [17]. Mit diesem Werkzeug lassen sich Ladezeiten testen, analysieren und Engpässe finden. Darüber hinaus bekommt man es noch nett auf einer Seite präsentiert. Ein besonderes Feature ist, sich die Seite von unterschiedlichen Standorten aus laden zu lassen, um auch Aussagen über die globale Performanz treffen zu können.

Schön, wir haben jetzt eine Hausnummer, wie hoch der Energieverbrauch bzw. der CO2-Ausstoß unserer Website ist und wir wissen etwas über unseren Hoster. Wie sieht es allerdings auf Seiten des Benutzers aus? Wer oder was verbraucht dort die ganze Energie?

Exkurs: JAMStack

Die Abkürzung JAM steht für JavaScript, APIs und Markup. Durch den Einsatz von Javascript, APIs und Markup hat man einen effizienten Workflow und performante und sichere Webanwendungen. Im Idealfall wird das statische HTML durch sog. CDNs (Content Delivery Networks) ausgeliefert. Ein CDN ist ein verteiltes Netzwerk, das für die Bereitstellung von statischen Ressourcen für Benutzer optimiert ist. Durch die geographische Verteilung bietet ein CDN Redundanz und verbessert die Lieferleistung, da Service-Anfragen von der Infrastruktur bearbeitet werden, die dem anfragenden Benutzer am nächsten liegt. Und genau das ist der Haken, wenn es um nachhaltiges Webdesign geht. Durch die räumliche Verteilung werden häufig auch Server in Rechenzentren angefragt, die (aus Kostengründen) nicht mit regenerativen Energien laufen. Viele der großen CDNs setzen bereits vollständig oder zu großen Teilen auf regenerative Energien. Also Augen auf beim CDN-Einkauf! Ein wichtiger Aspekt hierbei ist auch, dass die Infrastruktur automatisch skaliert, so dass keine Server laufen, wenn sie nicht benötigt werden. Ansonsten ist der Einsatz von JAMStack in Kombination mit einem grünen CDN, gerade im Hinblick auf die nachfolgend beschriebenen Aspekte sinnvoll, denn u. a. sparen vorkompilierte statische Seiten Energie und damit CO2 [18].

Der Großteil der Energie auf (mobilen) Geräten wird von einigen wenigen Hauptkomponenten verbraucht: CPU, GPU, Vernetzung (Wi-Fi und zellulare Funkchips) und Bildschirm.

Der Stromverbrauch des Bildschirms ist relativ konstant und unterliegt meist der Kontrolle des Benutzers (z. B. über Einschaltzeit und Helligkeit des Bildschirms), die anderen Komponenten allerdings, wie CPU, der Grafikprozessor und die Netzwerk-Hardware haben eine hohe Dynamik was den Stromverbrauch geht. Das System passt die CPU- und GPU-Leistung auf der Grundlage der aktuell zu bearbeiteten Aufgaben an. Dazu gehört natürlich auch das Rendern von Webseiten und anderer Anwendungen, die Webinhalte verwenden. Dies geschieht durch Ein- oder Ausschalten einiger Komponenten und durch Änderung der Taktfrequenz. Im Großen und Ganzen gilt: Je mehr Leistung von den Chips verlangt wird, desto geringer ist ihre Energieeffizienz. Die Hardware ist in der Lage, sehr schnell Höchstleistung zu erbringen (aber zu hohen Energiekosten) und dann genauso schnell wieder in einen effizienteren Zustand mit geringerem Stromverbrauch zurückkehren.

Seit 2019 integriert der Safari-Browser in der CPU-Timeline seiner Developer-Tools eine Anzeige, die Aussagen zum aktuellen Energieverbrauch macht. Auch im eigenen Browser lassen sich somit Messungen zum Energieverbrauch anstellen.

O wie Optimieren

Nach dem Testen folgt bei TORTE das Optimieren. An dieser Stelle sei zu erwähnen, dass wir alle in einem Boot sitzen: Designer, Developer und Copywriter. Alle können ihren wertvollen Beitrag bei der Optimierung leisten (das gilt übrigens auch für alle anderen Teile der TORTE). Worauf müssen wir in Bezug auf Stromverbrauch achten?

Um die Batterielebensdauer zu maximieren bzw. den Stromverbrauch zu minimieren – ja, das geht einher! – möchten wir die Zeit, die das System im Hochleistungszustand verbringt, reduzieren und die Hardware so weit wie möglich in den Leerlauf zurückkehren lassen. Wir müssen uns drei Interaktionszustände etwas genauer anschauen:

  • Die Seite ist im Focus und der Benutzer interagiert damit.
  • Die Seite ist im Focus, aber ohne Benutzerinteraktion.
  • Die Seite ist nicht im Focus.

Daraus ergibt sich eine einfache Faustregel: Am besten Energie in den Zeiten zu verbrauchen, in denen der Benutzer mit der Seite interagiert. Es bleibt immer unser Ziel, die Seite schnell zu laden und während Interaktion aktiv und performant zu halten. In den meisten Fällen senken dieselben Optimierungen, die "time to first paint" und "time to user interactive" reduzieren, auch den Stromverbrauch.

Wollen wir nicht alle eine performantere Website?

Das Nachladen von Ressourcen und die Ausführung von Skripten nach dem initialen Laden der Seite erhöht den Stromverbrauch. Das Ziel sollte es sein, so schnell wie möglich wieder in den Leerlauf zurückzukehren. Je weniger JavaScript ausgeführt wird, desto energieeffizienter ist die Seite. Skripte erzeugen zusätzliche Arbeit zu dem, was der Browser bereits für das Layout und die Gestaltung der Seite geleistet hat. Sobald die Seite geladen ist, werden durch Benutzerinteraktionen wie Scrollen und Tippen auch die Leistung von CPU und GPU erhöht. So soll es auch sein, um die Reaktivität und die flüssige Interaktion mit der Seite zu gewährleisten. Aber endet die interaktive Phase müssen wir wieder zurück in den Leerlauf gelangen. Wir sollten versuchen, uns an den schönen Spruch "Paint the Picture not the Frame" zu halten [19]: Browser schenken uns so vieles (bereits optimiertes) – normales Scrollen der Seite ist viel energieeffizienter als benutzerdefiniertes "Custom Scrolling", das in JavaScript implementiert wurde.

Lesen Sie den zweiten Teil auf der nächsten Seite...

Amount of pages found: 0
No pages found.
Autor

Henning Fries

Henning Fries ist UI- und UX-Designer und beschäftigt sich mit Themen wie Accessibility, Nachhaltigkeit, UX und UI.
>> Weiterlesen
Das könnte Sie auch interessieren
Kommentare (0)

Neuen Kommentar schreiben