← Blog
Webdesign5. März 2026

Nachhaltiges Webdesign: so wird deine Website klimafreundlich

Nachhaltiges Webdesign ist Datensparsamkeit. Wie du das Gewicht deiner Seite selbst misst, welche vier Hebel ziehen und was beim Neubau zählt.

Nachhaltiges Webdesign ist im Kern eine einzige Entscheidung: möglichst wenig Daten über die Leitung schicken. Alles andere folgt daraus. Leichte Bilder, schlanker Code, zwei Schriftschnitte statt sieben, Hosting mit Ökostrom. Klimafreundlich wird eine Website vor allem, indem sie leichter wird. Den Rest entscheidet der Strom im Rechenzentrum.

Der Nebeneffekt ist der eigentliche Verkaufsgrund, und ich sage das bewusst so herum: Genau diese sparsamen Seiten laden am schnellsten. Wer aus Klimagründen aufräumt, bekommt die bessere Website gratis dazu. Der erste Handgriff ist immer derselbe, und er dauert zwei Minuten.

Miss zuerst, wie schwer deine Seite ist

Du brauchst dafür keinen Dienst. Im Browser reicht der Netzwerk-Tab der Entwicklerwerkzeuge: Seite mit leerem Zwischenspeicher laden, unten steht die übertragene Datenmenge. Diese Zahl ist die einzige, auf die es ankommt. Umgerechnet wird sie so (1 Gigabyte = 1000 Megabyte, so rechnen auch die Entwicklerwerkzeuge):

TEXT
Gramm CO₂e je Aufruf = übertragene Megabyte / 1000 × 0,30 kWh je GB × 494 g je kWh
                     ≈ übertragene Megabyte × 0,15   (grob gerundet)

Eine Seite mit 1,2 Megabyte landet damit bei rund 0,18 Gramm pro Aufruf. Zwei Dinge macht die Rechnung sichtbar, die ein Prüfsiegel verdeckt: In dieser Kurzform hängt die Zahl allein an der Datenmenge. Und sie gilt für den ersten Besuch, denn wer wiederkommt, lädt vieles aus dem Zwischenspeicher.

Drei eigene Seiten, nachgemessen

Im September 2026 habe ich drei meiner eigenen Seiten gemessen: Chrome, Handy-Ansicht, leerer Zwischenspeicher, einmal bis nach unten gescrollt, gezählt wurden die tatsächlich übertragenen Bytes. Gemessen habe ich die Megabyte, die Gramm rechnet das Modell daraus.

Kundenseite (Beispielseite einer Fahrschule)

26 Anfragen, 0,66 MB, rund 0,10 g. Statisch ausgeliefert.

Dieser Blogbeitrag

73 Anfragen, 1,26 MB, rund 0,19 g. Größte Position: 0,8 MB JavaScript, nicht die Bilder.

Meine Startseite

77 Anfragen, 2,19 MB, rund 0,32 g. Davon 0,94 MB Bilder.

Das Unangenehme spare ich mir nicht: Meine Startseite wiegt das Dreifache dessen, was ich Kunden ausliefere. Der Unterschied ist nicht Gesinnung, sondern Technik. Die Kundenseiten sind statische Dateien, meine Startseite ist eine Anwendung mit Dashboard, Vorschauen und Bewegtbild.

Womit gerechnet wird, und was die Zahl wert ist

Die Konstanten oben stammen aus Version 4 des Sustainable Web Design Model: 0,30 kWh je übertragenem Gigabyte, verteilt auf Rechenzentrum, Netz, Endgerät und Herstellung, dazu ein weltweiter Strommix von 494 g CO₂e pro Kilowattstunde.

Zur Einordnung der eigenen Zahl: Der Web Almanac des HTTP Archive misst für Juli 2025 eine mobile Startseite im Median bei 2.559 KB, also knapp 0,4 g nach derselben Formel. Gegenüber Juli 2015 weist der Almanac für mobile Startseiten ein Plus von 202,8 Prozent aus, das Gewicht hat sich also verdreifacht. Gewachsen ist dabei selten der Inhalt.

Das ist ein Modell, keine Messung. Niemand hängt ein Strommessgerät an deinen Seitenaufruf. Als Vorher-nachher-Vergleich derselben Seite taugen Website Carbon und Ecograder gut, als absolute Wahrheit über deinen Fußabdruck nicht. Die Rechner haben ihr Modell zwischenzeitlich aktualisiert, ein alter und ein heutiger Wert sind deshalb nicht ohne Weiteres dieselbe Größe.

Die vier Hebel, in der Reihenfolge, in der ich sie anfasse

1. Bilder

Auf bildlastigen Seiten der größte Brocken, und fast immer der am leichtesten zu hebende: auf meiner Startseite 0,94 von 2,19 MB. Moderne Formate wie WebP oder AVIF, dazu passende Größen für kleine Bildschirme und Lazy-Loading für alles unterhalb des ersten Bildschirms. Ein Foto, das in 600 Pixel Breite angezeigt wird, muss nicht in 3000 Pixel geladen werden.

2. Schriften

Zwei Schnitte reichen für fast jede Website. Und sie gehören auf den eigenen Server statt von einem fremden geladen: Das spart eine Verbindung, beschleunigt die Anzeige und erledigt nebenbei ein Datenschutzthema. Wie das geht, steht im Beitrag über das Selbst-Hosten von Google Fonts.

3. Skripte

Jedes Tracking-Skript und jedes Plugin kostet Daten und Zeit. Auf textlastigen Seiten sind sie der größte Posten, siehe der Beitrag, den du gerade liest: 0,8 MB Skript für eine Seite aus Text. Alles auflisten und für jeden Eintrag begründen, was er einbringt. Was sich nicht begründen lässt, fliegt raus.

4. Klimafreundliches Hosting

Server laufen rund um die Uhr, unabhängig davon, ob jemand deine Seite besucht. Diesen Sockel verschiebt kein Bildformat, sondern nur der Anbieter. Deshalb steht er hier hinten: Du entscheidest ihn einmal und nicht jede Woche neu. In der Kurzformel oben taucht er gar nicht auf, denn die rechnet mit dem weltweiten Strommix. Das vollständige Modell zieht für grün betriebenen Betrieb den operativen Rechenzentrums-Anteil ab, rund ein Fünftel der Energie. Wer nach dem Hoster-Wechsel nachmisst, sieht die Datenmenge unverändert und trotzdem einen kleineren Fußabdruck.

In Deutschland gibt das Gesetz eine Messlatte vor. Das Energieeffizienzgesetz schreibt Rechenzentren ab 300 Kilowatt Anschlussleistung seit dem 1. Januar 2024 mindestens 50 Prozent Strom aus erneuerbaren Quellen vor, ab 1. Januar 2027 rechnerisch 100 Prozent. Dazu kommen Grenzwerte für den PUE-Wert, der sagt, wie viel Strom das Gebäude zusätzlich zur reinen Rechenleistung zieht, vor allem für Kühlung: 1,5 heißt, die Hälfte obendrauf. Stand September 2026: Für Neubauten gilt seit dem 1. Juli 2026 ein Wert von höchstens 1,2, für Bestandsanlagen ab Juli 2027 höchstens 1,5. Die Bundesregierung hat am 24. Juni 2026 eine Novelle beschlossen, die diese Werte lockern und die Schwelle auf 500 Kilowatt heben soll; sie ist noch im Verfahren.

Praktisch heißt das: Frag deinen Hoster nach Standort, Strommix und PUE-Wert. Wer alle drei beantworten kann, hat sich damit beschäftigt. Ein grünes Blatt auf der Preisseite ist noch keine Antwort. Ob deine Domain bei einem als grün geführten Anbieter liegt, zeigt der kostenlose Green Web Check der Green Web Foundation. Dahinter steht ein Verzeichnis, das auch Website Carbon für seine Einstufung nutzt.

Nachhaltige Website erstellen: die Reihenfolge

Wenn du eine bestehende Seite aufräumst, lohnt genau diese Abfolge:

  1. Ausgangswert messen und notieren.
  2. Bilder: Format und Größe.
  3. Schriften: zwei Schnitte, selbst gehostet.
  4. Skripte: inventarisieren und aussortieren.
  5. Hosting: Ökostrom, wenn ohnehin ein Wechsel ansteht.
  6. Nachmessen, beide Werte nebeneinander schreiben.

Wenn du dabei merkst, dass die Ladezeit dein eigentliches Thema ist: Der Beitrag über die Ladezeit ohne Entwickler geht dieselben Hebel aus der Geschwindigkeits-Perspektive durch, mit Werkzeugen zum Nachmachen.

Beim Neubau fallen die Entscheidungen früher

Bei einer neuen Seite entscheidet sich das Gewicht in den ersten Tagen, lange bevor jemand ein Bild komprimiert. Vier Entscheidungen tragen den größten Teil:

Statisch ausliefern, wo es geht.

Wenn der Inhalt nicht pro Besucher anders aussieht, muss beim Aufruf nichts gerechnet werden.

Kein Video im ersten Bildschirm.

Ein Hintergrundvideo ist der schnellste Weg von einem halben Megabyte auf mehrere. Ein gutes Standbild sagt fast immer dasselbe.

Seitenzahl begrenzen.

Jede Unterseite will gepflegt werden und bringt eigene Bilder mit. Fünf gute Seiten schlagen fünfzehn halbe, auch ökologisch.

Karten und externe Einbettungen erst auf Klick.

Eine eingebettete Karte lädt fremden Code, oft mehrere hundert Kilobyte, für einen Zweck, den eine Adresse und ein Link genauso erfüllen.

Das ist der Teil, den kein späterer Optimierungslauf mehr einholt. Wer im Entwurf ein Video-Karussell beschließt, kann danach Bilder komprimieren, so lange er will.

Was nachhaltiges Webdesign nicht ist

Ein CO₂-Badge im Footer einer vier Megabyte schweren Seite ist Dekoration. Ein gepflanzter Baum pro Bestellung ändert nichts an der Datenmenge, die deine Startseite bei jedem Aufruf überträgt. Beides mag gut gemeint sein, gehört aber in die Kategorie Kommunikation, nicht in die Kategorie Technik.

Der wirksamste Teil ist meistens redaktionell, nicht technisch: weniger Bilder, weniger Karussells, kürzere Seiten. Kein Bildkomprimierer der Welt rettet eine Seite, die aus vierzehn Sektionen besteht, von denen elf niemand liest.

Wie ich das umsetze

Bei meinen Projekten heißt nachhaltig vor allem: weglassen. Die Kundenseiten sind statisch gebaut, die Schriften liegen auf dem eigenen Server, getrackt wird ohne Cookies. Das ist keine Öko-Deko, sondern sparsames Webdesign für kleine Betriebe. Weniger Skripte, schnellere Seite. Die 0,66 Megabyte der Beispielseite oben sind das Ergebnis, nicht das Versprechen.

Nachhaltigkeit hört dabei nicht beim Web auf. Fürs Gedruckte gilt dasselbe Prinzip, nachzulesen im Beitrag über nachhaltige Druckprodukte.

Häufige Fragen

Was ist nachhaltiges Webdesign?

Eine Bauweise, die möglichst wenig Daten überträgt: leichte Bilder, wenige Skripte, sparsame Schriften und Hosting mit Ökostrom. Weniger Daten heißt weniger Energie über Rechenzentrum, Netz und Endgerät, und nebenbei eine schnellere Seite.

Wie messe ich den CO₂-Fußabdruck meiner Website?

Übertragene Datenmenge im Netzwerk-Tab des Browsers ablesen, mit leerem Zwischenspeicher, und mal 0,15 rechnen. Das Ergebnis sind die Gramm CO₂e pro Aufruf nach dem Sustainable Web Design Model. Dienste wie Website Carbon rechnen dasselbe, nur bequemer.

Wie viel wiegt eine sparsame Website?

Zur Einordnung: Eine mobile Startseite lag im Juli 2025 im Median bei 2.559 KB. Unter 1 Megabyte ist für eine Betriebs-Website gut erreichbar: Eine der Seiten, die ich ausliefere, liegt mit Fotos bei 0,66 MB.

Bringt klimafreundliches Webdesign auch SEO-Vorteile?

Indirekt ja. Weniger Datenmenge heißt kürzere Ladezeit, und Ladezeit ist ein Ranking-Signal. Einen eigenen Nachhaltigkeits-Bonus vergibt Google nicht.

Pappelbaum Design

Deine Website, persönlich gebaut.

Onepager, Firmenseite oder Relaunch: Ich baue sie, du pflegst die Inhalte selbst im Dashboard. Monatlich kündbar, bezahlt wird erst, wenn du zufrieden bist.

Auch interessant

Webdesign26. Juli 2026

Google Fonts lokal hosten: DSGVO-konform in vier Schritten

Webdesign5. März 2026

Mobile First

Webdesign2. September 2026

Webdesign-Inspiration: wo du sie findest und wie du sie liest

Mehr aus dem Blog

Lieber sofort? Dann so.