Das Manifest für geringe Auswirkungen: Die 10 Leitlinien von Organic Basics zum Aufbau umweltfreundlicherer Websites

Einfache Regeln mit grenzenlosen Möglichkeiten

Zunächst haben wir uns eingehend damit beschäftigt, wie man eigentlich eine nachhaltige Website baut, und wurden mit Tipps und Tricks überflutet. Uns wurde schnell klar, dass wir nicht alles umsetzen konnten und die Möglichkeiten eingrenzen mussten. 

Inspiriert vom Dogme 95 Manifest und dessen Keuschheitsgelübden schrieben wir ein Manifest mit 10 Regeln für den Bau einer Low-Impact-Website. Wie die Keuschheitsgelübde bewegen sich diese zwischen sehr konkreten und offen interpretierbaren Vorgaben. 

Dies gibt Designern und Entwicklern Raum, die Lösungen zu finden, die am besten zu ihrem technischen Setup passen, ohne Kompromisse bei der Nachhaltigkeit einzugehen. Die Regeln schreiben keine bestimmten Technologien vor und können sich daher mit der technologischen Entwicklung weiterentwickeln.

Im Folgenden stelle ich die 10 Regeln vor und gebe einige Ideen, wie Sie diese auf Ihrer eigenen Website umsetzen können. 

1. Laden Sie keine Bilder, bevor sie nicht aktiv vom Nutzer angefordert werden

Bilder tragen wesentlich zum Datenverbrauch jeder Website bei, was besonders für Onlineshops gilt. Wir müssen unsere Produkte visuell präsentieren und dies häufig aus verschiedenen Blickwinkeln oder an unterschiedlichen Modellen. 

Wichtig ist hier, nur die Bilder zu laden, die der Nutzer tatsächlich sehen möchte. Das kann bedeuten, Bilder erst zu laden, wenn ein Nutzer auf der Seite nach unten scrollt, durch eine Slideshow klickt oder sie erst anzuzeigen, wenn der Nutzer auf „Bild anzeigen“ klickt. 

Diese Regel ist etwas knifflig, denn Illustrationen als skalierbare Vektorgrafiken (SVGs) sind weiterhin erlaubt, aber die Dateigröße einer SVG ist im Vergleich zu den meisten Bildern äußerst gering. Wir nutzen das auf unserer Seite, indem wir in der Übersichtsgitter Illustrationen anzeigen (siehe unten) und Bilder auf der Produktseite erst anzeigen, wenn sich der Nutzer aktiv entscheidet, eine Slideshow zu laden.

2. Minimieren Sie den Stromverbrauch auf dem Gerät des Nutzers

Dies lässt sich zwar schwer messen, ist aber dennoch wichtig. Der Hauptgrund für diese Regel ist, dass der Fokus nicht nur auf die Übertragung von Dateien gelegt werden sollte, sondern auch darauf, was die Daten auf dem Gerät des Nutzers bewirken.

Momentan konzentrieren wir uns dabei besonders auf den Einsatz von Animationen sowie auf die Menge der aktiv laufenden Skripte auf Ihrer Website. Jeglicher Einsatz von 3D kann den Akku eines Geräts zusätzlich stark beanspruchen. 

Folgende Fragen können Ihnen helfen, besser mit dieser Regel zu arbeiten:

• Trägt diese Animation / 3D / dieses Skript zur Nutzererfahrung bei oder ist es nur schmückendes Beiwerk?
• Können wir die Nutzung dieser Animation / 3D / dieses Skriptes auf der Seite begrenzen?
• Können wir diese Animation / 3D / dieses Skript vereinfachen, so dass es nur genau das tut, was nötig ist?

Weiterführende Lektüre: Verantwortungsbewusstere Entscheidungen im User Experience Design treffen

3. Passen Sie sich dem Anteil erneuerbarer Energien an, mit dem Ihre Seite betrieben wird

Wie Energiesysteme und das Internet derzeit funktionieren, kann keine Website zu 100 % mit erneuerbarer Energie betrieben werden. Selbst Google, das sich zunehmend auf erneuerbare Energien konzentriert, um seine Rechenzentren zu betreiben, erreicht das nicht. 
Was wir stattdessen tun können, ist, unsere Websites an den Anteil erneuerbarer Energien im Stromnetz anzupassen. Viele Energieversorger, wie zum Beispiel Barry, machen so etwas Ähnliches bereits, indem sie ihren Kunden eine App zur Verfügung stellen, die anzeigt, wann der Strom weniger CO2-intensiv ist (siehe unten).

Auf der Low-Impact-Website von Organic Basics verlassen wir uns auf die carbonintensity.org.uk-API, die uns mit Daten versorgt. Die API ermöglicht kostenlosen und einfachen Zugriff auf die CO2-Intensität verschiedener Regionen im Vereinigten Königreich. Eine Alternative wäre die Electricity Map API, die zwar ziemlich teuer ist, aber dafür Daten aus vielen weiteren Regionen weltweit bietet. Der Nachteil dieser API ist der Preis für die Nutzung. 

Wir mussten das Rechenzentrum London auswählen, da unsere Seite auf Google Cloud gehostet wird und dies die einzige Option im Vereinigten Königreich ist. Ironischerweise befindet sich dieses Rechenzentrum in einer der CO2-intensiveren Regionen im Hosting-Angebot von Google Cloud. 

Je nach CO2-Intensität verändern wir die Qualität der angezeigten Bilder und beschränken die Anzahl der Animationen. Ist der Strom besonders CO2-intensiv, schalten wir die Website sogar komplett ab.

Stattdessen zeigen wir eine Minimal-Seite an, die unsere Kunden darüber informiert, dass die Website nicht erreichbar ist. Sie gibt sogar eine ungefähre Prognose, wann der Zugriff wieder möglich ist, basierend auf den Vorhersagedaten der carbonintensity.org.uk-API. Seit dem Start der Seite war sie insgesamt etwa 12,5 Stunden nicht verfügbar.

4. Informieren Sie den Nutzer über die Auswirkungen seines Surfverhaltens

Wenn ich online einkaufe, erwarte ich, sehen zu können, wie viel mein Warenkorb kostet. So kann ich herausfinden, ob ich noch Geld übrig habe oder mich auf die Suche nach Rabatten machen muss. Ähnlich sollten wir unsere Kunden auch darüber informieren, welche Auswirkungen ihr Surfverhalten auf das Klima hat.

Auf unserer Website berechnen wir kontinuierlich die Emissionen, die ein Nutzer während seines Besuchs verursacht. Auf diese Weise können sie sich mit dem Thema CO2-Emissionen vertraut machen und erfahren, wie diese mit der Webseitennutzung zusammenhängen. Wenn möglich, sollten Sie diese Emissionen zudem selbst erfassen, denn letztlich liegt es in der Verantwortung des Websitenbetreibers, sie zu senken. 

5. Verwenden Sie keine Videos

Wir lieben Videos bei Organic Basics, aber sie können das CO2-Budget einer Website wirklich sprengen. Diese Regel ist mit Abstand die strengste der 10, aber dafür gibt es einen sehr guten Grund. 

Das Internet wird immer mehr von Videos dominiert, doch anstatt diesem Trend zu folgen, haben wir uns bewusst dagegen entschieden. Um die Klimakrise wirklich zu bekämpfen, reicht es nicht, nur zu optimieren und zu minimieren – wir brauchen Degrowth. 

Mit dieser Regel zwingen wir Sie, außerhalb des Videoplayers zu denken und darüber nachzudenken, wie Sie Bewegung und Dynamik auf andere Weise umsetzen können, anstatt viele Megabytes an Videoinhalten zu laden. Als Alternative empfehlen sich CSS- oder SVG-Animationen. Und das gilt doppelt für GIFs. Verwenden. Sie. Keine. GIFs.

6. Speichern Sie Daten lokal auf dem Gerät des Nutzers, um Datenübertragung zu minimieren

Alle Inhalte, die Sie auf Ihrer Website anzeigen, können potenziell lokal auf dem Gerät des Nutzers gespeichert werden. Es ergibt keinen Sinn, etwas zweimal herunterzuladen, wenn es sich wahrscheinlich nicht ändert. 

Die meisten Entwickler werden diese Regel bereits als wichtig erkannt haben. Sie optimiert die Performance der Website und reduziert gleichzeitig deren ökologischen Fußabdruck.

Um dies zu erreichen, können Sie erwägen, Ihre Website als Progressive Web App zu entwickeln und Offline-Zugriff zu ermöglichen. 

7. Komprimieren Sie alle Daten so stark wie möglich

Sobald Ihre Dateien beim Nutzer angekommen sind, sollten Sie sicherstellen, dass sie dort bleiben, bis sie aktualisiert werden. Das nennt man Caching. Aber bevor sie überhaupt dort ankommen, müssen Sie sicherstellen, dass diese Dateien so klein wie möglich sind. 

Minifizieren Sie Ihr CSS und JavaScript und komprimieren Sie Ihre Bilder. Viele moderne Frameworks, wie Nuxt.js oder Next.js, übernehmen diese Arbeit bereits für viele Dateitypen. 

Das ist wirklich selbstverständlich und macht – wie Caching – auch aus Performance-Sicht Sinn.

8. Laden Sie nur die wichtigsten Programmskripte, Frameworks und Cookies

Jedes Mal, wenn Sie eine Bibliothek oder ein externes Skript zu Ihrem Code hinzufügen, vergrößern Sie die Seitengröße. Selbst wenn die Bibliothek nur 1 KB groß ist, wird daraus bei 1000 Nutzerinnen und Nutzern, die die Seite laden, schnell 1 MB.

Diese Regel soll Sie daran erinnern, wirklich jedes einzelne Skript, jedes Framework und jeden Cookie, den Sie hinzufügen, zu hinterfragen. Das Wort „entscheidend“ sollte hier Ihre Aufmerksamkeit bekommen. Conversion-Tracking und Analysen sind auf allen E-Commerce-Shops entscheidend, aber müssen sie wirklich auf jeder Seite integriert sein?

Diese Überlegungen gehen auch gut mit etwas Datenschutz einher, da DSGVO und ähnliche Vorschriften eine Zustimmung verlangen, bevor Skripte geladen werden. 

9. Begrenzen Sie die Lichtmenge, die Ihr Bildschirm abgibt

Seit der Veröffentlichung des Manifests haben wir Kommentare erhalten, die darauf hindeuten, dass diese Regel eigentlich keinen Unterschied mache, da ein Dunkelmodus nur auf OLED-Bildschirmen den Energieverbrauch senkt. 

Unser Standpunkt: Gut für Nutzerinnen und Nutzer mit OLED-Bildschirmen! Auf der Low-Impact-Website von Organic Basics nutzen wir dennoch an manchen Stellen Weiß, da dies ein wichtiger Bestandteil unseres Markenerlebnisses ist. Wie im nachfolgenden Beispiel zu sehen ist, greifen wir aber auch auf einen Gelbton und eine graue Nuance zurück, um die abgegebene Lichtmenge des Bildschirms einzuschränken.

10. Optimieren und begrenzen Sie die Nutzung von eigenen Schriftarten

Abschließend kommen wir zum Einsatz von eigenen Schriftarten. Schriften machen zwar insgesamt nur wenig an den verursachten Emissionen einer Website aus, aber die Nutzung kann leicht ausufern. 

Aus diesem Grund haben wir auf der Low-Impact-Website nur eine einzige eigene Schriftart verwendet. Wir sind sogar so weit gegangen, bestimmte Zeichen aus dem Zeichensatz zu entfernen. Für eine englischsprachige Seite braucht es nun wirklich kein Kyrillisch.

Der nächste Schritt

Wenn Sie diese 10 Regeln befolgen, sind Sie definitiv auf dem besten Weg, Ihren E-Commerce-Shop in eine ressourcenschonende Version zu verwandeln. Viel wichtiger noch: Sie haben den Prozess durchlaufen und Ihre Website aus Nachhaltigkeitsperspektive – und als Teil des Nachhaltigkeitspuzzles – betrachtet. 

Wenn Sie diese Regeln betrachten, ist es wichtig, das zu finden, was am besten zu Ihrer Marke passt. Nicht alle Regeln sind gleich streng, und das sollten Sie zu Ihrem Vorteil nutzen. Ihre umweltschonende Website ist nicht identisch mit meiner – und das ist auch richtig so. 

Dennoch hört ein nachhaltiges Internet nicht bei Strom und Energieeffizienz auf, auf die sich diese 10 Regeln fokussieren. Wenn wir den Blick weiten, müssen wir auch die Materialien betrachten, aus denen unsere Geräte, Datenzentren und Netzwerke bestehen.

Das Internet besteht zwar aus (amüsanten) Katzenmemes und Blogs, aber genauso aus echten, seltenen Erden, die oft unter schlechten Arbeitsbedingungen und erheblichen Umweltbelastungen abgebaut werden. 

In den letzten Jahren hat uns Fairphone ein nachhaltigeres Smartphone beschert, aber die Diskussion über das Internet als Ganzes wurde noch nicht begonnen. Anders gesagt: Wir brauchen eine Art Fairphone für Server-Infrastruktur.

Weiterlesen: Das eigene Team motivieren, den Planeten zum Stakeholder Ihrer Website zu machen

Mehr zu nachhaltigen Themen: Das Handbuch für nachhaltigen E-Commerce