Nachhaltiges Webdesign – digital ist nicht gleich grün

Wie nachhaltig ist das Internet?

Eine heikle und umfangreiche Frage. Keine Bange, deine digitale Lebensgrundlage kannst du weiterhin benutzen. Allerdings bedeutet digital längst nicht nachhaltig, eine hohe Energieeffizienzklasse steht nicht zwingend für einen niedrigen Energieverbrauch und Umweltkompensationen sagen nichts über den verursachten Schaden aus.

In diesem Beitrag geht es grundsätzlich um zwei Dinge. Erstens um ein Grundverständnis für den Energieverbrauch von Webseiten. Dazu gibt es einen Abstecher zum Thema Energieeffizienzklassen, um zu zeigen, warum du Nachhaltigkeits-Scores hinterfragen solltest. Zweitens geht es darum, wie du deine Webseite klimafreundlicher gestalten kannst und warum auch deine Kunden davon profitieren.

Energieeffizienzklassen

In der EU werden Geräte in Energieeffizienzklassen von A bis G unterteilt. Wie aussagekräftig diese Skala ist, ist allerdings umstritten. Die Energieeffizienz verschiedener Geräte für dieselbe Anwendung zu vergleichen ist sinnvoll, weil die Resultate eindeutig sind. Eine Waschmaschine kann energieeffizienter sein als eine andere Waschmaschine.

Wird hingegen versucht, mehrere Merkmale auf einmal und dann auch noch nicht zur selben Zeit zu vergleichen, wird ein Vergleich schwierig. Müsste sich die Energieeffizienzskala zum Beispiel nicht kontinuierlich ändern, weil moderne Geräte durchschnittlich energieeffizienter werden als ältere Geräte? Jep, tut sie auch:

Die ursprüngliche Skala wurde 1994 entwickelt und innerhalb der letzten 25 Jahre mehrmals angepasst. Eine Person, welche nicht mit der EU Skala vertraut ist, könnte leicht getäuscht werden, wenn sie beispielsweise annimmt, dass die Energieeffizienzklasse A die bestmögliche Klasse darstellt.

Änderungen ab 2021

Auch diejenigen Personen, welche mit der aktuellen Skala von A+++ bis G vertraut sind, müssen sich informieren, um nicht verwirrt zu werden, weil ab 2021 wieder die alte Skala von A bis G eingeführt wird. Und was wird gemacht, wenn das bereits bekannte Problem zwischen moderner und alter Technologie eintritt und moderne Geräte immer effizienter werden? Man ordnet neue Geräte vorsorglich erst einmal nur maximal der Effizienzklasse B zu, um Luft nach oben für effizientere Geräte zu haben. (So das Deutsche Bundesministerium für Wirtschaft und Energie in ihrer Broschüre Das neue Energielabel, S. 14.)

Und wie sieht es mit der Abstufung der Klassen aus? Ist sie linear oder logarithmisch? Und habe ich schon erwähnt, dass sich die Skala von Geräteklasse zu Geräteklasse unterscheidet und nicht immer von A+++ bis G reicht? Und dass ein Gerät anhand der Abweichung seines tatsächlichen Energieverbrauchs vom Referenzwert eines fiktiven Referenzgeräts seiner Größenklasse – beim Kühlschrank der Rauminhalt und beim Fernseher die Bildschirmdiagonale – in die jeweiligen Energieeffizienzklassen eingeteilt wird?

Perfectly not confusing. Immerhin: eine Übersicht über alle Klassen gibt es zum Beispiel von energieschweiz.ch direkt zum Download als PDF. (Der Link wäre der hier: https://pubdb.bfe.admin.ch/de/publication/download/9467. Zurzeit sind aber alle Publikationen nicht verfügbar, wohl aufgrund eines technischen Problems. Der Link ist deswegen vorübergehend inaktiv.)

Was wird gemessen?

Damit sind wir bei der Schwierigkeit der Interpretation der Energieeffizienzklassen für Normalsterbliche angekommen. Die Einteilung der Geräte in die jeweiligen Klassen ist genauso problematisch: Welche Variablen werden berücksichtigt? Um auf das Beispiel der Waschmaschine zurückzukommen:

• Geht es um den Verbrauch für den sparsamsten Waschgang oder den Durchschnitt aller Waschgänge?
• Wird gemäss dem Fassungsvermögen für alle Modelle gewichtet oder gilt eine Klasse pro Modell?
• Gibt es eine Ausnahme für Koch- oder Kaltwäsche?
• Wird der Energieverbrauch der Herstellung und des Transports berücksichtig?
• Wie sieht es mit denselben Werten für Ersatzteile aus?
• Oder der Menge an verbrauchtem Wasser und Waschpulver?

Hinzu kommt noch eine neue Dimension: Die Unterscheidung zwischen verschiedenen Gerätezuständen. Also ob das Gerät in einem Stand-By-Modus, unter durchschnittlicher Last oder unter Volllast ist. Selbst wenn all diese und deutlich mehr Fragen bis ins Detail beantwortet werden, ist die Vereinfachung auf einige wenige, an sich bereits verwirrende Energieeffizienzklassen problematisch.

Eine andere Sichtweise

Zusammengefasst in meinen Augen also ein System, welches Kunden nur bedingt hilft, leichter einen Kaufentscheid ohne aufwendige Recherchen zu treffen. Es geht nicht darum, Absichten zu unterstellen, sondern darauf aufmerksam zu machen, dass umfassende Themen nicht auf ein paar hübsche, bunte Grafiken reduziert werden können.

Glücklicherweise kannst du selbst bereits viel zu einem nachhaltigeren Web beitragen. Und zwar ohne stundenlange Recherchen. Schlussendlich geht es nicht darum, wer das schönste oder die meisten Labels hat, sondern darum, wer unter dem Strich am wenigsten Ressourcen verbraucht.

Es sollte ebenfalls nicht um die Frage gehen, was am schädlichsten ist und deswegen vermieden werden muss. Das reicht schlichtweg nicht und ist vom falschen Ende her gedacht. Stattdessen müsste der Ansatz vielmehr lauten, dass so umwelt- und ressourcenschonend wie möglich gehandelt werden soll. Diesem Gedanken folgend betrifft das nicht nur die grössten Klimasünder, sondern alle Menschen, inklusive Webagenturen, Webseitenbetreiber und Browsende.

Wie viel Energie verbraucht das Internet?

Wird der durchschnittliche, tatsächliche Energieverbrauch für Server gemessen, ergeben sich ein paar ernüchternde Zahlen: Wäre das Internet ein Land, hätte es laut sustainablewebdesing.org den sechsthöchsten Energieverbrauch weltweit. Laut websitecarbon.com verbraucht das Internet denn auch satte 416,2 Terrawattstunden Strom pro Jahr. Eine Webseite verursacht pro Seitenaufruf rund 1.76 Gramm CO₂. Für eine Webseite mit 10’000 Seitenaufrufen pro Monat sind wir damit bei rund 211 Kilogramm CO₂ pro Jahr.

Wieso derart viel? Weil bei einem einzigen Seitenaufruf hunderte Ressourcen von allen möglichen Quellen über alle möglichen Entfernungen geschickt werden. Hinzu kommt der Content selbst: Videos verbrauchen deutlich mehr Ressourcen als Text. Gewisse Webseiten bieten deswegen auch einen Text Only Modus an, weil die Internetverbindung zum Beispiel bei Stürmen derart schlecht werden kann, dass es nur noch für Text und nicht mehr für Bilder oder Videos reicht. Der Ansatz, deswegen auf bestimmten Content zu verzichten, löst das Problem unter dem Strich allerdings nicht.

Analog statt digital?

Sind E-Books ressourcenschonender als klassische, physische Bücher? Ein Artikel von treehugger.com kommt zum Schluss, dass weder physische Bücher noch E-Books insgesamt ressourcenschonender sind und erwähnt, dass der ökologischste Weg darin besteht, gebrauchte Bücher zu kaufen. Gleiches gilt fürs Streaming: Gebrauchte CDs und DVDs sind nachhaltiger, als ständig Content zu streamen.

Vor ein paar Tagen ging der erste, von nun an jährlich stattfindende Secondhand Day der Schweiz zu Ende. Ziel davon ist es, auf das allgemein problematische, ressourcenverschwenderische Konsumverhalten aufmerksam zu machen und die Kreislaufwirtschaft zu fördern. Für Webseiten ist Recycling freilich etwas problematischer, allerdings können und müssen trotzdem Ressourcen eingespart werden.

Wie viel Energie verbraucht deine Webseite?

Möchtest du Wissen, wie “grün” deine Webseite ist, kannst du das kostenlose Tool von websitecarbon verwenden. Einen etwas ausführlicheren Bericht stellt dir ecograder ebenfalls kostenfrei zur Verfügung. Wichtig ist, dass diese Zahlen nicht absolut sind. Wie oben gezeigt gibt es unterschiedliche Herangehensweisen und Indikatoren um die Nachhaltigkeit eines Produkts zu messen. Fallen die Resultate aber durchwegs negativ aus, besteht Handlungsbedarf.

Was können Webseiteninhaber tun?

Der Grundgedanke ist immer derselbe: möglichst wenig Energie und Ressourcen verbrauchen. Performance- und designoptimierte Webseiten erfüllen diese Anforderungen interessanterweise besser als nicht optimierte Webseiten. Werden weniger Ressourcen geladen, wird weniger Energie verbraucht. Für einen einzigen Webseitenaufruf mag das vernachlässigbar, wenn nicht sogar lachhaft klingen. Allerdings macht es wie so oft die Masse. Millionen von Seitenaufrufen führen insgesamt zu den 416.2 Terrawattstunden Serverstrom pro Jahr. Also sollte es das Ziel sein, jeden einzelnen Seitenaufruf zu optimieren.

Webentwicklung: Effizienz von Ressourcen verbessern

Dateien können komprimiert und von überflüssigem Code befreit werden. Das gilt für HTML, CSS, JS, PHP, etc. Caching hilft ebenfalls: Werden Webseiten nicht immer neu generiert, spart das einiges an Serverleistung und macht die Webseite erst noch schneller und damit auch das Nutzererlebnis besser. (Hier eine Liste mit Caching Plugins für WordPress.) Handelt es sich um grössere Projekte mit weltweiten Zugriffen, bietet sich ein CDN (Content Delivery Network) an, weil die Inhalte über kürzere Distanzen und weniger Nodes geschickt und damit schneller geladen werden.

Webdesign: Das Laden unnötiger Ressourcen verhindern

Setzt du auf ein responsives Design, hilft auch das. Erstens werden keine Medien geladen, die zu gross für den jeweiligen Screen sind und zweitens werden CSS Styles nicht unnötig überschrieben, weil sie schon von Beginn an, wenn die Webseite das erste Mal geladen wird, stimmen. Auch die Navigation hat einen Einfluss: je schneller deine Besucher das finden, wonach sie suchen, desto weniger Webseiten werden unnötig aufgerufen.

Content optimieren

Dasselbe Spiel beim Content: Bilder komprimieren, um die Ladezeiten und das Nutzererlebnis zu verbessern. Und Lazy Loading verwenden, damit nur der Content geladen wird, der auch tatsächlich angeschaut wird. Wenn möglich SVGs anstatt Bilder verwenden oder auch mal Alternativen wie CSS Sprites oder Lottie Grafiken anschauen. Auch die Suchmaschinenoptimierung spielt eine Rolle: Finden deine Besucher deine Webseite schneller, verbrauchen sie weniger Server Ressourcen, weil sie nicht auf anderen Webseiten bouncen, bevor sie zu dir gelangen.

Social Media Embeds optimieren

Der Einfluss von Social Media Inhalten ist nicht zu unterschätzen. Die Umwelt und die User Experience können beide von Pagespeed Optimierungen profitieren. JavaScript ist dabei einer der grössten Übeltäter. Das Smashingmagazine hat zum Beispiel herausgefunden, dass ein eingebettetes YouTube Video rund 600 KB an JS benötigt und zwar unabhängig davon, ob es abgespielt wird oder nicht.

Die Autoren haben zudem die Total Blocking Time (TBT) für Twitter, Instagram und YouTube mit einer Mobilfunkverbindung getestet. Das ist die Zeit, die benötigt wird, bis mit der Website interagiert werden kann.

Twitter

Instagram

Youtube

Lazy Loading ist dementsprechend wichtig, vor allem bei datenhungrigen Videos. Als erfahrene Internet Agentur achten wir immer auf die Optimierung der Seitenladegeschwindigkeit bei unseren Kundenprojekten. Solltest du nicht in den Genuss von einer Luzerner Webagentur kommen, gibt es dafür wie so oft bei WordPress auch diverse Plugins. Ein populäres Pllugin heisst zum Beispiel schlicht Lazy Loading.

Gänzlich auf Social Media Posts verzichten?

Obwohl Posts nicht immer von Drittservern eingebettet werden müssen und stattdessen auch mit simplen Testimonials und Links ersetzt werden können, gibt es Situationen, wo die Tweets zu einem Thema aktuell gehalten werden müssen oder ein Video nunmal am besten passt.

In diesem Fall können die Tweets aber auch per API geladen werden, was den Webmastern ermöglicht, auf Bilder und Videos in den Tweets zu verzichen und nur den Text auszugeben. Und für kleine Videos gibt es auch die Möglichkeit, sie schlicht selbst zu hosten.

Auf Nachhaltigkeit im Webhosting achten

Beim Hosting ist es nicht ganz so einfach, weil du nicht die volle Kontrolle über Optimierungen hast. Allerdings steht es dir frei, deinen Hoster zu wählen. Mittlerweile setzen diverse Hoster auf Ökostrom und Nachhaltigkeit, darunter Cyon, Infomaniak, Hoststar, Firestrom, Novatrend, Metanet, Onlime, Unaxus, usw.

Nachhaltigkeit ist leider auch zu einem Marketingtool verkommen, was bedeutet, dass der Konkurrenzdruck zu Floskeln oder (un)absichtlich irreführenden Labels führen kann. Es ist deswegen ratsam, sich ausführlich über mögliche Hoster zu informieren.

Und sollte es um grössere Dateien gehen, kann man auch gezielt auf Länder mit grüner Energie achten. Ein Vergleich zwischen der Schweiz und den Nachbarländern gibt es zum Beispiel via Electricitymap.

Ein CDN (Content Distribution Network) ist insbesondere bei internatinal ausgelegten Webseiten eine gute Möglichkeit, um ein wenig auf Nachhaltigkeit zu achten, weil die Inhalte von geographisch näher gelegenen Servern geladen werden. (Ein weiterer Vorteil und meistens auch der Hauptgrund für ein CDN ist die teilweise massiv verbesserte Ladegeschwindigkeit.)

WordPress aufräumen

Auch dein CMS kann eine Auswirkung aufs Klima haben. Wieder gilt der Ansatz: je weniger Ressourcen geladen werden müssen, desto besser. Das bedeutet, nach Möglichkeit nicht zu viele Plugins installieren und ein lightweight Theme für deine WordPress Installation verwenden.

Kundinnen legen Wert Nachhaltigkeit und Ehrlichkeit

Nachhaltigkeit ist in Mode: Google hat letztes Jahr Daten dazu veröffentlicht, wie wie viele Käuferinnen Wert auf Nachhaltigkeit bei ihren Online Shopping Erlebnissen legen. Ganze 55% meinten, dass Nachhaltigkeit wichtiger ist als das Preis-Leistungs-Verhältnis (was 40% wichtiger fanden) oder gar die Qualität (was gerade mal 38% wichtig fanden).

Google vergleicht diese Daten dann mit Zahlen zu den tatsächlich getätigten Käufen, welche ein anderes Bild zeichnen. Da liegt das Preis-Leistungs-Verhältnis (84%) und die Qualität (84%) deutlich vor der Nachhaltigkeit (59%). Das führt Google zum Schluss, dass ein “action gap”, sprich ungenutztes Potenzial bei Onlinehändern besteht.

Über Nachhaltigkeit zu sprechen ist zwar als Sichtbarkeitsstrategie wirksam, allerdings sind die Kundinnen informierter denn je und erkennen falsche oder nicht verifizierte Behauptungen deutlich schneller. (Google nennt das “wising up to greenwashing”.)

Und da Transparenz bei den Kundinnen ebenfalls gross geschrieben wird, ist die Kombination der beste Weg: der Sichtbarkeit wegen SEO optimiert auf der Webseite erklären, dass man Wert auf Nachhaltigkeit legt und diesen Claim dann auch gleich mit Zahlen und Fakten belegen.

In der WordPress Community aktiv werden

Um die halbe Welt zu fliegen, um für ein paar Tage an einem WordCamp oder an einer PHP Konferenz teilnehmen zu können gehört ebenso zum Gesamtbild. Lohnt sich die Reise? Kann vielleicht auf Werbegeschenke oder günstige Produkte, welche nach ein paar Tagen wahrscheinlich im Müll landen, verzichtet werden? Wie wäre es mit vegetarischem Essen als Standardwahl?

Diese und mehr Punkte wirft ein WordPress Backend Developer in den Ring, stellt aber in Frage, ob die Umsetzung dieser und mehr Ideen der richtige Weg ist. Es geht um die Problematik des Zwangs und der verschiedenen Meinungen. Welcher Weg der richtige ist, um die Welt zu retten, ist dem Individuum überlassen.

Allerdings steht es dem Individuum auch frei, aktiv zu werden und Ideen einzubringen und mit guten Argumenten andere zu überzeugen. Das gilt nicht nur für WordPress Entwickler, sondern auch schlicht für alle, die mit WordPress zu tun haben. Die Community ist online, gross und jederzeit erreichbar.

Fazit

Zusammengefasst also immer dasselbe Vorgehen: informieren, optimieren und reduzieren. Labels können bei der Orientierung helfen und Entscheidungen erleichtern, sollten aber auch hinterfragt werden. Einen Kühlschrank wählt man wie einen Hoster in der Regel einmal und bleibt dann ein paar Jahre dabei. Da lohnt es sich, zu wissen, in was man investiert.

Zudem kannst du deine Webseite mit einigen wenigen Schritten klimafreundlicher gestalten: optimiere deinen Content, mache ihn relevanter, achte auf eine übersichtliche Menüführung und vermeide es, Serverressourcen zu verschwenden, indem du deinen Code effizient hältst. Von diesen Massnahmen profitieren nicht nur das Klima und die Welt insgesamt, sondern auch die Besucher deiner Webseite und damit auch du selbst.