Nachhaltiges Webdesign 2026:
So wird Ihre Website klimafreundlich

Das Internet hat ein CO2-Problem

Während Sie diesen Artikel lesen, verbrauchen Ihr Gerät, der Server, der diese Seite ausliefert, und die Netzwerk-Infrastruktur dazwischen Strom. Der größte Teil davon stammt noch immer aus fossilen Quellen.

Allein die Rechenzentren verbrauchten 2024 laut der Internationalen Energieagentur (IEA) rund 415 Terawattstunden Strom, etwa 1,5 % des weltweiten Verbrauchs. Die IEA erwartet, dass sich dieser Wert bis 2030 auf rund 945 Terawattstunden verdoppelt, vor allem durch KI. Netze und Endgeräte kommen noch hinzu.

Jede Maßnahme, die Ihre Website leichter macht, wirkt doppelt: Sie sparen CO2 und verbessern die User Experience. Die Seite lädt schneller, mobile Nutzer verbrauchen weniger Daten, und die Core Web Vitals werden besser. Nachhaltigkeit und Performance ziehen hier am selben Strang.

Was ist nachhaltiges Webdesign?

Nachhaltiges Webdesign (oder Green Web Design) bedeutet, Websites so zu planen, zu gestalten und zu betreiben, dass sie möglichst wenig Energie verbrauchen. Das betrifft vier Ebenen:

Das Ziel ist Effizienz. Eine nachhaltige Website darf gut aussehen, sie setzt ihre Ressourcen nur gezielter ein. Das spart Server-Ressourcen und verbessert die Nutzererfahrung.

Die EU-Richtlinie zur Nachhaltigkeitsberichterstattung (CSRD) gilt nach der Omnibus-Reform (Richtlinie (EU) 2026/470) nur noch für Unternehmen mit mehr als 1.000 Beschäftigten und mehr als 450 Mio. Euro Nettoumsatz. Von kleineren Zulieferern dürfen diese Unternehmen nur Angaben im Umfang des freiwilligen VSME-Standards verlangen. Fragt ein Auftraggeber nach dem Energieverbrauch Ihrer digitalen Dienste, haben Sie mit einer schlanken Website gute Antworten.

Green Hosting: Ökostrom im Rechenzentrum

Ihr Hosting-Provider bestimmt, mit welchem Strom Ihre Website auf der Serverseite läuft. Bezieht das Rechenzentrum Strom aus erneuerbaren Quellen, sinken die Emissionen auf dieser Seite deutlich.

Die großen Cloud-Anbieter kaufen in großem Umfang Strom aus erneuerbaren Quellen ein, oft bilanziell über Zertifikate und Abnahmeverträge. Viele Hosting-Plattformen laufen auf der Infrastruktur dieser Anbieter, Cloudflare betreibt dagegen ein eigenes Netz. Lesen Sie deshalb den Nachhaltigkeitsbericht des Unternehmens, das Ihre Server betreibt.

Bildoptimierung: Der schnellste Gewinn

Auf Startseiten sind Bilder laut HTTP Archive (Web Almanac 2024) der größte Posten beim Seitengewicht. Hier sparen Sie schnell viel ein, oft ohne sichtbaren Qualitätsverlust.

Konkrete Maßnahmen

• Liefern Sie mit Responsive Images (srcset und sizes) je nach Bildschirmgröße die passende Auflösung aus. Ein Smartphone braucht kein 2400px breites Bild.
• Laden Sie Bilder unterhalb des sichtbaren Bereichs erst, wenn der Nutzer dorthin scrollt. Dieses Lazy Loading funktioniert nativ mit loading="lazy".
• Schneiden Sie Bilder auf die benötigte Größe zu. Ein 4000x3000-Foto gehört nicht in einen 400px breiten Kartenslot.
• Komprimieren Sie Ihre Bilder: WebP mit Qualität 75-80 sieht gleichwertig aus und braucht nur einen Bruchteil der Dateigröße.
• Hinterfragen Sie dekorative Bilder. Wenn ein Stockfoto dem Leser nichts bringt, reicht oft ein CSS-Gradient oder eine schlichte Illustration.

Kleinere Bilder verbessern vor allem den LCP-Wert, weil das größte sichtbare Element einer Seite oft ein Bild ist.

Sauberer Code: weniger JavaScript, weniger Energie

Jedes Kilobyte JavaScript, das der Browser herunterladen, parsen und ausführen muss, kostet Energie auf dem Server, in der Netzwerk-Infrastruktur und auf dem Endgerät. Auf einem älteren Smartphone spüren Ihre Besucher jedes zusätzliche Megabyte JavaScript als Verzögerung beim Tippen und Scrollen.

Framework-Wahl und Nachhaltigkeit

Die Wahl des Frameworks bestimmt die Grundlinie. Eine mit Astro gebaute Website liefert per Default kein JavaScript aus, solange Sie keine interaktiven Inseln einbauen. Ein Next.js-Projekt lädt dagegen immer die React-Laufzeit mit. Für eine Unternehmenswebsite mit überwiegend statischen Inhalten ist das ein unnötiger Grundverbrauch.

Für Web-Apps mit viel Interaktivität sind React und Next.js die richtige Wahl. Für eine Firmenpräsenz, einen Blog oder eine Landing Page reicht oft weniger JavaScript, und davon profitiert auch die Website-Geschwindigkeit.

Design mit Bedacht: Weniger Daten, bessere Wirkung

Beim nachhaltigen Design treffen Sie bewusste Entscheidungen, die Ressourcen schonen, ohne dass die Website langweilig wird oder an visueller Qualität verliert. Einige der wirkungsvollsten Maßnahmen kosten nichts und sehen sogar besser aus.

Dark Mode

Auf OLED-Displays (mittlerweile Standard bei Smartphones und zunehmend bei Laptops) verbrauchen dunkle Pixel weniger Strom als helle. Schwarze Pixel bleiben auf einem OLED-Panel ausgeschaltet. Ein dunkles Design senkt deshalb den Stromverbrauch des Displays, am stärksten bei hoher Helligkeit.

System-Fonts

Jede eingebundene Web-Font kostet typischerweise 20-100 KB. Bei drei Schriftschnitten (Regular, Bold, Italic) sind das 60-300 KB, bevor ein einziges Wort sichtbar ist. System-Fonts wie die native system-ui-Familie sind bereits auf dem Gerät vorhanden und kosten keine zusätzlichen Bytes. Wenn es eine bestimmte Schriftart sein muss: Variable Fonts laden eine einzige Datei statt mehrerer Gewichtsstufen.

Animationen und Bewegung

CSS-Animationen verbrauchen weniger Rechenleistung (und damit Strom) als JavaScript-Animationen. GPU-beschleunigte Properties wie transform und opacity sind effizienter als Layout-basierte Properties wie width oder top. Respektieren Sie dabei immer prefers-reduced-motion. Nutzer, die Animationen reduzieren wollen, schonen damit ihre Wahrnehmung und ihren Akku.

CO2 messen: Tools für den Ausgangswert

Bevor Sie optimieren, brauchen Sie eine Ausgangslage. Mehrere kostenlose Tools schätzen den CO2-Fußabdruck Ihrer Website.

Der Business Case: Warum sich Nachhaltigkeit rechnet

Nachhaltiges Webdesign kann sich auch betriebswirtschaftlich lohnen. Weniger Datenvolumen und Rechenaufwand wirken sich an mehreren Stellen aus:

CSRD und Berichtspflicht

Seit der Omnibus-Reform von 2026 berichten nach der CSRD nur noch Unternehmen mit mehr als 1.000 Beschäftigten und mehr als 450 Mio. Euro Nettoumsatz. In deren Bilanz fällt die digitale Infrastruktur unter Scope 2 (eigener Stromverbrauch) und Scope 3 (eingekaufte Dienste). Von kleineren Zulieferern dürfen sie nur Angaben im Umfang des freiwilligen VSME-Standards verlangen. Mit einer schlanken, gemessenen Website beantworten Sie solche Fragen schnell.

Dazu kommt der Marketingeffekt: Eine nachweisbar klimafreundliche Website können Sie als Argument im Vertrieb nutzen. Zeigen Sie Ihren CO2-Badge im Footer, kommunizieren Sie Ihr Green Hosting auf der Über-uns-Seite.

Wie mache ich meine Website nachhaltig? Die Checkliste

Häufig gestellte Fragen

Weiterlesen