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.