60% CO2-Emissionen sparen – Unsere Reise zur nachhaltigen codecentric-Website

Uns bei codecentric ist Nachhaltigkeit ein besonderes Anliegen. Das kann man an der B Corp™-Zertifizierung sehen, aber auch daran, dass wir kontinuierlich daran arbeiten, ökologisch nachhaltig und sozial fair zu handeln. Dabei richten wir unser Augenmerk nicht nur auf unsere Kundenprojekte, sondern legen auch einen Fokus auf unsere internen Tools und Prozesse. 

Im April 2024 haben wir uns in diesem Zusammenhang zur Mission gemacht, den CO2-Fußabdruck unserer Website zu prüfen und zu verbessern.

Einordnung der gemessenen CO2-Emissionswerte 

Bevor wir in die Details der CO2-Emissionen unserer Website eintauchen, ist es wichtig zu verstehen, dass alle Angaben, die wir hier präsentieren, Schätzungen sind. Die Berechnung des CO2-Fußabdrucks einer Website ist relativ komplex und basiert auf einer Reihe von Annahmen und Algorithmen. Die Schätzungen werden anhand von wissenschaftlichen Modellen vorgenommen und sind reproduzierbar. Wir können auf diese Weise die Emissionsreduktion vornehmen und annähern, jedoch nicht exakt auf ein Gramm genau bestimmen.

Die Tools, die wir zur Messung der CO2-Emissionen verwenden, analysieren die von der Website gesendeten Daten und berechnen aus der Größe der übertragenen Daten und der Information, ob die Domain "Green hosted" ist, die CO2-Emissionen. Green Hosting bezieht sich dabei auf Webhosting-Dienste, die auf umweltfreundliche Weise betrieben werden, beispielsweise durch den Einsatz erneuerbarer Energien oder energieeffizienter Technologien. 

Die Ergebnisse sind eine gute Basis, um zu verstehen, welche Auswirkungen eine Website auf die Umwelt hat und wo wir Verbesserungen vornehmen können, um den CO2-Fußabdruck zu reduzieren.

Bildung eines cross-funktionalen Projektteams

Das Consulting-Team und das Marketing-Team brachten ihre jeweiligen fachlichen und technischen Expertisen ein, um die CO2-Emissionen zu identifizieren und zu reduzieren.

Der Anstoß kam aus dem Consulting-Team, welches sich mit Sustainalibilty in Kundenprojekten beschäftigt. Auch die Marketingkolleg*innen waren sofort motiviert und bereit, sich auf diese Reise zu begeben. 

Die Frage, die nun im Raum stand, war: Wie gehen wir am besten vor?

Unser Weg zu einer nachhaltigen Website

Architektur verstehen

Der erste Schritt bestand darin, ein tiefgreifendes Verständnis für die Architektur unserer Website zu erlangen. Dies war die Basis, um später die richtigen Schlüsse aus der Analyse zu ziehen. 

Während das gesamte Marketing-Team den textuellen und grafischen Inhalt der Website im CMS Hygraph pflegt, wird das User Interface (UI) von einer externen Agentur in Next.js (React Framework) implementiert.

Bei der Contentpflege gibt es eine Trennung zwischen dem Blog und den Seiten, die codecentric und unsere Leistungen vorstellen.
Wir haben uns bei der weiteren Analyse auf den zweiten Part konzentriert, da der Blog von allen Mitarbeiter*innen der codecentric gepflegt werden kann und wir hier weniger Einflussmöglichkeiten auf den Inhalt haben.

Erste Messung der Startseite

Für eine erste Messung haben wir Website Carbon verwendet, ein Online-Tool, welches den CO2-Fußabdruck zu einer gegebenen URL berechnet. Es bietet neben den Ergebnissen zu den CO2-Emissionen greifbare Beispiele, um den angegebenen Wert besser zu verstehen. So wird beispielsweise “gCO2” in Relation zu Autofahrten oder Flügen gesetzt. Die Emissionen werden auch grafisch ähnlich einem Energieeffizienzlabel von F bis A+ bewertet. Gleichzeitig bietet das Tool auch noch einen Vergleich zu allen anderen vom Tool getesteten URLs. 

Unsere Messungen ergaben, dass unsere Website schmutziger als 52% der von dem Tool gemessenen Seiten war und 0,5g CO2 bei jedem Aufruf verursachte.

Dies bestätigte unsere anfängliche Vermutung: Es bestand definitiv Raum für Verbesserungen in Bezug auf die Nachhaltigkeit unserer Website. 

Ziele setzen und Scope festlegen

Wir haben uns die Frage gestellt, wie intensiv wir die Optimierung der Website hinsichtlich der CO2-Emissionen verfolgen wollen. Zwar ist uns die Nachhaltigkeit sehr wichtig, gleichzeitig gibt es aber auch viele weitere Ziele zu verfolgen (z.B. Accessibility). Deshalb haben wir uns entschieden, vor allem Low-Hanging Fruits zu identifizieren. So konnten wir mit wenig Aufwand möglichst viel optimieren. 

Als Basis haben die Marketing-Kolleg*innen eine Liste relevanter URLs unserer Website, sortiert nach Anzahl der Seitenaufrufe, erstellt – sie umfasste insgesamt 367 URLs, die wir analysieren wollten. 

Mit dieser umfangreichen Liste waren wir nun bereit, uns auf die detaillierte Analyse unserer Website und die Identifizierung von Bereichen für Verbesserungen zu konzentrieren. 

Für einen ersten Test zur Einordnung der Website hinsichtlich der Nachhaltigkeit war “Website Carbon” hilfreich. Das Testen jeder einzelnen Seiten mit diesem Tool wäre jedoch eine mühsame Aufgabe gewesen, was uns dazu veranlasst hat, ein alternatives Tool zu suchen.

Tool auswählen und anwenden

Wir entschieden uns für sitespeed.io, welches ein Tool zur Messung, Überwachung und Verbesserung der Performance von Webseiten ist. Es liefert Einblicke in den Aufbau der Website und Möglichkeiten zur Verbesserung der Geschwindigkeit. Darüber hinaus bietet es verschiedene Plugins an, welche die Ergebnisse des Tools noch erweitern können. Das Sustainable Web Plugin ist eines davon und perfekt geeignet für unseren Usecase.

Die Installation von sitespeed und die Messung erfolgt über folgende Konsolenbefehl:

npm i -g sitespeed.io
⁠
sitespeed.io --sustainable.enable https://www.codecentric.de

Ergebnis analysieren

Die Messung der Webseiten unserer Liste ergab einen CO2-Wert von insgesamt 0,82g. Zum Vergleich: Nimmt man den Web Almanach von 2022 als Basis, hat eine Website im Durchschnitt einen CO2-Wert von 0,53g. 

Die Diskrepanz der Messungen zu der von “Website Carbon” (0.5g, s.o.) ist auf die unterschiedlichen Berechnungsalgorithmen (OneByte Model und Sustainable Web Design Model) der beiden Tools zurückzuführen. 

Bei der Ursachenforschung für unseren sowieso schon hohen CO2-Wert stellten wir schnell fest, dass die Videos in unseren Ergebnissen nicht berücksichtigt worden waren. Eine Analyse ergab, dass das Backend unserer Website einen HTTP-Statuscode 206 (Partial Content) sendete, der das Video schrittweise nachgeladen hat. Sitespeed interpretierte dies jedoch als abgeschlossene Antwort. Um die Messung entsprechend zu korrigieren, warteten wir 10 Sekunden nach Seitenaufruf, bevor wir die CO2-Messung starteten. (Anmerkung: Dieses Intervall kann bei Bedarf individuell angepasst werden.)

Dafür benutzten wir folgenden Befehl:

sitespeed.io --pageCompleteCheckStartWait 10000 --sustainable.enable urls.txt

Bei der zweiten Messung stieg der Wert der Startseite von ursprünglich 0,82g auf beachtliche 20,8g. Eine Reduktion der CO2-Emissionen war also dringend notwendig.

Die Messung aller Seiten ergab eine Gesamt-CO2-Emission von 387 g. Dabei lag der CO2-Fußabdruck der jeweiligen Seiten zwischen 578 mg und 20,8 g. Die großen Schwankungen sind auf die jeweiligen Inhalte der Seiten zurückzuführen.

Um mögliche Ansatzpunkte für Verbesserungen zu identifizieren, sahen wir uns die Seiten mit den höchsten CO2-Werten genauer an. Drei mögliche Ursachen für die hohen Werte konnten wir sehr schnell identifizieren:

• Videos
  Wir hatten es bereits geahnt, als wir unsere Messung anpassen mussten: die Videos auf der Startseite sind sehr mächtig und haben deshalb einen großen Anteil an dem hohen CO2-Fußabdruck. 
• Podcast-Bilder
  Bei Betrachtung der anderen Seiten mit hohen Werten fiel auf, dass sie alle Podcast-Folgen enthalten. Die Vorschaubilder dafür waren überraschend groß.
• Linkwolke-Bilder 
  Auch innerhalb eines weiteren Inhaltselementes, der “Linkwolke”, das auf verschiedenen Seiten verwendet wurde, wurden sehr große Bilder verwendet

Optimierungen

Nun hatten wir drei größere Baustellen identifiziert. Was also tun?

Wir standen bei der Behebung vor mehreren Herausforderungen: 

Um CO2-Emissionen zu reduzieren, könnte die Antwort sehr einfach sein: “Videos weg, durch Bilder ersetzen, und das in möglichst kleinen Dateien”. Aus Marketingsicht sieht die Welt aber natürlich ganz anders aus. Hier geht es um Userführung, Nutzererlebnis und emotionale Wirkung von Bild und Video.

Also war unsere Aufgabe im Team, einen Kompromiss zu finden, mit dem wir die Nachhaltigkeit verbessern und die User Experience erhalten konnten.

Video

Fakt war: Drei Videos auf der Startseite erzeugten ein überdimensionales Maß an CO2-Emissionen. 

Einfach alle Videos zu entfernen, um CO2 zu sparen, entsprach nicht dem Designkonzept unserer Website. Die Website sollte nach wie vor visuell überzeugen und Menschen zum Verweilen einladen. 

Nach einigen Diskussionen mit Marketing, Design und Entwicklern entschieden wir uns dazu, die Startseite soweit zu reduzieren, dass dort übergangsweise nur eins der Videos gezeigt wird. Außerdem wurde das Video kleiner gerendert.

Gleichzeitig bekam das Designteam die Aufgabe, perspektivisch an einem neuen oder zumindest veränderten, optimierten Design für die Startseite zu arbeiten und dabei direkt den Nachhaltigkeitsgedanken mitzudenken.

Wir haben durch diese Maßnahme die CO2-Emissionen der Videos von 19,9g auf 6,6g reduziert.

Podcast- und Linkwolke-Bilder

Innerhalb der Podcast-Folgen werden thematische Podcast-Bilder und Profilbilder der Speaker verwendet. Auch in der "Linkwolke" werden Bilder – zumeist von Standortevents – eingesetzt. 

Bei der Analyse der Gründe für die hohen Werte der Seiten, auf denen diese Beiträge eingebettet waren, fiel uns folgendes auf:

• Die Bilder wurden als JPEG- oder PNG-Dateien an die Nutzer ausgeliefert, statt modernen WebP- oder AVIF-Dateien. 
• Die Podcast Bilder waren mit einer Originalauflösung von 3000x3000 px und die Profilbilder mit 1200x1200 px viel zu groß, denn im Browser wurden sie nur in der Größe 400x400 px bzw. 54x54 px dargestellt. 
  (Die Bilder könnten also um Faktor 7.5 bzw. um Faktor 22x kleiner ausgeliefert werden 🤯) 
• Die Linkwolke-Bilder waren häufig in Originalgröße in Fotoqualität hochgeladen, viel zu viel für eine Website.

Es ergaben sich daraus drei Ansatzpunkte:

Automatische Bildkonvertierung

Die automatische Konvertierung der Bilder in *.webp-Dateien ermöglichte es, die Dateigröße ohne Qualitätsverlust zu reduzieren. Die Konvertierung in das noch komprimiertere Bildformat *.avif wird leider von Hygraph (noch) nicht unterstützt.

Bildoptimierung vor dem Hochladen

Die Optimierung der Bilder vor dem Hochladen nach Hygraph sorgt dafür, dass die Dateien im CMS nicht unnötig groß sind. Hierfür wurden alle relevanten Seiten identifiziert, die darin verwendeten Bilder optimiert und in der verkleinerten Version wieder hochgeladen, um den Status quo zu setzen.
Für die Zukunft gilt es nun, Bewusstsein zu schaffen und Arbeitsabläufe im Alltag zu etablieren, sodass darauf geachtet wird, die Bilder in die richtigen Dateiformate zu konvertieren und die Bildgröße an die erforderlichen Abmessungen anzupassen.

Automatische Bildgrößenanpassung

Bei der Analyse der Netzwerk-Requests stellten wir überrascht fest, dass Next.js – welches die Bilder im richtigen Format liefern sollte – bei der Kommunikation mit Hygraph nicht die richtige Bildgröße anfragte. Durch die Behebung des Kommunikationsproblems zwischen Next.js und Hygraph werden nun die Bilder nur noch in der passenden Größe für den jeweiligen Use Case an den Endnutzer ausgeliefert.

Vergleichsmessung zur Prüfung des Maßnahmen-Impacts

Die bisher beschriebenen Maßnahmen waren die idealen Ansätze zur Verfolgung unseres Ziels: Identifikation der Low-hanging Fruits. 

Nachdem wir die Bildgrößen optimiert und die erforderlichen Anpassungen in Hygraph und Next.js vorgenommen hatten, starten wir eine neue Messung; diese ergab eine CO2-Emission von 330g. 

Also wurden nach den durchgeführten Anpassungen beim einmaligen Aufrufen aller Webseiten 15% weniger Emissionen verursacht als noch im April bei unserer ersten Messung!

Es kam noch besser: Bei der Analyse der zehn meistbesuchten Seiten des letzten Jahres stellten wir fest, dass unsere Gesamt CO2-Emissionen hierin von 1057 kg auf 409 kg gesunken waren, eine Einsparung von über 60%! 

Wir konnten mehr als 60% CO2-Emissionen einsparen, ohne die Usability der Seite zu reduzieren. Was für ein Erfolg! 

Fazit

Durch die Messung und Analyse unseres CO2-Fußabdrucks konnten wir Bereiche unserer Website identifizieren, in denen wir uns verbessern können, und Maßnahmen ergreifen, um unsere Emissionen zu reduzieren. 

Doch die Reise endet hier nicht. Bisher haben wir nur die größten Baustellen behandelt. In der nächsten Zeit gilt es, auch die weiteren Seiten zu analysieren und Optimierungspotenzial aufzudecken. Es bleibt ein fortlaufender Prozess.

Durch unseren Erfolg konnten wir aufzeigen, dass die Nachhaltigkeit einer Website nicht nur eine Frage des Designs oder der Benutzerfreundlichkeit ist, sondern auch eine Frage der Umweltverantwortung.

Weniger Datenvolumen bedeutet nicht nur eine Reduktion des CO2-Ausstoßes, sondern auch eine optimierte Website-Performance. Dies ist besonders wichtig bei langsamen Internetverbindungen. Durch kleinere Dateien wird die Ladezeit verkürzt, was die Benutzererfahrung verbessert und den Energieverbrauch reduziert.

Wir hoffen, dass unsere Erfahrungen andere dazu inspirieren, ihre eigenen Websites zu prüfen und Maßnahmen zur Reduzierung ihres CO2-Fußabdrucks zu ergreifen. Zusammen können wir einen Unterschied machen und zu einer nachhaltigeren digitalen Zukunft beitragen.

Ein kleiner Werbeblock ;-)

Was wir auch gemerkt haben: 

Der Weg zu einer nachhaltigeren Website ist nicht so einfach, wie wir es uns wünschen. Es geht nur mit Unterstützung durch entsprechende Tools. Wir wollten ein einfaches Tool haben, mit dem wir schnell und einfach durch den gesamten Prozess kommen. So etwas haben wir “draußen” nicht gefunden. Aus diesem Grund haben wir begonnen, “WebSustainify - The Website Sustainability Assessment” zu bauen. Diese Plattform erlaubt eine schnelle Übersicht über die verschiedenen Aspekte der Nachhaltigkeit und zeigt mögliche Handlungsfelder. Probiert sie gern aus!