Wie du die Klimabilanz deiner Website verbessern kannst
Teilen via:
Ein klimafreundliches Internet
Klimaschutz ist die Jahrhundertaufgabe. Nicht erst seit dem neuesten IPCC-Report ist klar geworden, dass wir unsere Gesellschaft deutlich umkrempeln müssen, um das 1,5-Grad-Ziel noch zu erreichen: Nur, wenn die Welt bis 2050 klimaneutral wird, wird es noch möglich sein, die globale Erwärmung durch CO2-Entnahme aus der Atmosphäre auf 1,4 °C zu senken.
Klimaneutralität bis 2050 ist kein einfaches Ziel. Der Verzicht auf Emissionen kann an manchen Stellen weitreichende Konsequenzen haben: In Entwicklungsländern stammen ein Großteil der Treibhausgas-Emissionen aus der Landwirtschaft, auf die natürlich nicht verzichtet werden kann. Umso wichtiger ist es deshalb, die Emissionen überall dort rigoros zu reduzieren, wo sie eben nicht notwendig sind. Jede*r von uns sollte sich der Verantwortung bewusst sein und die eigene Lebensweise kritisch hinterfragen: Wo produziere ich mit meinen Handlungen Emissionen? Worauf kann ich eventuell verzichten?
Als Webentwickler fällt mein Blick dabei unweigerlich auf das Internet. The Shift Project, ein Pariser Think Tank mit Fokus auf die Energiewende, hat den Einfluss des Internets auf das Klima untersucht und die Ergebnisse im März 2019 in dem Report „Lean ICT“ – Towards Digital Sobriety veröffentlicht. Darin wird geschätzt, dass das Internet für 3,7 % der gesamten Treibhausgas-Emissionen verantwortlich ist. Das ist vergleichbar mit dem weltweiten Flugverkehr. Und es ist davon auszugehen, dass dieser Anteil durch die Digitalisierung in den nächsten 20 Jahren noch deutlich steigen wird. Der Report geht von einem jährlichen Anstieg um 9% aus. Umso wichtiger ist es, dass wir auch das Internet möglichst klimafreundlich gestalten. Im Gegensatz zum Flugverkehr wird dieses Thema in der Öffentlichkeit aber relativ selten wahrgenommen.
Wir von Flanke 7 möchten unseren Teil dazu beitragen, indem wir bei unserer Arbeit auch auf die Klimabilanzen der von uns entwickelten Websites achten. Wie ich bereits geschrieben hatte, ist das auch einer der Gründe, warum wir den meisten unserer Kund*innen den Jamstack empfehlen. Aber warum ist eine Jamstack Website in der Regel klimafreundlicher als eine klassische Website? Dazu ist es wichtig zuerst zu verstehen, wie sich die Klimabilanz deiner Website generell messen und verbessern lässt.
Wie lässt sich die Klimabilanz deiner Website messen?
Die Klimabilanz deiner Website kann streng genommen nicht gemessen, aber relativ gut geschätzt werden. Es gibt verschiedene Tools, die so eine Schätzung vornehmen können, wie z.B. den Website Carbon Calculator oder EcoPing. Aber wie funktionieren diese Tools?
Der Website Carbon Calculator schätzt die Klimabilanz deiner Website auf Grundlage von fünf Kennzahlen ein:
Wieviele Daten werden übertragen, wenn deine Website lädt?
Wieviel Energie verbrauchen diese Daten? Sowohl die Rechenzentren, das Telekommunikationsnetzwerk als auch die Endgeräte der User verbrauchen eine bestimmte Menge an Energie pro übertragenem Byte. Der Calculator greift hier auf einen Durchschnittswert von 1,8 kWh pro Gigabyte zurück.
Welche Energiequellen nutzen die Rechenzentren? Wenn ein Rechenzentrum einen Teil seines Stromes aus erneuerbarer Energie bezieht, reduziert der Calculator die CO2-Emissionen entsprechend. Da der Calculator natürlich nicht in der Lage ist, die Energiequelle des Telekommunikationsnetzwerkes und der Endgeräte zu kennen, geht er hier vom Standard-Stromnetz aus.
Wie hoch ist die CO2-Intensität der verbrauchten Energie? Hier rechnet der Calculator mit dem internationalen Durchschnitt: 475 Gramm CO2 pro kWh für herkömmliche Energie und 33 Gramm CO2 pro kWH für erneuerbare Energie.
Wieviele User besuchen deine Website? Aus den vorigen Kennzahlen lässt sich die Klimabilanz eines einzelnen Pageviews schätzen. Multipliziert mit der Anzahl der jährlichen Pageviews ergibt sich so die Klimabilanz deiner Website.
Aber was kannst du jetzt tun, wenn der Website Carbon Calculator deiner Website einen relativ großen CO2-Fußabdruck bescheinigt? Zum Einen kannst du das CO2 kompensieren. Der Calculator selbst gibt dir hier ein paar Vorschläge und sagt dir auch, wieviele Bäume du pflanzen müsstest, um deine Website auszugleichen. Aber auch Anbieter wie zum Beispiel ClimatePartner können dir dabei helfen, die genauen CO2-Emissionen deines gesamten Unternehmens (und nicht nur der Website) zu berechnen und auszugleichen.
Wie lässt sich die Klimabilanz deiner Website verbessern?
Zum Anderen solltest du aber auch versuchen, die Klimabilanz deiner Website zu verbessern. Das geht vor allem, indem du die Menge der übertragenen Daten verringerst. Hierbei gibt es verschiedene Stellschrauben:
Die Menge an Daten, die deine Website pro Pageload bzw. pro Sekunde übertragt.
Die Dauer, die User im Durchschnitt brauchen, um ihr Ziel auf deiner Website zu erreichen.
Die Anzahl an User, für die deine Website nicht relevant ist.
Die letzten beiden Punkte habe ich bewusst so formuliert. Natürlich sollst du nicht versuchen, die Sitzungsdauer deiner User oder die Anzahl deiner User einfach nur zu reduzieren. Das würde die Klimabilanz zwar schon verbessern, aber vor allem deinem Unternehmen schaden.
Stattdessen geht es darum, die User möglichst schnell an ihr Ziel zu führen. Und User, für die deine Website nicht relevant ist, sollten das möglichst früh merken. Am besten natürlich, bevor sie überhaupt auf deine Website gehen. Das ist nicht nur in dem Interesse der User, sondern auch in dem von Google.
Konkret können dabei Optimierungen in diesen Bereichen helfen:
SEO: Je besser deine Website für Suchmaschinen optimiert ist, desto genauer können Google und co. deine Website an die richtige Zielgruppe ausspielen. Dadurch sinkt die Anzahl an irrelevanten Usern auf deiner Website.
User Experience: Eine gute UX sorgt dafür, dass es möglichst wenige Hindernisse auf deiner Website gibt und deine User schnell an ihr Ziel kommen. Wenn ein User sich erst durch viele unübersichtliche Unterseiten klicken muss um das zu tun, was er/sie vorhat, dann steigt die Sitzungsdauer unnötig. Zu guter UX zähle ich hier auch gute Inhalte, die den Usern die gesuchten Informationen bereitstellen, ohne, dass sie dafür lange, unstrukturierte Artikel lesen müssten.
Design: Der Großteil der Datenmenge einer Website besteht nicht selten aus Bildern, Fonts und Videos. Natürlich sollte deine Website noch gut aussehen und nicht komplett auf solche Elemente verzichten. Aber es kann helfen, einige Bilder, Videos und Fonts einmal zu hinterfragen: Bietet jedes Bild, Video und Font wirklich einen Mehrwert für das Design? Könnten einzelne Bilder vielleicht durch Vektorgrafiken oder CSS ersetzt werden? Sind die Bilder richtig optimiert, komprimiert und in einem effizienten Format (WebP)? Und werden alle importierten Fonts auch wirklich genutzt? Werden moderne Web Font Formate wie WOFF genutzt?
Clean Code, Plugins und Skripte: Die Entwickler deiner Website sollten darauf achten, effizienten Code zu schreiben und nur Plugins zu installieren, die wirklich notwendig sind. Gibt es vielleicht noch alte Trackingskripte auf deiner Website, die nicht mehr benötigt werden? Nutzt deine Website Optimierungen wie Tree-Shaking, Lazy Loading oder Deferring von non-critical CSS?
Caching: Caching sorgt dafür, dass deine Website nicht jedes mal komplett neu geladen wird, wenn ein wiederkehrender User deine Website erneut besucht.
Performance Marketing: Wenn du Anzeigen schaltest, sei es bei Google, auf Social Media oder in Display-Netzwerken, solltest du dein Targeting natürlich immer so einstellen, dass möglichst nur relevante Klicks generiert werden.
Abgesehen von diesen Punkten kannst du übrigens auch darauf achten, einen möglichst energieeffizienten Hoster zu wählen. Entscheidend ist hierbei der sogenannte PUE-Wert (Power Usage Effectiveness). Dieser bildet sich aus dem gesamten Energieverbrauch eines Rechenzentrums geteilt durch den Energieverbrauch der dort betriebenen Computer. Je weiter der PUE-Wert über 1 ist, desto mehr Energie wird für externe Aufgaben wie die Kühlung benötigt. Der Durchschnitt liegt hier bei einem PUE von 1,67. Die besonders effizienten Rechenzentren von Google haben dagegen einen PUE-Wert von nur 1,11.
Das Problem mit den eben beschriebenen Optimierungsmaßnahmen wird schnell deutlich: Es scheint extrem aufwendig zu sein, eine klassische Website im Hinblick auf Klimafreundlichkeit zu optimieren. Genau hier kann eine Jamstack Website helfen.
Warum der Jamstack die beste Möglichkeit ist, die Klimabilanz deiner Website zu verbessern
Jamstack Websites sind generell klimafreundlicher als klassische Websites.
Was genau der Jamstack ist, kannst du hier nachlesen. Zusammengefasst werden Websites beim Jamstack-Ansatz vorab mit einem Static Site Generator (SSG) gebaut und dann zur Run Time (wenn ein User die Seite besucht) als fertige statische Website über ein Content Delivery Network (CDN) ausgeliefert. Das bedeutet, dass jedem User nur noch „fertiges“ HTML, CSS und JavaScript übertragen wird.
Herkömmliche Websites dagegen werden erst zur Run Time fertig gebaut, indem sie jedesmal, wenn ein User die Website besucht, mehrere Anfragen an den Backend-Server schicken. Das ist äußerst ineffizient und heutzutage nur bei wenigen, sehr dynamischen Websites noch notwendig. Jede dieser Anfragen an den Server verursacht zusätzliche CO2-Emissionen, die in den allermeisten Fällen vermeidbar wären.
Außerdem macht der Jamstack es eben auch möglich, die gesamte Website über ein CDN auszuliefern. Ein CDN ist ein Netzwerk aus Servern, die Edge Computing nutzen um Inhalte auf der ganzen Welt und besonders schnell zu verteilen. Diese Inhalte werden auf einem zentralen Origin Server gehostet und von dort auf einer Vielzahl von Edge Nodes, die auf der ganzen Welt verteilt stehen, gecached. Jede User*in bekommt die Inhalte dann von der nächstgelegenen Edge Node ausgeliefert. So wird die Entfernung, die die Daten zurücklegen müssen, so gut wie möglich reduziert. Dadurch sinkt auch der Energieverbrauch und damit die CO2-Emissionen. Zwar können (und sollten) klassische Websites CDNs auch nutzen. Allerdings nur um größere Inhalte wie Bilder und Fonts auszuliefern. Statische Jamstack Websites können dagegen komplett auf diese Weise verteilt werden.
Darüber hinaus sind viele der im vorigen Kapitel beschriebenen Optimierungen bei unseren Jamstack Websites schon von Haus aus enthalten:
SEO: Im Gegensatz zu Single Page Applications sind Jamstack Websites auch für SEO-Crawler gut lesbar.
User Experience: Die Ladezeiten einer Jamstack Website sind kaum wahrnehmbar. Diese Schnelligkeit verringert logischerweise die Zeit, die User brauchen, um an ihr Ziel zu gelangen.
Design: Wir nutzen für unsere Jamstack Websites den SSG (Static Site Generator) Gatsby.js. Um viele der Optimierungen an Bildern, Videos und Fonts kümmert sich Gatsby schon direkt beim Bauen der Website. Zum Beispiel generiert Gatsby automatisch kleinere Versionen aller Bilder, damit Smartphone- und Tablet-User nicht Bilder in Desktop-Größe herunterladen müssen.
Clean Code, Plugins und Skripte: Um Lazy Loading und Tree Shaking kümmert Gatsby sich. Und um effizienten Code und überflüssige Plugins und Skripte kümmern wir uns gerne.
Caching: Das Caching übernimmt bei uns Netlify.
Einzig auf das Targeting deines Performance Marketings hat der Jamstack keinen Einfluss. Wir helfen dir hier aber auch gerne weiter.
Die Low-Hanging-Fruit in Kampf gegen die Klimakrise
The Shift Project fordert Unternehmen in ihrem Report zur „Digital Sobriety“ auf – also zu digitaler Abstinenz. Sowohl auf individueller als auch auf kollektiver Ebene sollte jede*r ihr Kauf- und Konsumverhalten von digitalen Produkten und Dienstleistungen im Hinblick auf die CO2-Bilanz hinterfragen. Wenn Unternehmen eine neue Website bauen lassen möchten, sollten sie sich deshalb fragen: Welche Features helfen meinen Nutzer*innen, schneller an ihr Ziel zu kommen? Und brauche ich dafür wirklich einen Server und eine Datenbank, oder erfüllt eine statische Jamstack Website eigentlich auch alle meine Anforderungen? Meiner Erfahrung nach sind die meisten dynamischen Inhalte mit statischen Jamstack Websites genau so gut umsetzbar.
Beispiel Unternehmensnews: Der Großteil der Unternehmen, die ich kenne, hat zwar eine News-Unterseite, veröffentlich dort aber nur relativ selten neue Artikel. Macht es da wirklich Sinn, dass bei jedem Pageview eine neue Anfrage an den Server geschickt wird, um die aktuellen Artikel abzurufen? Eine Jamstack Website wird dagegen neu gebaut, sobald das Unternehmen einen neuen Artikel veröffentlicht (dank Webhooks vollautomatisch). Danach wird bei jedem Pageview nur noch statisches HTML, CSS und JavaScript ausgeliefert, ohne weitere Anfragen an einen Server.
Klassische Websites sind also oft ineffizient und produzieren CO2-Emissionen für Features, die kaum einen Mehrwert bieten gegenüber der Jamstack-Variante. Und 2020 nutzten erst ca. 1% aller Websites den Jamstack!
Nein, nicht für alle Websites macht der Jamstack Sinn. Aber für einen großen Teil der 99% an Websites, die noch nicht den Jamstack nutzen, eben schon. Deshalb ist der Jamstack meiner Meinung nach die absolute Low-Hanging-Fruit im Kampf gegen die CO2-Emissionen von Websites.
Und das Beste daran ist: Während Klimaschutz in anderen Bereichen oft mit Verzicht einhergeht, ist das bei einem Wechsel zum Jamstack überhaupt nicht der Fall! Deine Website wird auch deutlich schneller, skalierbarer und sicherer. Du bekommst also eine rundum bessere und schnellere Website, die alle deine Anforderungen erfüllt und darüber hinaus auch besser für das Klima ist.
