Go Green: So verringert ihr den CO₂-Ausstoß eurer Website!

Passend dazu haben wir im Verband mit einer Reihe engagierter Menschen aus unserem Netzwerk den Arbeitskreis „Code & Klima Bremen – Forum für nachhaltige IT“ ins Leben gerufen, in dem wir zu digitaler Nachhaltigkeit aufklären und herausfinden möchten, wie und was die bremische Digitalwirtschaft zu einer ökologisch nachhaltigen Entwicklung beitragen kann.

Was bietet sich an dieser Stelle mehr an, als zunächst einmal bei sich selbst zu schauen? Eben. Und so haben wir uns aufgemacht und unsere neue Website unter die Lupe genommen, um einmal zu schauen, wie „grün“ wir als Verband mit unserem Webauftritt eigentlich sind. (Spoiler: so gar nicht grün.)

Begleitet uns {auf dem Weg} zur grüneren Website!

In diesem Praxisleitfaden nehmen wir euch mit auf unserem Weg zu einem klimafreundlicheren Webauftritt. Schritt für Schritt zeigen wir euch, welche Maßnahmen wir ergriffen haben, um unseren CO₂-Fußabdruck zu senken – ohne dass wir dabei die Grundstruktur, die Optik und das Design unserer Seite verändert haben.

Wir teilen hilfreiche Links, stellen smarte Tools vor und geben euch konkrete Tipps an die Hand. Dabei lassen wir euch an unseren Überlegungen und Entscheidungen teilhaben – offen, ehrlich und mit einem Blick auf das, was (für uns) funktioniert hat und was nicht.

KAPITEL 1

{Wie} anfangen?

Woher weiß ich überhaupt, ob meine Seite „grün“ ist oder nicht? Dafür gibt es eine ganze Reihe von Anbietern, die einen unkomplizierten und kostenlosen Check der eigenen Webseite anbieten. Hier einige Beispiele:

Wir sind ganz gespannt. Wie sieht der CO₂-Fußabdruck unserer Website unmittelbar nach dem Livegang aus? Das Ergebnis ist einigermaßen niederschmetternd und liegt bei 7,77 g CO₂ pro Aufruf – das entspricht in etwa

• einer Smartphone-Ladung,
• einer bedruckten Schwarz-Weiß-Seite Papier
• oder dem Versand von zwei einfachen Mails ohne Anhang.

Immerhin unser Hosting und unser Server bekommen die Note „grün und klimabewusst“. Klar ist aber auch: Wir möchten unseren CO₂-Fußabdruck deutlich verringern.

Zum Glück gibt es eine Reihe effektiver Maßnahmen, die wir schnell umsetzen können. Mit welcher Maßnahme wir begonnen haben und welchen Effekt sie hatte, davon berichten wir euch in KAPITEL 2.

KAPITEL 2

Bilder für eine {ressourcenschonende Website} optimieren

Einen großen Hebel auf unserer Website bieten die Bildgrößen- und -formate. Dafür haben wir das Plugin ShortPixel Image Optimizer (shortpixel.com) installiert und über die Seite laufen lassen. Das Plugin kann sowohl im Abo also auch als einmaliger Kauf in verschiedenen Paketgrößen bezogen werden. Wir haben für einmalig 45 € 100.000 Credits gekauft, können also 100.000 Bilder konvertieren. Mit dieser Menge an Credits werden wir in jedem Fall für einige Jahre hinkommen, wichtig zu wissen: die Credits verfallen nicht. Jede Mediendatei, die wir hochladen kann auf diesem Weg unmittelbar hinsichtlich der Größe optimiert werden. Zudem gibt das Plugin Vorschläge für weitere Optimierungsmöglichkeiten.

Natürlich gibt es neben ShortPixel eine ganze Reihe weiterer Alternativen.

Nachhaltigkeitskriterien für {Bildoptimierungs-}Plugins

Nimmt man bei der Auswahl eines Bildoptimierungs-Plugins ökologische Nachhaltigkeit in den Blick, spielen mehrere Faktoren eine zentrale Rolle. Besonders wichtig ist, ob die Bildverarbeitung lokal auf dem eigenen Server erfolgt oder in einer Cloud. Eine lokale Verarbeitung vermeidet unnötige Datenübertragungen zu externen Rechenzentren und spart damit Energie und CO₂-Emissionen. Darüber hinaus ist die Unterstützung moderner Bildformate wie WebP oder AVIF entscheidend. Diese Formate ermöglichen eine deutlich kleinere Dateigröße bei gleichbleibender Bildqualität, wodurch sowohl der Stromverbrauch auf Servern als auch die Ladezeiten auf Endgeräten reduziert werden.

Ein weiterer wichtiger Aspekt ist der Einsatz des so genannten Lazy Loading (siehe auch Kapitel 3) und responsiven Bildern. Dadurch werden Bilder nur dann geladen, wenn sie tatsächlich im Sichtbereich des Nutzenden erscheinen, und das in einer Größe, die dem jeweiligen Endgerät angepasst ist. Diese Funktion spart Datenvolumen und Energie. Auch der Standort des Rechenzentrums, in dem die Verarbeitung oder Auslieferung erfolgt, spielt eine Rolle: Server in der EU oder speziell in Deutschland haben in der Regel einen klimafreundlicheren Strommix als Rechenzentren in den USA oder Asien. Schließlich lohnt es sich darauf zu achten, dass nicht unnötig viele Bildvarianten oder Duplikate erzeugt werden. Viele Plugins legen automatisch mehrere Versionen eines Bildes an, was den Speicherbedarf erhöht und langfristig ebenfalls den Energieverbrauch in die Höhe treibt.

Eine nachhaltige Bildoptimierung kombiniert also

• eine Vermeidung unnötiger Datenübertragung (Cloud vs. lokal),
• Unterstützung moderner, effizienter Formate (z. B. AVIF, WebP),
• den Hosting-Standort (z. B. Strommix des Rechenzentrums, DSGVO-Konformität) und
• eine Minimierung der Ressourcenlast auf Server & Endgeräte.

Unter diesen Aspekten sind folgende drei Plugins empfehlenswert:

• EWWW Image Optimizer (lokale Verarbeitung)
• ShortPixel (mit WebP/AVIF + starker Komprimierung)
• Optimole (vollautomatisch + modernes CDN mit AVIF)

Wir ziehen {Bilanz}

Und was hat die Installation von Short Pixel nun für eine Auswirkung auf den CO₂-Ausstoß unserer Website? Wir leeren den Cache, halten den Atem an und warten gespannt: 6,63 g CO₂ pro Aufruf – das entspricht in etwa

• für 1 bis 2 Minuten durch Instagram scrollen,
• 1,5 Minuten Ausatmen (ein Mensch atmet bei Ruhe etwa 4 g CO₂ pro Minute aus)
• 1/5 Tasse Kaffee kochen.

Natürlich war die Bildoptimierung erst der Anfang. Auch durch die Bildformate lassen sich beispielsweise jede Menge CO₂ sparen. Mit welcher Optimierung wir weiter gemacht haben, davon berichten wir euch in KAPITEL 3.

KAPITEL 3

Verzögertes Laden von Seiteninhalten mit {Lazy Loading}

Durch unsere ersten getroffenen Maßnahmen haben wir den CO₂-Ausstoß unserer Website zwar bereits verringert, jedoch noch nicht merklich – damit geben wir uns noch nicht zufrieden.

Als nächstes widmen wir uns dem Thema Lazy Loading (verzögertes Laden oder bedarfsgerechtes Laden). Dabei handelt es sich um eine Technik, bei der Daten oder Inhalte nicht sofort, sondern erst dann geladen werden, wenn sie tatsächlich benötigt werden. Stellt euch zum Beispiel eine Webseite mit 100 Bildern vor.

Ohne {Lazy} Loading

Beim Öffnen der Seite lädt der Browser den HTML-Code. Anschließend werden alle 100 Bilder heruntergeladen, auch diejenigen, die ganz unten auf der Seite liegen und noch gar nicht sichtbar sind.

Das führt zu

• längere Ladezeit,
• mehr Datenverbrauch,
• und unnötiger Arbeit für den Browser.

Fazit: Ja oder Nein zum {verzögerten} Laden?

Lazy Loading bedeutet, dass nicht alles sofort geladen wird, sondern nur das, was gerade benötigt wird. Sobald User*innen oder ein Programm auf weitere Daten zugreifen, werden diese dynamisch nachgeladen. Dadurch werden Ladezeit, Speicherverbrauch und Datenverkehr reduziert – auf Kosten einer möglichen kleinen Verzögerung beim ersten Zugriff auf die nachgeladenen Inhalte.

Im klassischen Backend ist Lazy Loading in der Regel eine integrierte Funktion des eingesetzten ORMs (Object-Relational Mappers) oder Frameworks und kein separates Plugin. Die am häufigsten verwendeten Lösungen sind:

• Hibernate (Java)
• Entity Framework Core (.NET)
• Doctrine ORM (PHP)
• SQLAlchemy (Python)
• TypeORM und MikroORM (Node.js)

Falls ihr Lazy Loading stattdessen in ein bestimmtes System wie WordPress, TYPO3, Shopware, Spring Boot oder ASP.NET Core integrieren wollt, ist es zunächst wichtig zu unterscheiden, wo Lazy Loading stattfindet.

• Frontend: Bilder, Videos, CSS oder JavaScript werden erst geladen, wenn sie benötigt werden.
• Backend: Datenbankobjekte oder Komponenten werden erst geladen, wenn der Code darauf zugreift.

Hier findet ihr eine kurze Übersicht der gängigsten Lösungen, in den meistgenutzten Systemen:

Und was hat es {gebracht?}

Das Ergebnis nach erfolgreicher Einrichtung von Lazy Loading auf unserer Website: 3,94 g Damit sind wir laut websitecarbon.com zwar immer noch im tiefroten Bereich, haben unseren CO₂-Ausstoß aber bereits um beinahe 50 % reduziert.

Mit 3,94 g CO₂ könnt ihr:

• Eine LED-Lampe etwas 1 bis 3 Stunden betreiben
• Eine Stunde Netflix streamen (je nach Gerät, Auflösung und Netz)
• Wasser für eine Tasse Tee erhitzen

KAPITEL 4

Letzte Optimierungen und {Tipps} für den Alltag

In einem letzten Schritt haben wir uns unsere Bewegtbildelemente im Autoplay-Modus angeschaut. Das sind auf unserer Website folgende Elemente:

• Moodbereich auf der Startseite
• Mitglied werden (wabernde Struktur)
• Newsletter (wabernde Struktur)
• Team-Videos
• Videos in der Galerie

Eine {Entscheidung} muss gefällt werden

Auf der einen Seite steht unser Wunsch, CO₂ einzusparen. Auf der anderen Seite müssen wir uns fragen: „Welche Auswirkung hat zum Beispiel das Abschalten der Autoplay Funktion auf das Nutzungserlebnis?“ Denn Autoplay wird oft bewusst eingesetzt, um Aufmerksamkeit zu erzeugen oder eine Marke emotional zu präsentieren.

Die tatsächliche Einsparung hängt zudem stark von der Größe der Videos ab. Sind es kurze, komprimierte Hintergrundvideos, ist der Effekt eher gering. Sind es mehrere hochauflösende Videos, kann die Einsparung deutlicher ausfallen.

Was jedoch auch eine Rolle spielt: Der CO₂-Wert allein ist ohne Einordnung nicht aussagekräftig. Er muss vielmehr in Abhängigkeit zur Seitengröße, Anzahl der Requests, Medieninhalte und Hosting gesetzt werden. So würde es zum Beispiel einen deutlich größeren Effekt bringen, wenn ein Webshop wie Zalando 1 g CO₂ pro Seitenaufruf einspart, als wenn wir 1 g CO₂ mit unserer Vereinswebsite einsparen.

Wir entscheiden uns letztendlich, die Videos im Autoplay-Modus auf der Seite zu belassen. Folgendes haben wir jedoch angepasst: Wir binden ab sofort statt eines Videos nur einen Platzhalter mit allen Infos zum Video im Quelltext ein. Nachdem die Seite geladen wurde, wird per Javascript dieser Platzhalter durch das echte Video ersetzt.

Warum ist die {Maßnahme} technisch sinnvoll?

Wir haben das Video nicht verkleinert, sondern den Ladezeitpunkt optimiert.

• Beim initialen Seitenaufbau wird nur ein leichter Platzhalter im HTML ausgeliefert.
• Die Seite kann schneller gerendert werden.
• Erst nach dem Laden ersetzt JavaScript den Platzhalter durch das eigentliche Video.
• Das reduziert den initialen Datenverkehr und verbessert häufig die wahrgenommene Ladegeschwindigkeit.

Und noch einmal lassen wir den Energieverbrauch unsere Website checken: 2,55 g CO₂ pro Seitenaufruf der Startseite.

Mit 2,55 g CO₂ könnt ihr

• 15 bis 20 Meter Auto fahren
• Ein Smartphone laden (je nach Modell und Strommix)
• Einen Laptop ca. 10 bis 20 Minuten nutzen (je nach Modell und Strommix)

Mit allen Maßnahmen zusammengenommen, konnten wir den CO₂-Fußabdruck der Startseite von 7,77 g auf 2,55 g pro Seitenaufruf reduzieren. Das entspricht einer Einsparung von rund 67 % und das bei gleichbleibender Nutzungserfahrung und Erhalt der visuellen Markenwirkung.

Unser {Learning}

Mit dem Livegang der Website im Januar 2025 hatten wir uns im Vorfeld kaum Gedanken über unseren CO₂-Fußabdruck gemacht. Das wollten wir im Nachgang gerne ändern, uns fehlten aber sowohl Erfahrung als auch die Zeit und das Budget, um das Thema „im großen Stil“ anzugehen. Gemeinsam mit den Expert*innen unseres Arbeitskreises „Code & Klima Bremen“ erhielten wir hilfreiche Hinweise und Ansatzpunkte, die wir anschließend Schritt für Schritt umgesetzt haben. So konnten wir ganz allmählich mit recht kleinen und vom Aufwand her überschaubaren Maßnahmen unseren CO₂-Ausstoß um zwei Drittel reduzieren. Ein Ergebnis, mit dem wir wirklich zufrieden sind.

Weitere {Tipps}