Wie klimafreundlich Webdesign sein kann

Das Internet sorgt weltweit für mehr CO2-Emissionen als der Flugverkehr. Die Rechenzentren nehmen rund fünf Prozent des weltweiten Stromverbrauchs ein – theoretisch ist der Verbrauch der Server damit höher als der Strombedarf ganzer Industrieländer. Allein in Deutschland verbraucht die Netzinfrastruktur 55 Terawattstunden im Jahr. In Frankfurt, einem international bedeutenden Knotenpunkt im Internet, ist es nach Studien des Borderstep Instituts sogar mehr als ein Fünftel des städtischen Strombedarfs, der in die dortigen Server fließt – mehr als für den Flughafen. Die Tendenz ist steigend, 5G und andere Technologien werden den Datenverkehr und den Strombedarf damit weiter stark antreiben.

Die trügerische Unsichtbarkeit vom »anderen Ende der Leitung« kann nichts mehr daran ändern, dass in Zeiten des Klimawandels die Server als einer der Treiber mehr in das Blickfeld des Klimaschutzes geraten. Sogar von einem »Klimakiller« ist manchmal die Rede.

Verbraucher*innen haben darauf einen Einfluss. Besonders stromintensiv ist in diesem Bereich das Video-Streaming. Ob Netflix oder Amazon Prime in bester Videoqualität nebenher laufen muss, sei beispielsweise dahingestellt.

Den größeren Hebel auf die Klimabilanz einer Webseite haben aber die jeweiligen Betreiber*innen selbst. Wie dieser Einfluss aussieht und welche Rolle das nachhaltige Webdesign spielt, klärt dieser Artikel.

Noch bevor wir zu den Stromsparmaßnahmen kommen, ist es sinnvoll, die Energiequelle des eigenen Webservers zu überprüfen. Erneuerbare Energien tragen erheblich dazu bei, die Treibhausgasemissionen zu senken. Weil die Rechenzentren aufgrund ihres Bedarfs zunehmend ins Visier von Klimadiskussionen geraten, fließt Ökostrom deshalb bereits in viele Server. Welcher Strom für den Server bezogen wird, kann das Webhosting-Unternehmen am besten beantworten. Auskunft gibt auch das Register der Green Web Foundation.

Das kann aber nur ein erster Schritt zu einer besseren Klimabilanz sein, weil mit der Umstellung auf Ökostrom keine einzige Kilowattstunde gespart ist. Im Rechenzentrum verpufft der Strom in Abwärme und dafür ist jeder Strom sehr kostbar – auch der aus erneuerbaren Energien.

Oft können die HTTP-Anfragen, die ein Webseitenaufruf auslöst, reduziert werden. Gerade, wenn ein Content-Management-System mit vielen Plugins genutzt wird, wird teilweise sogar die gleiche JavaScript-Bibliothek mehrmals geladen. Auch CSS-Dateien oder Schriftschnitte sollten nur eingebunden werden, wenn sie gebraucht werden.

Bezüglich der Ressourcen von externen Servern gibt es verschiedene Philosophien: Skripte oder Fonts können beispielsweise über Content-Delivery-Networks (CDN) eingebunden werden, die auf Performance getrimmt sind. Sie sind aber ebenso in der Lage, den ökologischen Fußabdruck einer Webseite zu verkleinern, weil diese Ressourcen im Browser-Cache sehr lange lokal zwischengespeichert werden. Damit zeigt sich insbesondere bei populären Ressourcen der Vorteil, dass sie nicht erneut geladen werden müssen, wenn eine zuvor besuchte Webseite sie eingebettet hat.

Diese Vorgehensweise ist aber nur in Maßen ratsam. Liegen die Dateien zufällig nicht bereits im Cache der Besucher*innen, entstehen bei jeder Anfrage externer Ressourcen zusätzliche Lasten. Nicht nur für den Webserver und Datenverkehr dazwischen, sondern auch für die zusätzliche Namensauflösung der Domain.

Grundsätzlich ratsam sind effiziente Caching-Regeln. Über die Konfiguration des Webservers kann beeinflusst werden, welche Dateien wie lange im Browser der Besucher*innen zwischengespeichert werden. Bei erneuten Besuchen müssen dann viele wesentliche Ressourcen nicht erneut geladen werden.

Eine andere Kennzahl bei der Optimierung ist die Datenmenge. Sie lässt sich oft auch verkleinern – und das, ohne den sichtbaren Inhalt zu verkleinern.

Fast alle Daten lassen sich komprimieren. Für den Quelltext, Stylesheets, JavaScript-Dateien und SVG-Grafiken kommt die GZIP-Kompression infrage. Für Pixelgrafiken bietet sich die verlustbehaftete Komprimierung in einem geeigneten Format ab. Für Fotos ist es beispielsweise das JPEG-Format, aber noch moderner und kleiner sind AVIF und WEBP. Bei Icons lässt sich in der Regel die Datenmenge reduzieren, indem man sie als SVG-Datei im Vektorformat bereitgestellt. Wenn sie fest in das Layout integriert sind, kann es auch effizient sein, SVG-Elemente direkt im HTML-Quelltext oder dem Stylesheet einzubetten.

Wichtig ist auch, die Pixelgrafiken nicht in viel größeren Maßen ausgeliefert werden, als sie dargestellt werden können. Mit Media Queries können dem Endgerät entsprechende Dateien bereitgestellt werden. Viele Content-Management-Systeme können das automatisch erledigen. In absoluten Werten lässt sich bei eingebetteten Videos auf dieselbe Weise noch mehr Datenvolumen sparen – auf dem kleinen Smartphone ist die Full HD-Auflösung beispielsweise kaum wahrzunehmen, hier genügt oft auch eine geringe Videoauflösung.

Insbesondere für Webseiten mit mehreren Bildern, die beim Laden außerhalb des sichtbaren Bereichs liegen, kommt der sogenannte Lazyload infrage. Inzwischen ist das mit dem »Loading«-Attribut auch nativ ohne zusätzlichen Programmcode möglich. Dabei werden die Bilder erst geladen, wenn der Browser sie zur Darstellung benötigt. Das reduziert oft den Datenverkehr, der durch einen Seitenaufruf ausgelöst wird.

Die bisherigen Maßnahmen senken den Stromverbrauch vor allem seitens der Infrastruktur. Allerdings macht es sich auch bei der Nutzung auf Endgeräten wie Smartphones bemerkbar, wenn sie weniger Daten über das Mobilfunknetz laden müssen. Hier kann man noch einen Schritt weitergehen. In Stylesheets sind es komplizierte (Pseudo-)Selektoren oder Eigenschaften wie filter, transform, box-shadow oder position: fixed, die im Browser des Endgeräts verhältnismäßig rechenintensiv sind. Animationen sollten nach Möglichkeit nicht über JavaScript, sondern das Stylesheet umgesetzt werden. Mit der neuen Eigenschaft »will-change« gibt es mittels CSS sogar die Möglichkeit, den Browser auf die Zustandsänderung vorzubereiten, bevor sie eintritt. Auch JavaScript-Anwendungen lassen sich oft hinsichtlich ihres Leistungsbedarf optimieren. Die Entwickler-Werkzeuge in den Browsern helfen dabei, nachzuvollziehen, in welchen Bereichen (Loading, Scripting, Rendering, Painting) es eventuell hakt.

Die tatsächliche CO2-Bilanz einer Webseite kann kaum benannt werden, weil die sie von vielen Faktoren abhängt. Diverse Online-Tools schätzen aber die ungefähren Emissionen und sind damit nützlich für einen ersten Eindruck, wo es hakt. Besonders oft empfohlen wird der Website Carbon Calculator zum Messen der CO2-Bilanz, wobei dessen Kriterien, aus denen die Emissionen geschätzt werden, nicht offengelegt sind. Etwas transparenter arbeitet Beacon und listet auf, welche Ressourcen der Webseite wie viel CO2 ungefähr emittieren. Ecograder arbeitet dagegen mit einem Punktsystem, aber umso schlüssigeren Erklärungen.

Diese Werte geben einen Aufschluss darüber, wie ressourcenschonend eine Webseite technisch umgesetzt ist. Eine gewisse Skepsis bleibt aber: Obwohl die geschätzten CO2-Emission meiner Webseiten positiv sind, werbe ich nicht damit. Ich halte die Schätzung für ungenau, teilweise auch für intransparent. Und ganz unproblematisch ist auch die gesamte Idee und Vermarktung des CO2-Fußabdrucks nicht.

Ganz offen gesagt: All diese Maßnahmen haben für einen Seitenaufruf einen sehr kleinen, vermutlich nicht messbaren Effekt. Pro Jahr ergeben sich jedoch nicht selten geschätzte Differenzen von hunderter Kilogramm Kohlenstoffdioxid, die sich mit nachhaltigem Webdesign einsparen lassen.

Neben dem Verringern des ökologischen Fußabdrucks wird mit diesen Maßnahmen auch die Seitenladezeit verbessert. Das kann die Konversionsrate erhöhen und die Absprungrate erheblich senken. Insbesondere im Mobilfunknetz ist die Bandbreite oft eine technische Barriere, die Besucher*innen vergraulen kann.