Webdesign nach­haltig und klima­freund­lich umsetzen

Das Internet ist ein eher unsichtbarer Klimasünder: Es ist überall und irgendwie nirgends. Deshalb fiel bisher eher wenig Aufmerksamkeit auf das Thema. Dabei ist der Stromverbrauch der Server theoretisch höher als der Verbrauch Strombedarf ganzer Industrieländer. Allein in Deutschland sind es nach Schätzungen etwa 55 Terrawattstunden pro Jahr. In Frankfurt, wo einer wichtigsten Knotenpunkte für den internationalen Datenverkehr liegt, ist es nach dem Borderstep Instituts mehr als ein Fünftel des städtischen Strombedarfs, der in die dortigen Server fließt — mehr als für den Airport. Die Tendenz ist allgemein steigend: Technologien wie 5G oder die Verbreitung von Videostreaming wird weiter Emissionen verursachen.

In Zeiten des menschengemachten Klimawandels, in dem Treibhausgase wie CO₂ die Temperaturen weiter steigen lassen, sollte mit Ressourcen sparsam umgegangen werden. In mehreren Lebensbereichen ist ein Umdenken angeregt, aber es sollte nicht vor der eigenen Website enden. Auch sie hat Auswirkungen auf das Klima, die sich reduzieren lassen. Mit einem nachhaltigen Webdesign lassen sich die CO₂-Emissionen reduzieren.

Woher kommen die Emissionen?

Die CO₂-Emissionen einer Website lassen sich nur schätzen, weil sie von einigen Faktoren abhängen. Relevant ist in erster Linie allem die Datenübertragung, weil der Energieverbrauch proportional mit der Datenmenge steigt. Auch für die Rechenaufgaben im Server und auf dem Endgerät wird mit jedem Seitenaufruf Energie verbraucht. Mehrere Tools schätzen die CO₂-Emissionen und sind damit hilfreich für ersten Eindruck. Besonders oft empfohlen wird der Website Carbon Calculator zum Messen der CO₂-Bilanz. Etwas transparenter arbeitet Beacon und listet auf, welche Daten bei dem Seitenaufruf wie viel CO₂ ungefähr emittieren. Ecograder arbeitet dagegen mit einem Punktsystem, aber umso schlüssigeren Erklärungen.

Nachhaltiges Webdesign

Gerne erstelle ich Ihnen ein Angebot.

Webdesign-Angebot

Erster Schritt: Ökostrom (Substitution) 🔌

Die Wahl von Ökostrom im Rechenzentrum ist der einfachste Schritt zu einer klimafreundlicheren Website. Bei der Produktion von Ökostrom wird kein CO₂ emittiert. Deshalb trägt Ökostrom erheblich dazu bei, den Klimazielen immer näher zu kommen. Und das ist für die Betreiber*innen von Websites sogar vergleichsweise einfach: Ob und welcher Ökostrom in das Rechenzentrum fließt, kann der Webhoster am einfachsten beantworten. Auskunft gibt auch das Register der Green Web Foundation. Falls das Webhosting-Unternehmen weiter auf Strom aus Kohle & Co. setzt, kann ein Wechsel in Betracht gezogen werden. Denn in viele Rechenzentren fließt bereits Ökostrom, Anbieter gibt es zum Glück reichlich. Auch pepper setzt komplett auf Ökostrom.

Allerdings: Ökostrom ist nicht die Lösung, bis hierhin macht es nachhaltiges Webdesign auch nicht aus. Stattdessen kann Ökostrom nur der Anfang sein, denn mit Ökostrom ist noch keine Kilowattstunde Strom gespart, deshalb ist diese Maßnahme lediglich als Substitution, nicht als Reduktion zu verstehen. Letztlich verpufft der Strom auch mit Ökostrom im Rechenzentrum in Abwärme.

Nächster Schritt: Reduktion 🧑‍💻

Nun geht es wirklich an das Sparen von Ressourcen, den Kern von nachhaltigem Webdesign. Im besten Fall werden die Maßnahmen bereits in die frühe Umsetzungsphase einbezogen. Aber auch nachträglich lassen sich der Quelltext und die eingebetteten Daten anpassen.

1. Anfragen

Ein Websitenaufruf löst sich nicht nur eine HTTP-Anfrage aus, sondern eine Vielzahl. Schließlich muss nicht nur der HTML-Quelltext geladen werden, sondern auch eingebettete Schriften, Skripte, Bilder und weitere Medien. Aber gerade, wenn man ein Content-Management-System mit vielen Plugins nutzt, entsteht schnell ein Überfluss an Anfragen. Teilweise wird sogar die gleiche JavaScript-Bibliothek mehrmals geladen. Auch Multi-Purpose-Themes haben das Problem, dass sie meist mehr einbetten als notwendig. Stylesheets, Schriftschnitte und Bilder sollten nur eingebunden werden, wenn sie für die Darstellung der Website auch benötigt werden.

Skripte und Schriften können auch über Content-Delivery-Networks (CDN) eingebunden werden, die auf Performance getrimmt sind und teilweise auch auf Ökostrom setzen. Sie können den ökologischen Fußabdruck auch weiter verkleinern, weil die geladenen Medien auf dem Endgerät lokal im Cache zwischengespeichert werden. Insbesondere bei populären Medien, zum Beispiel einer oft genutzten JavaScript-Bibliothek oder einer beliebten Schrift zeigt sich der Vorteil, dass die Medien nicht erneut geladen werden müssen, wenn eine zuvor besuchte Website sie bereits eingebettet hat. Trotzdem gibt es hier verschiedene Philosophien: Wenn diese Daten nicht im Cache des Endgeräts liegen, entstehen wiederum zusätzliche Lasten für die Namensauflösung der Domain.

Bleiben wir aber beim Caching: So oder so haben sie großes Potenzial, für wiederkehrende Besucher*innen die Anfragen und Daten erheblich zu reduzieren. Wenn Schriften oder Bilder bereits im Cache des Endgeräts liegen, müssen sie nicht erneut geladen werden.

2. Datenmengen

Nicht nur die Anzahl der Anfragen sollte reduziert werden, sondern auch die Datenmenge. Das ist oft möglich, ohne dass es Auswirkungen auf den sichtbaren Inhalt hat.

Dazu lassen sich fast alle Dateien kompriminieren. Für den HTML-Quelltext, CSS- und JavaScript-Dateien sowie SVG-Grafiken bietet sich die GZIP-Kompression an. Für Pixelgrafiken eignet sich dagegen die verlustbehaftete Komprimierung in einem geeigneten Format. Die Datenmenge von Fotos lässt sich mit JPEG-Dateien schon erheblich verkleinern, aber noch moderner und effektiver sind AVIF und WEBP. Für Icons bietet sich das SVG-Format an, noch besser gesammelt als sogenannte SVG-Sprites oder inline im HTML-Quelltext.

Bei Pixelgrafiken sollte darauf geachtet werden, dass die Skalierung stimmt. Mit Media Queries können mit CSS für jedes Endgerät vom kleinen Smartphone bis zum großen Desktop die passenden Bilddateien geladen werden. Viele Content-Management-Systeme können das automatisch erledigen. Selbiges gilt auch für Videos, wodurch man oft noch deutlich mehr Datenvolumen sparen kann. So braucht es beispielsweise auf dem Smartphone kein Video in Full-HD-Auflösung, weil man es ohnehin kaum wahrnehmen könnte.

Sofern mehrere Bilder eingebettet werden, die nach dem Laden außerhalb des sichtbaren Bereichs liegen, sollte dabei das sogenannte »Loading«-Attribut genutzt werden. Damit werden die Bilder erst geladen, wenn der Browser auf dem Endgerät sie benötigt.

3. Rechenleistung

Die bisher vorgestellten Möglichkeiten senken den Stromverbrauch vor allem im Server und der Netzinfrastruktur. Dabei macht es sich auch auf Smartphones in der Akkuleistung bemerkbar, wenn sie weniger Daten über das Mobilfunknetz laden. Und das ist noch nicht alles: Es lohnt, den HTML- und CSS-Code möglichst effizient zu gestalten. Nur, weil komplizierte (Pseudo-)Selektoren möglich sind, muss man sie noch nicht nutzen. Das trifft auch auf besonders rechenintensive Eigenschaften wie filter, transform oder box-shadow zu. Mit der Eigenschaft »will-change« gibt es mittels CSS sogar die Möglichkeit, das Endgerät auf eine bevorstehende Rechenoperation vorzubereiten, bevor sie eintritt. Auch JavaScript-Dateien lassen sich oft hinsichtlich ihres Leistungsbedarf optimieren. Entwickler-Werkzeuge wie Lighthouse helfen dabei, nachzuvollziehen, in welchen Bereichen (Loading, Scripting, Rendering, Painting) es eventuell hakt.

Letzter Schritt: CO₂-Kompensation 🌳

Für das, was sich nicht mehr reduzieren lässt, bleibt die Möglichkeit der CO₂-Kompensation. Insbesondere »ClimatePartner« und »atmosfair« haben sich dabei als gute Anlaufstellen bewiesen. Durch die Förderung von Klimaschutzprojekten, beispielsweise den Ausbau von regenerativen Energien in Entwicklungsländern oder Aufforstung, können CO₂-Zertifikate gekauft werden. Wichtig ist, dass dies lediglich den letzten Schritt darstellt, denn auch mit dieser Maßnahme werden effektiv keine CO₂-Emissionen verhindert.

Nicht nur Effekte auf das Klima

Ein sparsamer Einsatz von Ressourcen wie beim nachhaltigen Webdesign wird auch von anderer Seite belohnt. Für gewöhnlich wird damit auch die Website-Performance verbessert, wenn weniger Ressourcen geladen werden müssen. Schon Sekundenbruchteile haben einen signifikanten Effekt auf die User Experience. Die Verbesserungen der Ladezeiten spiegeln sich oft auch in den Core Web Vitals, die auch für die Suchmaschinenoptimierung relevant sind.