Nachhaltiges Webdesign: leichte Seiten, weniger CO₂

Jede Seite, die ihr aufruft, verbraucht Strom: im Rechenzentrum, im Netz und auf eurem Gerät. Einzeln wiegt das wenig. Auf Millionen Aufrufe gerechnet nicht mehr. Dieser Beitrag erklärt, wo ihr ansetzen könnt, und was davon wirklich wirkt.

Wie viel CO₂ eine Website verursacht

Die Zahlen sind weniger genau, als viele Rechner suggerieren. Drei Anhaltspunkte, die sich belegen lassen:

• Rechenzentren: Nach Schätzungen der Internationalen Energieagentur (IEA) brauchten sie 2025 weltweit rund 485 Terawattstunden, etwa 1,5 Prozent des weltweiten Stroms. Der Bedarf wächst vor allem durch KI-Rechenzentren schneller als der gesamte Strombedarf. Für Deutschland nennt das Öko-Institut einen Anteil von etwa 5 Prozent, Schätzungen je nach Quelle bewegen sich zwischen 3 und 5 Prozent.
• Seitengewicht: Der Web Almanac 2025 nennt für Startseiten im Median rund 2,6 Megabyte auf dem Handy und 2,9 Megabyte am Desktop. Gut ein Drittel davon sind Bilder, hinzu kommen im Median rund 630 Kilobyte JavaScript.
• Pro Aufruf: Der Website Carbon Calculator nennt mit dem Rechenmodell „Sustainable Web Design“ (Version 4) für eine durchschnittliche Seite rund 0,36 Gramm CO₂ je Aufruf. Eine ältere Version desselben Rechners kam 2019 noch auf 4,61 Gramm. Die Spannen unterscheiden sich je nach Modell, Stromquelle und Annahmen stark. Verlasst euch deshalb nicht auf eine einzelne Zahl, sondern vergleicht eure Seite vorher und nachher mit demselben Werkzeug.

Was ihr beeinflussen könnt

Vier Stellen verbrauchen Energie: das Rechenzentrum, das Netz, das Endgerät und die Nutzung. Auf Netz und Gerät habt ihr wenig Einfluss. Auf zwei Dinge schon: die Datenmenge, die eure Seite überträgt, und das Hosting. Beides ist messbar.

Sechs Maßnahmen

1. Bilder verkleinern. Bilder sind der größte Posten. Nutzt moderne Formate (AVIF oder WebP), liefert mehrere Größen aus und ladet Bilder außerhalb des Bildschirms erst beim Scrollen. Kein Bild sollte größer sein als die Fläche, die es füllt.

2. Schriften begrenzen. Zwei Schriftschnitte genügen meist. Lasst sie von eurem eigenen Server laden, im Format WOFF2. Das spart Anfragen und ist zugleich datenschutzfreundlich.

3. Skripte und Tracking prüfen. Jedes Skript lädt Daten nach und beschäftigt den Prozessor. Fragt bei jedem: Wer nutzt das wirklich? Chat-Widgets, Heatmaps und mehrere Tracking-Dienste addieren sich schnell.

4. Video sparsam einsetzen. Ein automatisch startendes Hintergrundvideo kann mehr Daten übertragen als die gesamte restliche Seite. Ein Standbild mit Abspielknopf lädt das Video erst, wenn jemand es will.

5. Einfache Navigation. Wer schneller findet, was er sucht, ruft weniger Seiten auf. Eine klare Struktur ist die günstigste Form von Effizienz.

6. Caching und Komprimierung. Der Server sollte Textdateien komprimieren (Brotli oder gzip) und Dateien so ausliefern, dass Browser sie wiederverwenden. Das ist eine Grundeinstellung und trotzdem oft vergessen.

Grünes Hosting

Grünes Hosting heißt: Das Rechenzentrum nutzt Strom aus erneuerbaren Quellen. Achtet auf drei Dinge:

• Nachweis statt Versprechen. Das Verzeichnis der Green Web Foundation prüft Domains und Anbieter.
• Standort. Größere Rechenzentren in Deutschland (ab 300 Kilowatt Anschlussleistung) unterliegen dem Energieeffizienzgesetz. Es verlangt, dass sie ihren Strom bilanziell vollständig aus erneuerbaren Quellen decken. Die Frist dafür ist bisher der 1. Januar 2027, ein Gesetzentwurf der Bundesregierung will sie auf 2030 verschieben (Stand November 2026).
• Unser Hosting. Der Server bei IONOS, auf dem unsere Website läuft, nutzt grünen Strom.
• Effizienz vor Ökostrom. Strom aus erneuerbaren Quellen ist ein Anfang. Weniger Daten zu übertragen spart zusätzlich in jedem Fall.

Unser Beispiel: die neue NINJAPIRATEN-Seite

Unsere Startseite ist statisch gebaut (Astro). Die Messung im Prototyp am 22.10.2026 ergab in Lighthouse 99 Punkte bei der Leistung auf dem Handy und 100 am Desktop. Beim Laden auf dem Handy werden rund 180 Kilobyte übertragen, mit komprimierter Auslieferung. Zum Vergleich: Der Median liegt laut Web Almanac bei 2,6 Megabyte.

Dazu tragen die statische Bauart, eigene Schriften im WOFF2-Format und die komprimierte Auslieferung bei. Dieselbe Messung im Prototyp zeigte auch, was damals noch zu tun war: Das Linien-Skript steckte mit 160 Kilobyte im HTML, die Kundenlogos waren der größte Teil des restlichen Markups, und die Fotos lagen nur als große JPEGs vor.

Seitdem haben wir nachgebessert, Stand 3. November 2026: Beim Laden braucht die Seite höchstens rund 7 Kilobyte JavaScript. Das Linien-Skript, komprimiert rund 41 Kilobyte, lädt erst, wenn die Seite schon zu sehen ist. Die Fotos liegen als AVIF und WebP vor. In Lighthouse erreicht sie bei der Leistung am Desktop 100 Punkte, auf dem Handy 98 bis 100 (eigene Messung, lokal). Nachhaltig ist eine Seite nie fertig, sie wird gemessen und nachgebessert.

Womit ihr anfangt

Wenn ihr nicht alles auf einmal ändern wollt, ist die Reihenfolge nach Wirkung sinnvoll:

1. Bilder verkleinern und in mehreren Größen ausliefern. Sie sind meist der größte Posten.
2. Skripte und Tracking prüfen und alles streichen, was niemand auswertet.
3. Auslieferung: Komprimierung und Caching am Server einschalten.
4. Hosting auf einen Anbieter mit nachgewiesenem Ökostrom umstellen, wenn ihr ohnehin wechselt.
5. Schriften auf wenige Schnitte begrenzen und selbst ausliefern.
6. Video nur dort, wo es etwas zeigt, das Text nicht kann.

Bei großen Shops mit vielen Produktbildern lohnt sich Schritt 1 besonders: Jedes Bild, das nur ein paar Kilobyte kleiner wird, wiederholt sich tausendfach im Katalog.

Bilder im Detail

Bilder sind meist die größte Datei auf einer Seite, hier lohnt sich Sorgfalt. Bei uns gelten feste Regeln: höchstens 2.400 Pixel Kantenlänge, JPEG-Qualität um 80 und nie mehr als 1,5 Megabyte pro Datei. Originale bleiben außerhalb der Seite. Dazu gehört:

• Mehrere Größen anbieten. Der Browser wählt die passende: kleines Bild fürs Handy, großes für den Desktop. Ein Foto in voller Größe für einen Platz von 400 Pixeln Breite ist verschwendet.
• Formate wählen. AVIF und WebP sind bei gleicher Qualität deutlich kleiner als JPEG. Prüft, ob euer System sie ausliefern kann.
• Nur laden, was sichtbar wird. Bilder unterhalb des ersten Bildschirms laden erst beim Scrollen.
• Dekoration als Code. Linien, Verläufe und Formen lassen sich oft als SVG oder CSS zeichnen, was kaum Daten kostet.

Fremde Einbindungen vermeiden

Jede eingebettete Fremdquelle, etwa YouTube, Karten oder Schriften von einem Dienst, lädt Daten und Skripte nach, auf die ihr keinen Einfluss habt. Wir laden unsere Schriften deshalb von der eigenen Seite und nutzen statt eingebetteter Videos oder Karten ein statisches Platzhalterbild mit Link. Das spart Daten und ist besser für den Datenschutz, weil bis zum Klick nichts an Dritte geht.

So messt ihr in drei Schritten

1. Datenmenge: Die Entwicklerwerkzeuge des Browsers (Reiter „Netzwerk“) zeigen, wie viele Kilobyte eine Seite beim Laden überträgt und welche Dateien am meisten wiegen.
2. Leistung: Lighthouse bewertet Ladezeit, Barrierefreiheit und Technik. Es steckt in Chrome und lässt sich kostenlos nutzen.
3. CO₂-Schätzung: Der Website Carbon Calculator rechnet die übertragene Datenmenge in eine Schätzung um. Behandelt das Ergebnis als Richtung, nicht als Messwert.

Messt eine Startseite, eine Unterseite mit vielen Bildern und eine Beitragsseite. Notiert Datum und Werkzeug. Nach Änderungen messt ihr erneut.

Was oft überschätzt wird

• Dunkler Modus. Er spart Strom nur auf Bildschirmen mit OLED-Technik und nur bei großen dunklen Flächen. Er ist ein Komfortmerkmal, kein Klimaschutz.
• Siegel ohne Prüfung. „Klimaneutral“ sagt nichts, solange nicht steht, wie gemessen und wie ausgeglichen wurde.
• Eine einzelne Zahl. Ein Wert wie „0,2 Gramm pro Aufruf“ klingt genau und hängt von Annahmen ab, die selten dabeistehen.
• Der eigene Anteil. Die gesamten Rechenzentren machen nach IEA-Schätzung etwa 1,5 Prozent des weltweiten Stroms aus. Eure Seite ist ein sehr kleiner Teil davon. Der Gewinn liegt in der Summe vieler leichter Seiten und in schnelleren, besser bedienbaren Angeboten.

Nachhaltigkeit im Relaunch mitplanen

Am günstigsten ist nachhaltiges Webdesign, wenn es von Anfang an im Briefing steht. Legt vor dem Relaunch ein Gewichtsbudget fest, etwa „Startseite höchstens 500 Kilobyte beim ersten Laden“, und prüft jeden Entwurf dagegen. So wird aus einem guten Vorsatz eine Vorgabe, die Design und Entwicklung gemeinsam einhalten. Nachträglich abspecken kostet mehr, weil Bilder, Skripte und Aufbau dann schon festliegen.

Ehrlich bleiben

Nachhaltigkeit auf der Website ist kein Ersatz für Nachhaltigkeit im Unternehmen. Drei Regeln gegen Greenwashing:

1. Nennt Messwerte mit Datum und Werkzeug, nicht „klimaneutral“ ohne Beleg.
2. Vergleicht Vorher und Nachher. Der Wert einer einzelnen Messung sagt wenig.
3. Erklärt, was ihr nicht beeinflussen könnt, zum Beispiel die Geräte der Besucher:innen.

Zum Messen taugen Lighthouse (Datenmenge, Leistung) und der Website Carbon Calculator (Schätzung der CO₂-Menge). Beide zeigen Richtungen, keine exakten Werte.

Wie wir Seiten leicht bauen, beschreiben wir auf Websites & Relaunch.