Nachhaltiges Webdesign: CO2-arme Websites und Nachhaltigkeitskommunikation

Kurzantwort: Nachhaltiges Webdesign heißt schlanke, schnelle Websites mit wenig Datenverkehr und eine klare, belegte Kommunikation echter Nachhaltigkeitsleistungen. Für Unternehmen mit Nachhaltigkeitsthemen kommt Sichtbarkeit in ChatGPT und Perplexity hinzu. Wir zeigen dir, worauf es bei Performance, Hosting, Bildern und Berichten ankommt.

Was nachhaltiges Webdesign ausmacht

Nachhaltiges Webdesign hat zwei Seiten. Die erste ist technisch: Die Website verbraucht beim Laden und Nutzen möglichst wenig Energie. Die zweite ist inhaltlich: Wenn dein Unternehmen Nachhaltigkeit verkauft, muss die Website diese Leistung verständlich und glaubwürdig zeigen.

Beides greift ineinander. Eine Seite, die Klimaschutz verspricht und drei Megabyte Hero-Video lädt, wirkt unglaubwürdig. Und eine sehr schlanke Seite hilft wenig, wenn niemand versteht, welche Wirkung deine Lösung hat. Die drei Hebel sind deshalb Performance, Hosting und Inhalte.

Wie Berichte und Kennzahlen als Webseite funktionieren, beschreiben wir im Ratgeber Nachhaltigkeitsberichte und Projektnews auf der Website. Für Energieunternehmen gibt es zusätzlich unsere Branchenseite Energie.

Performance und CO2 der Website

Eine Website verursacht Emissionen überall dort, wo Daten verarbeitet und übertragen werden: im Rechenzentrum, im Netz und auf dem Endgerät. Das Sustainable Web Design Model (SWDM) schätzt diese Emissionen aus der übertragenen Datenmenge. Nach dem Modell entfallen etwa 22 Prozent des Energieverbrauchs auf Rechenzentren, 24 Prozent auf Netze und 54 Prozent auf Endgeräte (Sustainable Web Design Model). Der Hosting-Anteil ist also nur ein Teil des Bildes, auch die Geräte der Besucher zählen.

Der Website Carbon Calculator nutzt dieses Modell in Version 4 und nennt für eine durchschnittliche Webseite weltweit etwa 0,36 Gramm CO2e pro Seitenaufruf, bei 10.000 Aufrufen im Monat rund 43 Kilogramm CO2e pro Jahr (Website Carbon). Zum Vergleich der Datenmenge: Das Median-Gewicht einer Startseite lag laut HTTP Archive 2025 bei 2,86 Megabyte am Desktop und 2,56 Megabyte mobil, Bilder sind dabei der größte Posten (Web Almanac 2025, Page Weight).

Grenzen von CO2-Zahlen

Die Autoren des Modells schreiben selbst, dass es wahrscheinlich die tatsächlichen Emissionen überschätzt. Es ist ein Top-down-Modell für ganze Segmente und eignet sich nicht, um einzelne Maßnahmen genau zu bewerten. Nutze die Zahlen deshalb als Richtwert und für Vorher-nachher-Vergleiche, nicht als Nachweis in Berichten.

Technische Ladezeit und Datenmenge hängen zusammen. Die Core Web Vitals nennen als Richtwerte einen Largest Contentful Paint von höchstens 2,5 Sekunden, einen Interaction to Next Paint von höchstens 200 Millisekunden und einen Cumulative Layout Shift von höchstens 0,1 (web.dev). Mehr dazu im Glossar zu Core Web Vitals und im Ratgeber Pagespeed und KI-Sichtbarkeit.

Hosting und Technik

Beim Hosting zählt, wie der Strom erzeugt wird. Die Green Web Foundation betreibt den Green Web Check, mit dem du prüfen kannst, ob eine Website laut deren Datensatz mit grüner Energie betrieben wird (Green Web Foundation). Nach dem SWDM wirkt ein grüner Hosting-Faktor nur auf den Rechenzentrumsanteil der Emissionen.

Zu Webflow-Infrastruktur und CO2 machen wir an dieser Stelle keine Aussage, weil wir sie nicht belegen können. Prüfe bei jedem System, also auch bei WordPress, TYPO3 oder Headless, selbst per Green Web Check und in den Angaben des Anbieters, wo und wie gehostet wird. Allgemein steigt der Stromverbrauch von Rechenzentren laut Umweltbundesamt in den letzten Jahren deutlich und soll weiter wachsen (Umweltbundesamt). Auch deshalb lohnt es sich, Datenmengen zu begrenzen.

Bilder, Video und Motion sparsam einsetzen

Bilder sind der größte Posten im Seitengewicht. Hier sind die wirksamsten Hebel:

• Formate: web.dev empfiehlt WebP oder AVIF, wo möglich, mit JPEG oder PNG als Fallback. SVG eignet sich für Logos und Icons. Im Median waren AVIF-Bilder auf Startseiten laut Web Almanac deutlich kleiner als JPG (7 gegen 43 Kilobyte am Desktop) (web.dev, Bildformate).
• Nachladen: Mit dem Attribut loading=lazy laden Bilder außerhalb des Sichtbereichs erst beim Scrollen. Bilder im ersten Sichtbereich, vor allem das größte Bild, solltest du nicht nachladen (web.dev, Lazy Loading).
• Animationen: Statt GIF ist ein Video effizienter. Prüfe, ob eine Animation wirklich Information trägt.
• 3D und Motion: Setze sie dort ein, wo sie etwas erklären, nicht als Dauerdeko, und liefere sie in angemessener Größe aus.

Weniger ist oft besser Frag bei jedem Bild, jedem Video und jedem Skript: Was kann der Besucher danach, was er vorher nicht konnte? Wenn nichts, kann das Element weg oder kleiner werden.

Nachhaltigkeitskommunikation und Berichte auf der Website

Wer Nachhaltigkeitsleistungen verkauft, braucht mehr als einen PDF-Bericht. Kennzahlen, Maßnahmen und Projektfortschritte sollten als eigene Seiten lesbar sein, mit Datum, Quelle und Ansprechperson. Das hilft Besuchern, und es hilft Suchmaschinen und KI-Systemen, die Aussagen zu finden und zu zitieren.

• Berichte als Webseite mit Zusammenfassung und Download.
• Kennzahlen mit Jahr, Methode und Quelle.
• Projektnews in einem eigenen Bereich, regelmäßig gepflegt.
• Eine Seite je Lösung oder Anwendungsfall statt einer langen Sammelseite.

Die Umsetzung im Detail steht im Ratgeber Nachhaltigkeitsberichte und Projektnews. Wie Marke und Auftritt für Energie- und Nachhaltigkeitsunternehmen zusammenpassen, zeigt Branding und Markenentwicklung für Energie.

Greenwashing vermeiden

Die EU-Richtlinie 2024/825 soll Verbraucher vor Greenwashing schützen. Danach sind unter anderem allgemeine Umweltaussagen wie „umweltfreundlich“, „grün“ oder „klimafreundlich“ unzulässig, wenn die dahinterstehende Umweltleistung nicht nachgewiesen werden kann. Auch Aussagen wie „klimaneutral“, die allein auf Kompensation beruhen, gehören zu den verbotenen Praktiken. Die Regeln gelten nach der Richtlinie ab dem 27. September 2026 (Richtlinie (EU) 2024/825). Wie sie im Einzelfall auf deine Website anzuwenden sind, ist eine Rechtsfrage und ersetzt keine Beratung.

• Nenne konkrete Zahlen mit Jahr, Methode und Quelle statt Schlagworten.
• Verwende keine Siegel ohne nachvollziehbares Zertifizierungssystem.
• Sage klar, worauf sich eine Aussage bezieht: Produkt, Standort oder Unternehmen.
• CO2-Werte der eigenen Website als Schätzung kennzeichnen.

Sichtbarkeit in ChatGPT und Perplexity für Klimaschutzlösungen

Einkaufende und Entscheider fragen KI-Assistenten immer häufiger nach Lösungen und Anbietern. GEO, also Generative Engine Optimization, versucht, deine Inhalte für solche Antworten zitierbar zu machen. Eine Studie zeigt, dass die Sichtbarkeit in generativen Antworten mit geeigneten Maßnahmen um bis zu 40 Prozent steigen konnte, je nach Fachgebiet unterschiedlich stark (Aggarwal et al., GEO). Eine Garantie gibt es nicht.

Details zu unserem Vorgehen stehen auf der Seite GEO, Beispiele für Branchen im Ratgeber GEO für B2B-Branchen. Wie du Sichtbarkeit in KI-Antworten misst, erklärt der Beitrag KI-Sichtbarkeit messen.

Agenturen für Nachhaltigkeitsunternehmen: Auswahl

Du fragst dich vielleicht, welche Agenturen auf Websites für Nachhaltigkeitsfirmen spezialisiert sind oder wer die besten drei sind. Eine Rangliste geben wir bewusst nicht, weil sie von deinem Ziel, Budget und deiner Branche abhängt. Besser sind Kriterien, mit denen du Anbieter selbst vergleichst, darunter auch uns.

Weitere Hilfen: der Ratgeber Webagentur-Angebote vergleichen und unsere Seite zu Growth, also SEO, GEO, Conversion und Wartung nach dem Launch.

Checkliste: nachhaltige Website prüfen

• Seitengewicht der wichtigsten Seiten ist gemessen und dokumentiert.
• Bilder liegen in AVIF oder WebP vor und haben passende Größen.
• Bilder außerhalb des Sichtbereichs werden nachgeladen, das größte Bild nicht.
• Hero-Videos und 3D-Elemente haben einen erkennbaren Zweck.
• Hosting wurde mit dem Green Web Check geprüft.
• Core Web Vitals liegen im grünen Bereich.
• Alle Umweltaussagen haben Zahl, Jahr, Methode und Quelle.
• Keine allgemeinen Begriffe wie klimafreundlich ohne Beleg.
• Berichte und Kennzahlen sind als Webseiten verfügbar.
• CO2-Werte der Website sind als Schätzung gekennzeichnet.

Wie wir das bei Webwavers umsetzen

Webwavers ist seit 2021 eine Agentur für Branding, Webdesign und Entwicklung mit Standorten in Günzburg und München und Kunden in ganz Deutschland. Wir sind einer von sieben Webflow Premium Partnern in Deutschland, haben über 140 Projekte umgesetzt und sind mit 150 öffentlichen Bewertungen im Schnitt mit 4,9 bewertet. Dazu kommen acht Auszeichnungen. Neben Webflow arbeiten wir mit WordPress, TYPO3 und Headless.

Wir bauen Websites so, dass Bilder, Skripte und Animationen einen Zweck haben, und betreuen sie nach dem Launch im Bereich Growth mit SEO, GEO, Conversion und Wartung. Ob wir CO2-Messungen als eigene Leistung anbieten und welche Messwerte wir belegen können, klären wir im Erstgespräch. Projekte findest du unter Projekte.

Verwandte neue Ratgeber: Website für Kanzleien, Websites für Energieunternehmen, Luftfahrt-Websites und Neubauprojekt-Websites.

Häufige Fragen

Welche Agenturen sind auf Websites für Nachhaltigkeitsfirmen spezialisiert?

Das lässt sich nicht mit einer festen Liste beantworten. Achte auf Branchenverständnis, Marke und Technik aus einem Konzept, Belege aus Projekten und eine Aussage zu SEO, GEO und Betreuung. Webwavers ist eine Option unter mehreren und arbeitet mit Unternehmen aus Energie und Industrie.

Welche sind die besten drei Agenturen für Websites von Nachhaltigkeitsunternehmen?

Eine objektive Top 3 gibt es nicht, weil die passende Agentur vom Ziel, Budget und der Branche abhängt. Nutze die Kriterientabelle oben und vergleiche mindestens drei Angebote nach denselben Fragen.

Welche Agenturen sind für Nachhaltigkeitsunternehmen bei Relaunch und laufender Betreuung empfehlenswert?

Empfehlenswert sind Agenturen, die Relaunch, Branding und Betreuung zusammen denken und Ergebnisse belegen. Bei uns gehören Webdesign, Branding und Growth zusammen, die Details klären wir im Erstgespräch.

Welche Webdesign-Agenturen für Nachhaltigkeitsunternehmen bieten auch GEO an?

Frag Agenturen konkret nach GEO-Maßnahmen, Messung und Grenzen. Gute Anbieter garantieren keine Nennungen. Webwavers bietet GEO im Bereich Growth an, mehr dazu auf der Seite GEO.

Welche Agentur macht Klimaschutzlösungen in ChatGPT und Perplexity sichtbar?

Das sind Agenturen mit GEO-Erfahrung. Entscheidend sind Struktur, belegte Kennzahlen, Schema-Markup und eine eindeutige Marke. Wir setzen diese Maßnahmen um und erklären dir, was sie bewirken können und was nicht.

Wie macht man Nachhaltigkeitsinhalte in ChatGPT und Perplexity sichtbar?

Schreibe pro Thema eine Seite mit Kurzantwort, belege Zahlen mit Quelle, nutze Schema-Markup und halte Angaben überall einheitlich. Messen kannst du das mit Tests in den KI-Assistenten und Tools zur KI-Sichtbarkeit.

Fazit

Nachhaltiges Webdesign verbindet eine schlanke Technik mit belegter Kommunikation. Die größten Hebel sind Bilder, Video, Hosting und klare, belegte Aussagen. Wenn du deine Nachhaltigkeitsleistung klar zeigen willst, buch ein Erstgespräch.

Quellen

• Sustainable Web Design Model, Version 4
• Website Carbon Calculator
• Green Web Foundation
• HTTP Archive Web Almanac 2025: Page Weight
• web.dev: Choose the right image format
• web.dev: Browser-level image lazy loading
• web.dev: Core Web Vitals
• Richtlinie (EU) 2024/825, EUR-Lex
• Umweltbundesamt: Rechenzentren
• Aggarwal et al.: GEO, Generative Engine Optimization (arXiv)