Über den Energieverbrauch des Internets kursieren viele Zahlen, von denen die wenigsten belastbar sind. Unstrittig ist die Richtung: Jedes übertragene Megabyte kostet Energie — im Rechenzentrum, im Netz und im Endgerät. Für eine einzelne Unternehmenswebsite ist der absolute Beitrag klein. Interessant wird das Thema aus einem anderen Grund: Praktisch jede Maßnahme, die den Datenverbrauch einer Website senkt, verbessert gleichzeitig Ladezeit, Nutzererlebnis, Conversion-Rate und Rankings. Nachhaltiges Webdesign ist deshalb weniger eine Frage der Haltung als eine der Effizienz — und dieser Artikel behandelt es entsprechend nüchtern.
Worum es tatsächlich geht
Der Energiebedarf einer Website hängt im Wesentlichen an drei Größen: wie viele Daten übertragen werden, wie viel Rechenleistung Server und Endgerät dafür aufwenden und woher der Strom kommt. Alle drei lassen sich beeinflussen — die erste am einfachsten und mit dem größten Effekt.
| Hebel | Aufwand | Wirkung auf Energie | Nebeneffekt |
|---|---|---|---|
| Bilder optimieren | gering | hoch | deutlich schnellere Ladezeit |
| Videos reduzieren | gering | sehr hoch | bessere Core Web Vitals |
| Skripte aufräumen | mittel | mittel | bessere Interaktivität |
| Schriften begrenzen | gering | gering | weniger Layoutsprünge |
| Caching und CDN | gering | mittel | geringere Serverlast |
| Ökostrom-Hosting | gering | je nach Anbieter hoch | keiner |
| Weniger Seitenaufrufe je Aufgabe | mittel | mittel | bessere Nutzerführung |
Den Ist-Zustand messen
- 1Seitengewicht ermitteln: Browser-DevTools, Reiter Netzwerk, Cache leeren, Seite neu laden — die übertragene Datenmenge notieren
- 2Für die fünf wichtigsten Seiten wiederholen, jeweils mobil und Desktop
- 3Größte Einzelposten identifizieren: meist zwei bis drei Bilder oder ein Skript
- 4Mit PageSpeed Insights gegenprüfen, wie sich das auf die Ladezeit auswirkt
- 5Ergebnis dokumentieren, damit die Verbesserung später belegbar ist
Als grobe Orientierung: Eine gut gebaute Unternehmensseite kommt ohne Video mit 500 Kilobyte bis 1,5 Megabyte aus. Alles über drei Megabyte hat fast immer einen einzelnen, leicht behebbaren Grund.
Größter Hebel: Bilder und Video
- Moderne Formate: WebP oder AVIF sparen gegenüber JPEG typischerweise 40 bis 70 Prozent
- Richtig dimensionieren: Kein 3000-Pixel-Bild ausliefern, wenn es 800 Pixel breit dargestellt wird
- Responsive Bilder mit srcset — Mobilgeräte bekommen kleinere Dateien
- Verzögertes Laden für alles unterhalb des sichtbaren Bereichs, außer für das größte Bild im Kopfbereich
- Videos nie automatisch im Hintergrund abspielen: Ein Hero-Video kostet oft mehr als die gesamte restliche Seite
- Eingebettete Videos erst nach Klick laden, mit statischem Vorschaubild
- Dekorative Bilder hinterfragen: Braucht dieser Abschnitt wirklich ein Foto?
Code, Schriften und Skripte
- Skripte inventarisieren: Was wird tatsächlich genutzt? Alte Tracking-Pixel und Testwerkzeuge bleiben oft jahrelang liegen
- Nur laden, was gebraucht wird — nicht jedes Skript auf jeder Seite
- Schriften: zwei Schnitte reichen fast immer, selbst hosten, moderne Formate nutzen
- Systemschriften sind die sparsamste Option — für viele Projekte gestalterisch aber keine Alternative
- CSS und JavaScript minimieren, ungenutzten Code entfernen
- Bei Content-Management-Systemen: Plugins reduzieren, jedes bringt eigene Dateien mit
Hosting und Infrastruktur
- Anbieter mit nachweislich erneuerbarer Energieversorgung wählen — belegt durch Zertifikate, nicht durch Marketingaussagen
- Serverstandort in der Region der Nutzer: kürzere Wege, geringere Latenz
- CDN nutzen: Inhalte werden näher am Nutzer ausgeliefert und seltener neu erzeugt
- Statisches Ausliefern, wo möglich: vorgerenderte Seiten brauchen bei jedem Aufruf keine Datenbankabfrage
- Caching konsequent einsetzen, damit wiederkehrende Besucher weniger übertragen
- Alte Umgebungen abschalten: Test- und Staging-Systeme laufen oft jahrelang ungenutzt weiter
Designentscheidungen mit Wirkung
| Entscheidung | Effekt |
|---|---|
| Statischer Hero statt Video | größte Einzelersparnis überhaupt |
| Weniger, aber gezielte Bilder | geringeres Seitengewicht, klarere Aussage |
| Klare Nutzerführung | weniger Seitenaufrufe bis zum Ziel |
| Dunkle Darstellung als Option | geringerer Verbrauch auf OLED-Displays |
| Sparsame Animationen | weniger Rechenlast auf schwachen Geräten |
| Gute Suche und Struktur | weniger Irrwege, weniger Aufrufe |
Der vierte Punkt wird häufig überschätzt und der dritte unterschätzt: Eine Website, auf der Besucher ihr Ziel in zwei statt in fünf Schritten erreichen, spart mehr Energie als jede Farbwahl — und bringt zugleich mehr Anfragen.
Was nur Symbolik ist
- Ein Siegel im Fußbereich ohne jede technische Maßnahme dahinter
- CO2-Kompensation, während die Startseite acht Megabyte überträgt — erst reduzieren, dann ausgleichen
- Eine „grüne Version“ der Website, die niemand aufruft, während die Hauptversion unverändert bleibt
- Werbeaussagen zur Klimaneutralität ohne belastbare Grundlage: rechtlich riskant und schnell angreifbar
Ehrlich darüber sprechen
Wenn ihr das Thema nach außen tragt, tut es mit Zahlen statt mit Adjektiven. Das ist glaubwürdiger und rechtlich unbedenklicher:
- Konkrete Werte nennen: Seitengewicht vorher und nachher, Ladezeit vorher und nachher
- Maßnahmen benennen statt Zustände behaupten: „Hosting mit Ökostrom, Seitengewicht unter 1 MB“ statt „klimaneutrale Website“
- Belege verlinken, wo vorhanden — etwa das Zertifikat des Hosters
- Keine Aussagen treffen, die ihr nicht nachweisen könnt
Effizienz-Check eurer Website
Wir messen Seitengewicht und Ladezeit, benennen die drei größten Posten und sagen euch, was sich mit wenigen Stunden Aufwand einsparen lässt.
Check anfragenHäufige Fragen
Was ist nachhaltiges Webdesign?+
Wie schwer darf eine Website sein?+
Bringt grünes Hosting wirklich etwas?+
Ist Dark Mode energiesparender?+
Darf ich meine Website als klimaneutral bewerben?+
Sparsam ist schnell. Schnell ist besser.
Wir bauen Websites, die mit wenig auskommen — und dadurch spürbar schneller sind. Erstgespräch kostenlos.
Beratung anfragen