Mit der Corona-Epidemie ist der Datenverkehr auf den Autobahnen des World Wide Web explodiert. Dazu tragen nicht nur Video-Anrufe, sondern auch Onlineshopping und die Nutzung verschiedenster digitaler Dienste und Produkte bei. Höchste Zeit, sich mit dem ökologischen Fussabdruck von digitalen Dienstleistungen auseinanderzusetzen. Dieses Thema ist nicht neu, erhält aber vor dem aktuellen Hintergrund eine ganz neue Bedeutung.
Server und Mobiltelefone laufen heiss
In der Euphorie für die digitale Transformation gehen die ökologischen Herausforderungen dieser Entwicklung gerne vergessen. Abgesehen von den Recherchen zum Stromverbrauch des Bitcoin-Mining, wird das World Wide Web kaum mit der ausgiebig diskutierten Klimakrise in Verbindung gebracht. Dabei haben die durch ICT verursachten Treibhausgasemissionen mit geschätzten 3.7% des weltweiten Ausstosses die viel gescholtene Flugindustrie um fast das Doppelte überholt. Eine Prognose aus dem Jahr 2018 rechnet damit, dass dieser Wert bis 2030 auf 8%, je nach dem auch auf 30% steigen könnte. Mitverantwortlich an dem stetigen Zuwachs ist das Streamen von Webinhalten, das in manchen Netzwerken bis zu 80% des Datenverkehrs verursacht.
Doch nicht nur das Streaming verschlingt immer mehr Netzkapazität und Energie, sondern auch Websites werden im Schnitt immer schwerer. Am 1. März 2016 lag der gemessene Median für die Grösse einer mobilen Website bei 960 KB. Vier Jahre später hat sich die Zahl fast verdoppelt auf 1'885 KB.
Dies wird insbesondere in Krisenzeiten zum Problem. Nicht immer und überall hält die Netzwerkinfrastruktur dem Zuwachs gleich gut stand. Dabei darf nicht vergessen werden, dass auch ohne Krise längst nicht alle Personen gleich gut oder überhaupt ans Internet angebunden sind. Entsprechend ist es Zeit, nachhaltiger und haushälterischer mit den Ressourcen umzugehen.
Den unsichtbaren Energieverbrauch fassbar machen
Das Projekt Website Carbon versucht, den Energieverbrauch in den CO2-Fussabdruck von Websites umzurechnen. Als Berechnungsgrundlage gehen die Initianten von 1.8 Kilowattstunden Strom aus. Darin enthalten ist der Stromverbrauch, welcher für die Bereitstellung, die Übertragung und die Konsumation von einem Gigabyte Daten anfällt. Die Website bietet einen Test, der die Treibhausgasemissionen auf Basis der aufgerufenen URL berechnet. Die Auswertung zeigt den Gegenwert des CO2-Ausstosses anhand verschiedener Beispiele. Selbst wenn die Zahlen auf Annahmen beruhen und nie die vollumfängliche Realität abbilden können, gibt der berechnete Ausstoss zu denken.
Als Anbieter von digitalen Produkten und Dienstleistungen sind die Datenzentren denn auch unser grösster Hebel, um die Nachhaltigkeit einer Website zu verbessern. Während sich deren Wirkungsgrad zwar laufend verbessert, werden viele davon mittels günstiger grauer Energie betrieben; insbesondere in den Vereinigten Staaten sogar noch mittels Kohleenergie, und dort läuft bekanntlich immer noch ein grosser Teil des globalen Internetverkehrs durchs Land. Der Abbau und die Verbrennung von Kohle zwecks Transformation in Elektrizität führen zu verheerenden Schäden für Mensch und Umwelt. Hier hat unsere Wahl des Hostinganbieters oder je nachdem der Konsum von Streaming-Inhalten also direkt einen Einfluss auf die Lebensqualität ganzer Bevölkerungsschichten. Dieser Zusammenhang zeigt, wie vielschichtig vernetzt unsere Welt ist und welchen Einfluss darin kleine, vermeintlich unscheinbare Entscheidungen haben, die wir jeden Tag fällen. Es liegt an uns, nachhaltig betriebene Datenzentren bei Ausschreibungen zu berücksichtigen und einzufordern.
Doch nicht nur das Hosting unserer Websites und Applikationen verschlingt Energie. Es braucht auch Energie, um unsere Inhalte zu übermitteln und zu konsumieren. Als Produzenten von Webinhalten und Websites haben wir an dieser Stelle weitere Werkzeuge in der Hand, um den Verbrauch zu optimieren: Wir müssen verstehen, wie die Netzwerke funktionieren, sinnvolle Caching-Strategien anwenden und versuchen, nur so viel wie jeweils nötig zu laden.
Nicht nur das Hosting unserer Websites und Applikationen verschlingt Energie. Es braucht auch Energie, um unsere Inhalte zu übermitteln und zu konsumieren.
Marius Bleuer
Expert Frontend Architect, Unic
Wir sind Teil eines grossen Ganzen
Als Entwicklerinnen und Entwickler befinden wir uns in einem Dilemma. Einerseits wollen wir für unsere Kunden begeisternde Produkte schaffen, ihnen helfen Märkte zu erschliessen und Produkte auf innovativem Wege zu verkaufen. Andererseits kommen wir nicht darum herum, uns als Mitverursacher einer immer grösser werdenden globalen Herausforderung zu sehen. Die Wissenschaft lässt keinen Zweifel daran, dass ein Umschwung nur mit einem weltweit gemeinsamen und raschen Handeln herbeigeführt werden kann.
15 Massnahmen für nachhaltige digitale Services
Das Hosting von digitalen Diensten und Produkten in einer Infrastruktur, die auf erneuerbare Energien zurückgreift, ist sicherlich der zentrale Lösungsansatz. Aber auch im Design und in der Entwicklung von digitalen Diensten und Produkten bieten sich verschiedene Möglichkeiten, dem Nachhaltigkeitsgedanken Rechnung zu tragen. Wie Steve Souders bereits 2008 festgestellt hat, gehen Web-Performance-Optimierungen und ein bewusster Umgang mit Ressourcen Hand in Hand.
Die Reise der Optimierung beginnt mit aussagekräftigen Messwerten: Nur wenn wir wissen, von wo wir starten, sehen wir, ob wir uns verbessern. Am besten ist es, hier ein Frontend-Performance-Monitoring-Tool einzusetzen, bei dem auch Ressourcen von bestimmten Domains blockiert werden können. So lässt sich ein allfälliger Einfluss von Tools von Drittanbietern auf die Messwerte ausschliessen und im Bedarfsfall dokumentieren.
Sind die Ausgangswerte erst einmal festgehalten, geht es an die Optimierung. Viele Performance-Regeln sind zwar bekannt, gehen aber in der Praxis trotzdem erstaunlich oft vergessen.
Hierzu die 15 wichtigsten Punkte, an denen wir Entwicklerinnen und Entwickler ansetzen können, um die Auslieferung und Anzeige von digitalen Diensten und Produkten zu optimieren und damit Energie zu sparen:
Aktiviere HTTP/2 auf dem Webserver: Zentral ist, dass die Datei-Priorisierung richtig konfiguriert ist. Dank Multiplexing und komprimierten Headern erfolgt die Auslieferung der Website in den meisten Fällen ohne zusätzliche Optimierungen schneller. Die richtige Priorisierung wiederum hilft, dass die Rendering-kritischen Dateien zuerst ausgeliefert werden.
Verwende Content Delivery Networks (CDN): Das CDN verteilt die Dateien auf verschiedene geographische Standorte. Dies führt dazu, dass Dateien schneller konsumiert werden können, was sich wiederum positiv auf den Energieverbrauch des Endgerätes auswirken kann.
Aktiviere die Gzip- und Brotli-Komprimierung auf dem Webserver: Wie das bekanntere Gzip ist Brotli ein Kompressionsalgorithmus. Gegenüber Gzip arbeitet Brotli allerdings effizienter. Dies geht jedoch zu Lasten des Arbeitsspeichers und der Rechenleistung des Webservers, was wiederum unnötig Energie verbrauchen würde. 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 sollen, hat der CDN-Anbieter Fastly dokumentiert. Mit diesen Anpassung können in den meisten Fällen grosse Einsparungen bei der übermittelten Datenmenge erzielt werden.
Nutze Serverside-Rendering: Ein Serverside-Rendering führt dazu, dass gewisse Arbeiten nur einmal auf dem Server statt auf jedem Gerät der Endbenutzer ausgeführt werden.
Verwende Serverside-Rendering mit einem vorgelagerten Caching-System: So lange sich nichts an einer Seite verändert, sollte sie nicht bei jedem Aufruf von Neuem auf dem Server zusammengestellt werden müssen. Je nach Website empfiehlt es sich sogar diese statisch aufzubereiten und mittels CDN auszuliefern.
Mach dir Gedanken zum 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. Es sorgt auch dafür, dass nicht die ganze CSS- oder JavaScript-Datei ungültig gemacht und aus dem Cache des Benutzers entfernt werden muss, wenn sich nur an einem Modul etwas ändert. Dadurch können potenziell viele Anfragen eingespart werden.
Setze langlebige Cache Headers: Je länger eine Datei auf dem Gerät des Benutzers gespeichert werden kann, desto besser. Solange man eine gut funktionierende Cache-Invalidierung hat, können sehr langlebige Cache-Headers gesetzt werden.
Nutze Lazy-Loading: Nach Möglichkeit, sollten Assets erst dann geladen werden, wenn sie auch effektiv genutzt und angeschaut werden. Das gilt sowohl 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 User Experience nicht zu beeinträchtigen.
Nutze 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, sondern auch einen höheren Speicherverbrauch zur Folge hat.
Automatisiere die Aufbereitung und Auslieferung von Bildern: 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. So sind Einsparungen von 30 bis 50% des Datenverkehrs ohne wahrnehmbaren Qualitätsverlust möglich.
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 mühsam. Sicher ist, dass sich der Dark Mode bei OLED-Bildschirmen äusserst positiv auf den Energieverbrauch auswirkt: Erste Praxis-Tests zeigten je nach Mobiltelefon bis zu 30% weniger Verbrauch. Bei LED-Bildschirmen entfällt dieser Effekt.
Nutze 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 die Intersection Observer nutzen, um rechenintensive Aktionen erst dann zu starten, wenn sie in den sichtbaren Bereich gelangen. Wir können diese aber auch dazu nutzen, rechenintensive Aktionen wie beispielsweise die Animation eines automatisch ablaufenden Videos oder ein Karussell zu beenden, sobald sie den sichtbaren Bereich verlassen. Auch dies ein einfacher Trick, der verhindert, dass unnötig Energie verschwendet wird.
Verhindere Reflows: 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 man dies mithilfe eines Platzhalters umgehen, der den benötigten Platz vorreserviert. Aktuell laufen sogar Bestrebungen, dass die Browser dies übernehmen, womit die manuelle Anpassung wegfallen wird.
Nutze Service Worker: Besonders auf mobilen Geräten ist der Browser Cache oft 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 Assests (z. B. JavaScript, CSS, SVG-Icons) als auch Inhalte in einem individuellen, durch die 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.
Baue ein Design-System auf: Ein Design-System hilft insbesondere in grossen Unternehmen, dass nicht mehrere Teams dasselbe Modul in leicht unterschiedlichen Varianten bauen, sondern möglichst viele Bauteile wiederverwendbar und Framework-agnostisch gestaltet werden.
Selbstredend ist diese Liste nicht abschliessend. 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.
So bieten sich zum Beispiel im E-Commerce-Bereich viele Möglichkeiten an, wie das Kundenverhalten durch geschickte Benutzerführung und mit dezenten textlichen Hinweisen nachhaltiger gelenkt werden kann. Beispielsweise können die Kundinnen und Kunden darauf hingewiesen werden, dass mehr Energie umgewandelt werden muss, wenn die Zustelldienste mehrere Zustellversuche unternehmen müssen.
Letztlich bedeutet eine gute Web Performance auch immer Zugang: Zugang für Personen mit Einschränkungen, schwachen oder älteren Geräten, und nicht zuletzt auch Zugang für Personen, die in schlecht erschlossenen Gebieten leben.
Marius Bleuer
Expert Frontend Architect, Unic
Die Macht der kleinen Schritte
Manche mögen sich nun fragen, ob das Ganze nicht grundsätzlich ein wenig übertrieben und eine solche Umsetzung nicht unglaublich kostspielig ist. Zum ersten Punkt hat der Klimaforscher Peter Kalmus eine treffende Aussage gemacht: «You wouldn’t dream of leaving your water taps wide open when you’re not using them; I feel the same way about electricity. Electricity is precious.»
Diesen Grundsatz sollten wir auch in der Entwicklung von digitalen Diensten und Produkten vor Augen haben und optimieren, was immer möglich ist. Natürlich ist der Gesamteffekt abhängig davon, wie umfassend der Webauftritt ist und wie viele Personen und Dienste dessen Inhalte konsumieren. Aber Optimierung beginnt oft im Kleinen. Wir wissen alle, wie sich kleine Effekte über die Menge kumulieren. Sind das Wissen und das Bewusstsein erst einmal vorhanden, werden die Entwicklungsteams versuchen, diesen neu gesetzten Standard anzustreben. Wie John Rossmann schreibt: «In a high standards culture, doing that work well is its own reward – it's part of what it means to be a professional. And finally, high standards are fun! Once you've tasted high standards, there's no going back.»
Kostenentwicklung
Eine Aussage zur Entwicklung der Kosten ist schwieriger zu treffen. Es muss zuerst ein Grundstock an Wissen aufgebaut werden, damit die Massnahmen in der Praxis korrekt umgesetzt werden können. Da diese Optimierungen in den meisten Fällen jedoch mit positiven Effekten fürs Geschäft einhergehen, sind dies lohnenswerte Investitionen, die sich langfristig bezahlt machen dürften. Hier ist es wichtig herauszufinden, welche Werte für die eigene Website relevant sind und gemessen werden sollen. Dann gibt es zu beachten, dass manche Optimierungen Zeit benötigen, bevor sie sich in den Zahlen niederschlagen.
Letztlich bedeutet eine gute Web Performance auch immer Zugang: Zugang für Personen mit Einschränkungen, schwachen oder älteren Geräten und nicht zuletzt auch Zugang für Personen, die in schlecht erschlossenen Gebieten leben.
Gerade der performante Zugang für ältere Geräte hilft ausserdem, dem omnipräsenten Bedürfnis nach neuen Geräten entgegenzuwirken. Wieso sollte man ein Gerät wechseln, wenn alles noch tadellos funktioniert?
Ich bin mir bewusst, dass die Zusammenhänge vielfältig und komplex sind. Umso wichtiger ist es mir aufzuzeigen, wie bereits kleine Anpassungen grosse Wirkung entfalten können. Durch den Umstieg auf einen Image-CDN konnten wir für die Benutzerinnen und Benutzer der Website sbb.ch über die letzten 16 Monate hinweg über 80 Terrabytes an unnötigen Datenübermittlungen verhindern. Damit konnten wir, vorsichtig geschätzt, rund 12 Tonnen an unnötigen Treibhausgasen vermeiden. Diese Zahl entspricht gemäss der United States Environmental Protection Agency in etwa dem Ausstoss, der anfällt, um 1.5 Millionen Mobiltelefone zu laden.
Gerne lade ich Sie ein, sich Gedanken darüber zu machen, was Sie persönlich in Ihrem Tun oder in Ihren Entscheidungen zu einem nachhaltigeren World Wide Web beitragen können.
Wir sind da für Sie!
Termin buchenSie möchten Ihr nächstes Projekt mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus.
Kontakt für Ihre digitale Lösung mit Unic
Termin buchenSie möchten Ihre digitalen Aufgaben mit uns besprechen? Gerne tauschen wir uns mit Ihnen aus.
