Wir verbrauchen zu viel Energie. Auch im Internet.
Die Folgen sind Hitzewellen, Umweltkatastrophen, Wasserknappheit und vieles mehr.
Das Internet trägt in großen Teilen zu diesen Auswirkungen bei.
Websites die nicht nachhaltig sind, kosten dich und deine Nutzer:innen mehr Geld, als nachhaltige Websites.
Damit du mit deiner Website für zufriedenere Nutzer:innen und mehr Umsatz sorgen kannst, zeige ich dir was nachhaltiges Webdesign ist und wie du es für dich und deine Website nutzen kannst.
Inhaltsverzeichnis:
Das Wichtigste in Kürze zusammengefasst:
- Nachhaltigkeit ≠ reiner Verzicht in der Gegenwart
- Bereits kleine Einsparungen im gesamten Web hätten einen großen Einfluss auf die CO2-Emissionen
- Denke Nachhaltigkeit beim Launch oder Relaunch deiner Seiten mit
- Nachhaltiges Webdesign wirkt sich positiv auf SEO, UX, Barrierefreiheit und viele andere Dinge aus, die dir helfen Geld mit deiner Website zu verdienen
- Vermeide und reduziere, bevor du substituierst oder kompensierst
- Der größte Optimierungshebel für nachhaltigeres Webdesign sind meistens Bilder
- Fonts sind meistens eine Low-Hanging-Fruit
Was ist nachhaltiges Webdesign?
Die Antwort auf diese Frage ergibt sich daraus, wie Nachhaltigkeit und Webdesign jeweils definiert werden können. Nachhaltigkeit wird unter anderem wie folgt beschrieben:
Nachhaltigkeit oder nachhaltige Entwicklung bedeutet, die Bedürfnisse der Gegenwart so zu befriedigen, dass die Möglichkeiten zukünftiger Generationen nicht eingeschränkt werden. [1]
Es geht also einerseits darum, dass die Zukunft nicht durch die Gegenwart benachteiligt wird. Gleichzeitig soll die Gegenwart aber auch ihre Bedürfnisse befriedigen können.
Webdesign (auch Webgestaltung) umfasst als Disziplin des Mediendesigns die visuelle, funktionale und strukturelle Gestaltung von Websites für das Internet. [2]
Im Fokus steht hier in erster Linie, wie eine Website aussieht, welche Funktionen sie hat und wie sie aufgebaut ist. Gleichzeitig spielt natürlich auch Webentwicklung, d.h. die technische Umsetzung, eine wichtige Rolle. Die Übergänge sind oft fließend.
Wenn ich von nachhaltigem Webdesign spreche, meine ich damit sowohl das Design als auch die Entwicklung bzw. technische Umsetzung.
Zusammenfassend lässt sich folgende Definition für nachhaltiges Webdesign ableiten:
Nachhaltiges Webdesign ist die Gestaltung von Weberfahrungen, die Menschen der Gegenwart begeistern und die Möglichkeiten zukünftiger Generationen nicht einschränken.
💡 Wichtige Faktoren für nachhaltiges Webdesign umfassen demnach alles, was mit der eigenen Website zu tun hat:
- Größe der Website (= Anzahl der Inhalte)
- Nutzererfahrung
- Einsatz von Medien, wie Bilder, Videos, etc. sowie deren Optimierung
- Green Hosting (= Verwendung von Ökostrom)
- Schlanker und effizienter Code
- Verwendete Programmiersprachen
- Visuelle Gestaltung, da auch Farben unterschiedlich viel Energieverbrauch aufweisen
- Eingesetzte Tracking-Skripte
- und vieles mehr
Das wirkt erstmal als gäbe es viel, auf das man achten müsste. Aus Erfahrung kann ich dir aber sagen: Eigentlich achtet man auf die Dinge, die man hoffentlich auch schon vorher im Blick hatte.
Der einzige Unterschied dabei: Man behält Nachhaltigkeit bei allen Entscheidungen im Hinterkopf.
Warum ist nachhaltiges Webdesign wichtig?
Durch unsere Wirtschaft und Gesellschaft geben wir der Gegenwart, indem wir aus der Zukunft schöpfen.
Im digitalen Raum ist leider der Irrglaube weit verbreitet, dass unser Handeln und Verhalten online keinen Einfluss auf die Umwelt hätte.
💡 Das Internet verbrauchte 2022 mehr Strom als Deutschland und reiht sich im weltweiten Ranking der CO2-Emissionen je nach Quelle auf Platz 4-6 ein. [3 und 4]
Quelle: Eigene Darstellung in Anlehnung an [3] und [4]
Wichtig: Alles, was wir im digitalen Raum machen, verbraucht Energie.
Eine Google-Suche verbraucht im Durchschnitt ca. 0,2g CO2. Ein durchschnittlicher Seitenaufruf lädt etwa 2,0mb Daten herunter, was in etwa 1,5g CO2 entspricht.
90.63% of Content Gets No Traffic From Google. [5]
Das sind fast 91%. Ich wiederhole: Über 90% aller Inhalte erhalten nicht einen einzigen Klick aus der organischen Suche.
Wenn wir uns vor Augen führen, dass die organische Suche das Ziel verfolgt, relevante vorhandene Nachfrage abzufangen, dann lässt sich daraus ableiten:
Viel, was im Internet hochgeladen wird, ist nutzloser Müll, der Energie und Ressourcen verschwendet.
Nicht nur die Ressourcen unseres Planeten, sondern auch Zeit und Geld, die in die Produktion der Inhalte oder die Server-Kosten fließen.
Das große Problem: Wir konsumieren und verbrauchen immer mehr.
Mehr Content, mehr Videos, mehr Streaming, mehr bzw. höhere Qualität. Mehr, mehr, mehr.
Oft wird der digitale Konsum mit Zucker verglichen, der vor vielen Jahren ein rares und sehr teures Gut war. So verhielt es sich auch mit der digitalen Datenspeicherung.
Über so was können wir heute nur noch lachen (oder eben auch nicht).
Wir verbrauchen nicht nur mehr, weil jede:r Einzelne mehr konsumiert, sondern auch, weil mehr Menschen das Internet nutzen, wie in der folgenden Grafik zu sehen ist:
Quelle: Eigene Darstellung in Anlehnung an https://www.statista.com/statistics/273018/number-of-internet-users-worldwide/
Mehr Nutzende = mehr Datenübertragung.
Zwar nimmt die durchschnittliche Anzahl verwendeter Bilder pro Seitenaufruf seit 2013 ab, jedoch kommt es hier zu starken Rebound-Effekten, weil die verwendeten Bilder immer größer, hochauflösender und oft schlechter optimiert sind.
Quelle: https://httparchive.org/reports/page-weight?start=2018_02_01&end=latest&view=list
Auf Desktop werden folglich fast 50% weniger Bilder geladen; pro Bild werden allerdings über 50% mehr Daten übertragen.
✍️ Rebound-Effekte = Die durch technologischen Fortschritt erwirtschafteten Umweltvorteile verpuffen durch Mehrnutzung teilweise oder sogar komplett.
Unser Internet wird “schneller” schneller, so dass wir es uns erlauben können, ineffizienter zu arbeiten. Die zusätzliche Geschwindigkeit gleicht die Ineffizienz aus.
Quelle: Eigene Darstellung in Anlehnung an https://www.statista.com/statistics/871513/worldwide-data-created/
Die Grafik stellt die Datenmengen dar, die erstellt, konsumiert und gespeichert werden. In Zettabyte.
Ein Zettabyte sind 1.000.000.000.000.000.000.000 Bytes oder 1.099.511.627.776 Gigabyte.
Diese Zahl ist so groß und für den Menschen nicht mehr greifbar, weil wir logarithmisch denken. Kleinere Zahlen, z.B. 2, 5, 10, können wir ohne große Mühe differenzieren.
Sobald Zahlen sehr groß werden, verlieren wir das Gefühl für sie.
Um ein Zettabyte zu drucken, bräuchte es 6.000 mal so viel Papier, wie für alle Bücher die jemals gedruckt wurden. [6]
Unglaublich. Und wie vorher beschrieben: Diese Daten müssen gespeichert werden, abrufbar sein und verbrauchen dabei extrem viel Energie.
Das Internet, die Digitalisierung und die Websites, die wir bauen, haben einen maßgeblichen Einfluss auf die Natur und das Klima. Daher ist es notwendig, Nachhaltigkeit im Webdesign nicht zu einem “nice-to-have”, sondern zu einem absoluten “must-have” zu machen.
Wie in der Definition für nachhaltiges Webdesign bereits beschrieben wurde, geht es bei Nachhaltigkeit nicht um den absoluten Verzicht im Hier und Jetzt.
Worum es eigentlich geht, ist aus meiner Sicht vor allem Achtsamkeit. Nachhaltigkeit bei den eigenen Entscheidungen zu berücksichtigen und so gut es geht umzusetzen.
Vorteile von nachhaltigen Websites
Warum solltest du deine Website nachhaltiger machen?
Neben der Rücksichtnahme auf das Klima gibt es viele weitere Argumente, eine Website nachhaltig zu designen und zu entwickeln.
💡 Vor allem diese Aspekte können von einer nachhaltigen Website profitieren:
- UX
- SEO
- Accessibility
- Uptime
- Hosting
Eine gute Nutzerführung bedeutet, dass Nutzende möglichst schnell und unkompliziert ihr Ziel erreichen. Das führt in der Regel zu einer höheren Zufriedenheit.
Höhere Zufriedenheit aller Nutzer:innen = höhere Conversion Rates.
Zufriedene Nutzer:innen, mehr Leads und Sales haben wir doch gerne, oder?
Es ist zwar kein massiver Ranking-Faktor, aber auch Google ist ein Freund von schnellen Websites. Nachhaltige Websites laden nur die Daten, die wirklich benötigt werden.
Und die Daten, die geladen werden, sind bestmöglich optimiert.
Aber nicht nur die Ladegeschwindigkeit deiner Seite wird verbessert, auch der Googlebot kommt beim Crawling (= beim Herunterladen) schneller durch deine Seite.
Eine nachhaltige Website ist in der Regel auch barrierefreier. Das ist besonders wichtig, weil nicht alle Menschen eine schnelle Internetverbindung oder Top-Endgeräte haben.
Rund 50% aller Nutzer:innen nutzen Endgeräte, die in etwa dem Standard eines Motorola moto e6 entsprechen. [7]
Wenn unsere Websites auf solchen Endgeräten nicht vernünftig nutzbar sind, grenzen wir einen Großteil potenzieller Kund:innen und Nutzer:innen aus.
Eine Website, die nicht online ist, verdient kein Geld. Eine Möglichkeit, deine Website nachhaltiger zu gestalten, ist die Verwendung von CDNs, um so die Distanz zu deinen Nutzer:innen zu reduzieren.
CDNs, statische Webtechnologien und Offline-Funktionalitäten einer Website helfen, diese robuster und verfügbarer zu machen.
Nachhaltiges Webdesign wirkt sich auch positiv auf dein Hosting bzw. dessen Kosten aus.
Neben Green Hosting, also Hosting mit grünem Strom aus erneuerbaren Energien, bedeuten weniger Seitenaufrufe durch eine hervorragende Nutzerführung und insgesamt weniger Datenübertragung auch, dass deine Server weniger Arbeit zu erledigen haben.
So kann deine Website gleichzeitig etwas Gutes für die Umwelt und deinen Geldbeutel tun.
Du siehst, es gibt auch einige Argumente aus der Business-Perspektive, warum eine umweltfreundliche Website Vorteile für dich und deine Unternehmung bereithält.
💡 Zur Erinnerung: Es geht NICHT um den absoluten Verzicht. Nachhaltig oder nachhaltiger bedeutet NICHT, dass deine Website ab morgen schwarz/weiß, nur aus Text und aus maximal 10 Unterseiten bestehen darf!
Prinzipien und Merkmale von nachhaltigem Webdesign und Websites
Was sind die Grundsätze nachhaltigen Webdesigns und wodurch lassen sich nachhaltige Websites kennzeichnen?
Dafür gibt es unter anderem das Sustainable Web Manifesto.
Hier werden 6 Prinzipien vorgestellt, die ein nachhaltiges Web ausmachen.
Die Prinzipien für ein nachhaltiges Web kann man sich auch als Säulen vorstellen, die die Basis für nachhaltiges Webdesign darstellen:
💡 Durch die Prinzipien des Sustainable Web Manifesto ergeben sich unter anderem folgende Aspekte, die nachhaltiges Webdesign und nachhaltige Websites auszeichnen:
- Green Hosting – hier muss man vorsichtig sein, weil Green Hosting keine eindeutige Definition hat!
- Technische Effizienz, d.h. es wird nur das an Daten übertragen, was auch gebraucht wird, Caching verwendet, Lazy Loading bei Bildern below-the-fold wird eingesetzt, etc.
- Design-Effizienz, d.h. es wird auf Design-Elemente verzichtet, die keinen Mehrwert bieten
- Es wird nur getrackt, was wir auch brauchen und verwenden
- Vermeidung doppelter und unnötiger Inhalte, da diese 24/7/365 Tage im Jahr abrufbar sind
- Gute Ladezeiten, die mit technischer Effizienz und Design-Effizienz einhergehen
Es gibt viele weitere Faktoren, die man heranziehen könnte. Für mich sind die oben genannten am relevantesten.
Wie angemerkt: Nachhaltigkeit bedeutet nicht, dass alles zu Gunsten der Umwelt getan wird, weil auch unsere heutigen Bedürfnisse befriedigt werden sollen.
Die Prinzipien des Sustainable Web Manifesto unterscheiden sich nicht viel von den ökologischen Aspekten der Nachhaltigkeit.
Es geht darum, Ressourcen schonend und durchdacht einzusetzen, deren Verbrauch insgesamt zu minimieren sowie regenerative Energien zu verwenden und zu fördern.
Die Ökonomie und soziale Dimension dürfen dabei nicht ausgeblendet werden. Wie beschrieben: Eine nachhaltige Website unterstützt dich auch dabei, langfristig am Markt zu bestehen.
Wie du den CO2-Ausstoß deiner Websites reduzieren kannst
Viele der genannten Punkte zahlen bereits auf einen der folgenden Punkte ein. Die Maßnahmen für nachhaltiges Webdesign lassen sich in 3 Kategorien einteilen:
- Vermeidung und Reduktion
- Substitution
- Kompensation
Die Maßnahmen sind ähnlich wie die Waste Hierarchy (= Abfallhierarchie) zu verstehen.
Quelle: Eigene Darstellung in Anlehnung an https://ec.europa.eu/environment/green-growth/waste-prevention-and-management/index_en.htm
💡 Es geht hier dann nicht um Müll, sondern um Daten. Es ist am wichtigsten, Daten zu vermeiden oder zu reduzieren. Der nächste Schritt ist die Substitution und zuletzt sollte man über Kompensation nachdenken.
1. Vermeidung und Reduktion
Was nicht gespeichert und abrufbar sein muss, kann auch keinen Strom verbrauchen und damit kein CO2 ausstoßen.
Die meisten Maßnahmen auf der eigenen Website fallen in diese Kategorie.
💡 Durch die Vermeidung und Reduzierung des Datenverbrauchs hat man auf der einen Seite den größten Hebel, der gleichzeitig aber auch den größten Aufwand bedeutet.
Es ist nicht einfach, gerade mal HTML, CSS und JavaScript deiner Seite auf den Kopf zu stellen oder dein Tracking-Setup über Nacht von GA4 auf bspw. Matomo (mehr Datenschutz) oder Plausible Analytics (minimalistisch) umzustellen.
In der Regel hängen in einem Unternehmen verschiedene Abteilungen an diesen Themen. Für die Umsetzung benötigt man Ressourcen und Unterstützung.
Was sicherlich empfehlenswert ist: Nachhaltigkeit beim nächsten Launch bzw. Relaunch von Anfang an mitdenken und berücksichtigen. Das macht es viel einfacher!
Ein Tool was dabei unter anderem helfen kann ist der Performance Budget Calculator.
Erinnerung: Niedrige Ladezeit = umweltfreundlicher, weil weniger Daten übermittelt werden müssen.
Für eine ausgewählte Internetgeschwindigkeit kannst du eine Ladezeit festlegen, so dass du am Ende Richtwerte für dein HTML, CSS, JavaScript, Bilder, Videos und Fonts erhältst.
Im gezeigten Beispiel habe ich eine langsame 3G-Verbindung und eine Ladezeit von maximal 5,0 Sekunden angegeben. So kannst du schon vorher planen, wie groß die jeweiligen Einzelteile deines Budgets am Ende sein dürfen.
Du hast auch die Möglichkeit, an den Reglern herumzuspielen und siehst dann direkt, um wie viel Prozent du dein Budget sprengst.
2. Substitution
Der nächste Schritt in der Kette ist die Substitution. Damit ist in Bezug auf Websites gemeint, dass man von herkömmlichem Strom auf Ökostrom umsteigt bzw. ein Green Hosting verwendet.
Strom aus nicht-erneuerbaren Energien hat eine vernichtende CO2-Bilanz. [8]
Meiner Meinung nach ist richtiges Green Hosting ein wichtiger Schritt für ein nachhaltiges Web.
Leider gibt es wie gesagt keine eindeutige Klassifizierung, ab wann etwas als Green Hosting zählt. Du kannst das aber für dich selbst festlegen!
Suche dir einen Anbieter, der Green Hosting anbietet, und beschäftige dich mit dem Angebot. Bei Fragen solltest du dich auf jeden Fall an den Anbieter wenden.
Einige “schwarze Schafe” sprechen von Green Hosting bei einem Einsatz von genau 51% Ökostrom. Eine andere Definition könnte womöglich sein, dass es mindestens 70% sein müssen. Andere von 100%.
Man muss genau hinschauen!
Neue Technologien bieten oft Fettnäpfchen, wenn es um Nachhaltigkeit geht. Ein neues Smartphone verbraucht nämlich ganze 80-90% der CO2-Emissionen bei der Herstellung, dagegen nur 10% bei der Nutzung.
Ein jedoch besonders positives Beispiel ist die Datenübertragung über Glasfaser statt Kupfer oder 3G für den Datentransfer.
Quelle: Eigene Darstellung in Anlehnung an https://www.thm.de/site/hochschule/campus/aktuelles/aus-lehre-und-forschung/glasfaser-fuer-den-klimaschutz.html
Glasfaser verbraucht im Durchschnitt nur halb so viel Strom wie eine Kupferverbindung.
3. Kompensation
Es ist unmöglich, alle Emissionen zu verhindern bzw. reduzieren und/oder zu substituieren. Du hast keine Kontrolle darüber, ob eine Website, die du aufsuchst, ein Green Hosting verwendet oder nachhaltiges Webdesign einsetzt, um der Umwelt einen Gefallen zu tun.
Was du proaktiv aber machen kannst sind Kompensationszahlungen, die CO2-Emissionen bspw. durch das Pflanzen von Bäumen ausgleichen sollen.
Es gibt unterschiedliche Anbieter und Projekte, die Kompensationszahlungen anbieten. Darunter z.B. ForTomorrow.
ForTomorrow pflanzt nicht nur Bäume, wie es viele andere Kompensationsunternehmen machen, sie kaufen sogar Emissionsrechte auf. Dadurch werden CO2-Emittente gezwungen, ihre Emissionen zu reduzieren.
Ein weiteres Thema beim Green Hosting und regenerativen Energien ist die Frage, ob es sich wirklich um
- erneuerbare Energie, die hergestellt wird,
- Renewable Energy Certificates (REC) oder
- Carbon Offset Certificates (COC) handelt.
✍️ REC = es wird eine Megawattstunde (MWh) Strom aus erneuerbaren Energien in das Stromnetz eingespeist. Dieser Strom kann allerdings auch aus Drittländern und anderen Stromnetzen kommen
✍️ COC = Emissionen, die das Rechenzentrum mit konventionellem Strom verursacht, werden durch das Kaufen von Offsets kompensiert. Einfach gesagt: Ich bezahle jemanden, seinen/ihren CO2-Ausstoß zu reduzieren.Green Hosting und Ökostrom sind also keine einfachen Themen. Idealerweise verfügt der Anbieter der Wahl über eigene, selbst hergestellte erneuerbare Energie und kauft keine REC Credits oder Carbon Offsets.
Kompensation ist in der Kette der letzte Punkt, den du in Erwägung ziehen solltest.
Ein großes Problem der Kompensation liegt darin, dass z.B. die gepflanzten Bäume erstmal wachsen müssen, um potenzielle CO2-Emissionen ausgleichen zu können.
Und wir wissen: Ein Baum wächst nicht über Nacht.
Hinweis: Die Klassifizierung in Reduktion, Substitution und Kompensation kenne ich von Prof. Dr. Torsten Beyer, Experte für Web-Nachhaltigkeit. Folge ihm gerne auf LinkedIn!
Best Practices für nachhaltiges Webdesign
Was du dich jetzt vielleicht fragst ist, wie du deine Website nachhaltiger machen kannst?
💡 Hier sollten vor allem folgende Punkte berücksichtigt werden:
- Bilder
- Fonts
- Videos
- HTML, CSS und JavaScript
- Externe Inhalte (Tracking Scripts, Consent Banner, etc.
Bilder
Bilder werden deutlich häufiger als Videos auf Websites eingebunden. Der durchschnittliche Seitenaufruf lädt insgesamt ca. 2,0 bis 2,4 Megabyte herunter. Bilder machen davon im Durchschnitt 1,0 Megabyte, also ca. 42-50% aus.
Bildoptimierungen stellen damit in den meisten Fällen einen sehr großen Hebel dar.
Sinnvolle Überlegungen zur Bildoptimierung sind folgende:
- Brauche ich überhaupt ein Bild?
- Ist das Bild dafür gut geeignet?*
- Wie groß wird das Bild dargestellt?
💡 Ein Bild ist dann gut, wenn es den Inhalt sinnvoll unterstützt. Bspw. weil du den Inhalt visuell deutlich besser erklären kannst oder emotional aufladen möchtest. Setze Bilder nicht ein, “weil man das so macht”.
✍️ Bilder und Texte, die die gleiche Aussage kommunizieren, verstärken sich gegenseitig. Das nennt man den Picture Superiority Effect.
Wenn du diese Fragen sinnvoll beantwortet hast und jetzt aktiv werden möchtest, kümmere dich vor allem um folgende Dinge:
- Skaliere dein Bild richtig, also lade es nur so groß hoch, wie es maximal dargestellt wird
- Nutze adäquate Bild-Kompression um die Dateigröße deines Bildes ohne Qualitätsverlust kleiner zu rechnen
- Setze auf moderne Bildformate wie webp und avif
- Wenn es möglich ist, nutze svg bzw. Vektordateien
- Lade ein Bild nicht mehrmals hoch, sondern verwerte es wieder (Reusing)
- Verwende weniger Farben, wenn möglich
Moderne Bildformate wie webp und avif können von immer mehr Browsern genutzt werden. webp wird mittlerweile von fast 96% aller Browser unterstützt, avif schafft es inzwischen auf fast 82%. [9]
Hier siehst du ein Beispiel, was für einen Unterschied eine korrekte Bildoptimierung ausmachen kann. Das Originalbild war 6,01mb groß.
Durch den Einsatz einer Skalierung (hier auf 1200x800px), in der das Bild z.B. maximal dargestellt wird, erreicht man bereits eine Reduzierung um über 80% der ursprünglichen Dateigröße.
Wenn dann noch webp und Kompression eingesetzt werden, verkleinert sich das Bild nochmal deutlich, sodass eine Gesamtersparnis von 98% erzielt werden kann.
Fonts
Fonts verursachen in der Regel einen deutlich kleineren Anteil an Datenmenge als Bilder, sind aus meiner Sicht aber oft eine Low-Hanging-Fruit.
Drei Dinge, die du auf jeden Fall machen kannst:
- Binde deine Fonts lokal ein bzw. hoste sie selbst
- Verwende weniger Schriftarten und Schriftschnitte
- Nutze das WOFF2-Format
Indem du die Fonts selbst hostest, reduzierst du lange Übertragungswege. Jede zusätzliche Schriftart bzw. Schriftschnitt lädt in der Regel eine zusätzliche Datei.
Inzwischen kannst du auch Variable Fonts einsetzen, die quasi alle Schriftschnitte in einer Datei vereinen. Diese sind insgesamt kleiner als alle Schriftschnitte, einzeln aber größer als wenn du nur 1-2 Fonts bzw. Schriftschnitte einbindest.
In der Regel sollten 1 bis 4 Font-Dateien auf jeden Fall ausreichen.
So wie du Bilder durch webp und avif komprimierst, so kannst du Fonts mit dem korrekten Format ebenfalls komprimieren.
Ein Tool, mit dem du das gut machen kannst, ist von Everything Fonts: Der tff to woff2 converter.
Die Königsklasse in der Font-Optimierung ist das sogenannte Subsetting.
💡 Subsetting bedeutet, dass du ungenutzte Schriftzeichen und Symbole aus einem Font entfernst. Von über 2.000 Zeichen brauchst du am Ende vielleicht nur 100.
Das ist, finde ich, ein Paradebeispiel dafür, dass Nachhaltigkeit in vielen Fällen nichts mit Verzicht zu tun haben muss.
Das Endergebnis ist identisch, die CO2-Emissionen aber DEUTLICH geringer und das mit nahezu 0 Mehraufwand.
Die folgende Tabelle zeigt beispielhaft die Einsparpotenziale mit Subsetting. Als Einstellungen habe ich hier Basic Latin und Currency Symbols eingestellt. Das sollte in der Regel für englischsprachige Websites ausreichen. Deutschsprachige Websites brauchen mindestens noch die Umlaute!
Wenn du neben dem Subsetting auch Kompression anwendest, kannst du nochmal deutlich mehr rausholen!
Wendest du Subsetting und Kompression an, holst du nochmal deutlich mehr heraus.
Der einfachste Weg Emissionen bei Schriften zu minimieren ist auf System Fonts bzw. Systemschriften zurückzugreifen. Diese sind auf einem Gerät bereits installiert, daher braucht es keine Datenübertragung.
Beispiele für Systemschriften sind Arial, Verdana und Times New Roman. Kurz vor Veröffentlichung des Beitrags habe ich noch Montserrat genutzt und bin jetzt auf Verdana umgestiegen, so dass hier nochmals Einsparungen erzielt werden.
Videos
Auf Videos möchte ich nur kurz eingehen. Im Vergleich zu Bildern werden Videos (noch) seltener auf Websites eingesetzt. Ein großer Teil des Videokonsums findet auch eher auf Streaming-Plattformen wie Netflix und YouTube als Videosuchmaschine statt.
Wenn Videos auf einer Website eingebunden werden, solltest du aber vor allem auf folgende Dinge achten:
- Videos sollten niemals automatisch abgespielt werden
- Auf Mobile würde ich den Einsatz von Videos, z.B. im Header-Bereich, generell überdenken
- Nutzende sollten immer die Kontrolle haben und entscheiden, ob ein Video geladen werden soll oder nicht – zeige dafür ein Thumbnail bzw. Platzhalter an
- Stelle unterschiedliche Qualitätsstufen bereit
- Videodateien sollten wie Bilder optimiert werden
HTML, CSS und Javascript
Der HTML-Code ist in der Regel der kleinste Hebel der drei Sprachen. Nichtsdestotrotz kannst du auch hier oft Einsparpotenziale abrufen.
Beim CSS und JS kannst du in der Regel etwas mehr rausholen.
Dinge, auf die du bei HTML, CSS und JS achten kannst, sind unter anderem:
- Kurze Bezeichnungen für Klassen zu verwenden
- Relative statt absolute Pfade anzugeben
- Kommentare, Leerzeichen, etc. zu löschen*
- Minifizierung von CSS und JavaScript*
- Inline CSS und JS in externe Dateien auszulagern**
- Insgesamt weniger Styling zu verwenden und Klassen bzw. Styling wiederzuverwenden (Reusing)**
💡 * Du kannst bei deinem Code mit einer Variante arbeiten, die maschinenlesbar ist, und eine, die für Menschen geschrieben ist.
💡 ** Es hilft nicht, wenn du eine riesige CSS- oder JS-Datei hast. Achte auf ein gesundes Maß und du wirst vermutlich keine Probleme bekommen.
Externe Inhalte
Damit sind vor allem Tracking, Cookie Consent Banner und iframes gemeint.
💡 Das Sammeln von Nutzerdaten ist weder ein reines Datenschutz-Thema noch eine ethische Frage.
Die Skripte dafür müssen geladen werden und die Daten haben einen Speicherort. Wenn du diese Daten nicht nutzt, verschwendest du deine eigenen Ressourcen und die deiner Nutzer:innen.
Dein Page Speed wird schlechter.
Im Zweifel kommst du mit viel weniger Daten aus, als es jetzt der Fall ist. Im Best Case kannst du sogar vollständig auf einen Cookie Banner verzichten, wodurch ein weiteres Skript weniger ausgeführt werden muss.
Und dann gibt es ja auch noch den Google Tag Manager, den du dir vielleicht auch sparen könntest.
Bei Tracking-Tools lohnt es sich auch über Alternativen zu Google Analytics, dem Platzhirsch, nachzudenken.
Es gibt unter anderem einige, die entweder datenschutzfreundlicher (Matomo) und/oder minimalistischer (Plausible) sind und sich auf das Wesentliche beschränken.
Matomo schätzt die Dateigröße von Google Analytics deutlich größer ein (ca. 46kb). Die Lösung aus Google Tag Manager + Google Analytics ist aber auch mit den in der Tabelle abgebildeten Daten ca. 45x so groß wie die von Plausible.
Wenn zusätzlich ein Cookie Banner geladen wird, ist das nochmal deutlich mehr.
Stelle dir also am besten folgende Fragen:
- Brauchst du ein Tracking-Tool?
- Welche Anforderungen hast du an ein Tracking-Tool?
- Welche Erkenntnisse möchtest du aus deinem Tracking-Tool gewinnen?
- Nutzt du dein aktuelles Tracking-Tool und die Funktionen vollständig aus?
90% aller Daten werden nach ihrer Speicherung nicht einmal in 90 Tagen aufgerufen. 80% aller digitalen Daten werden nie wieder aufgerufen oder genutzt. [10]
Wir sammeln erstmal alles, denn vielleicht brauchen wir die Daten noch …
Wir sehen schließlich den Müllhaufen nicht wie damals, als unsere Büros übergequollen sind.
CO2-Emissionen deiner Website messen
Die tatsächliche Bestimmung der CO2-Emissionen einer Website ist nahezu unmöglich. Was aber sehr gut möglich ist, ist eine Annäherung.
Was beeinflusst die CO2-Emissionen?
1) Die übertragene Datenmenge und
2) die Kohlenstoffintensität (= CO2-Intensität) des erzeugten Stroms.
Punkt 1 ist relativ selbsterklärend. Weniger übertragene Daten = weniger CO2-Emissionen.
Punkt 2 beschreibt, wie viel CO2 bei der Stromerzeugung bestimmter Energien ausgestoßen wird.
Quelle: Eigene Darstellung in Anlehnung an https://www.ipcc.ch/site/assets/uploads/2018/03/Annex-II-Methodology-1.pdf
Kohle und Öl sind dabei das Schlusslicht. Wasserkraft, Meeresenergie und Windkraft sind für die Umwelt am schonendsten.
Wie zuvor beschrieben ist es als Einzelperson nicht möglich, die gesamte Prozesskette im Web nachhaltig zu gestalten. Was aber möglich ist: Du suchst dir einen Hoster aus, der unter anderem auf regenerative Energien setzt.
Zusätzlich schaust du dir vielleicht auf der Eletricity Map von Tomorrow mal an, wie CO2-intensiv unterschiedliche Länder sind.
Deutschland kommt dabei deutlich schlechter weg als Frankreich.
💡 Der Wert gCO2eq/kwH steht für Emissionen in Gramm CO2 pro Kilowattstunde.
Wir sollten aber nicht nur nach der Kohlenstoffintensität gehen, sondern z.B. auch die Distanz berücksichtigen, die die Daten bis zu den Nutzer:innen zurücklegen.
Bzgl. der übertragenen Datenmenge sollte auch Caching eingesetzt werden. Es ist möglich, dass eine Seite bei Erstbesuchen relativ viel CO2 ausschüttet, die Ausschüttungen sich aber bei erneuten Besuchen in Grenzen halten.
Daher geht es nicht nur um den Erstbesuch, sondern auch um Wiederholungsbesuche.
💡 Worauf kommt es also an?
- Übertragene Datenmenge
- Geschätzte CO2-Emissionen pro Seitenaufruf
- Übertragene Datenmenge bei wiederholtem Seitenaufruf
- Geschätzte CO2-Emissionen pro wiederholtem Seitenaufruf
Anstatt dir jetzt eine super lange und ungefilterte Liste an Tools um die Ohren zu schmeißen, schauen wir uns gemeinsam die drei aus meiner Sicht nützlichsten Tools gemeinsam an.
- Website Carbon Calculator
- (Digital) Beacon
- Ecograder
1. Website Carbon Calculator
Der Klassiker unter den Web Sustainability Tools.
Du erfährst unter anderem, wie sich deine Website im Vergleich zu allen anderen getesteten Seiten verhält, wie viel CO2 ein Seitenaufruf ausstößt und ob du Green Hosting einsetzt.
Bei dem Thema Green Hosting solltest du wie gesagt aufpassen.
Wenn du etwas scrollst bekommst du auch noch Abschätzungen, wie viel CO2 deine Website im Jahr mit einer bestimmten Anzahl Seitenaufrufen wohl verbrauchen würde.
Um einen ersten Eindruck zu gewinnen finde ich das Tool sehr gut geeignet. Es ist leicht verständlich und überfordert nicht mit unmengen Informationen.
Zusätzlich werden ein paar einfache Tipps genannt, wie du deine Website nachhaltiger machen kannst.
Hier gelangst du zum Website Carbon Calculator.
2. Digital Beacon
Beacon bzw. Digital Beacon geht noch einen Schritt weiter. Hier bekommst du auch Informationen zu den angesprochenen wiederholten Seitenaufrufen und der damit übermittelten Datenmenge bzw. geschätzten CO2-Emissionen.
Auch hier hast du die Möglichkeit durch eigene Informationen deines Tracking-Tools oder Server Log Files den CO2-Verbrauch deiner Website besser abschätzen zu können.
Neben Seitenaufrufen kann hier auch das Verhältnis New und Return Visits festgelegt werden.
Was ich auch sehr hilfreich finde, ist die Aufschlüsselung der auf deiner Seite verwendeten Datentypen. Hier kannst du unter anderem sehen
- wie viele Requests es jeweils gab
- wie hoch die Datenmenge ist, die dadurch übertragen wurde und
- wie viel CO2 der jeweilige Datentyp bei einem Seitenaufruf verbraucht.
Außerdem bekommst du eine History deiner Website angezeigt. Wenn du sie heute testest und Optimierungen vornimmst, kannst du bei deinem nächsten Test also direkt sehen, wie sich deine Optimierungen auf das Endergebnis auswirken.
Damit du weißt, wie deine Ergebnisse zu interpretieren sind, stellt Beacon auch eine Übersicht zur Verfügung.
Die 1g Marke ist bei den CO2-Emissionen pro Seitenaufruf ein guter bzw. akzeptabler Wert. Spätestens wenn du dich im roten Bereich befindest, solltest du also mal schauen, wo du ansetzen kannst um deine Website nachhaltiger zu machen.
Leider sind mir schon viele Websites begegnet, die weit jenseits des Schwellwertes für ein schlechtes Ergebnis liegen.
Persönlich nutze ich Beacon am liebsten. Am 24.05.2023 wurde zudem das Verfahren zur Berechnung aktualisiert und soll jetzt deutlich genauer sein als zuvor.
Über den Link gelangst du zu Beacon.
3. Ecograder
Ebenfalls empfehlenswert finde ich Ecograder.
Du erhälst neben Informationen zum “Gewicht deiner Seite” auch wie du dieses reduzieren oder deine UX verbessern kannst.
Auch Ecograder versucht, dir den Verbrauch etwas greifbarer zu machen, indem die Datenmenge in ihre “Einzelteile” zerlegt wird.
Wenn du dich mit den Empfehlungen zur Verbesserung deiner Website auseinandersetzt, merkst du vielleicht, dass Ecograder unter anderem auf Google Lighthouse und entsprechende Metriken zurückgreift.
Für meine Website gibt es, was Nachhaltigkeit angeht, keine extrem großen Potenziale mehr. Nach dem Pareto-Prinzip geht es jetzt eher noch um die letzten (<) 20%.
Eine Sache, die mir von den bisher vorgestellten Tools nur Ecograder gesagt hat, ist, dass ich bei diversen Bildern keine expliziten Breiten- und Höhenangaben gesetzt habe. Das wusste ich zwar schon, ist aber als Hinweis trotzdem nett.
Das Problem habe ich bereits mit der CSS Property aspect-ratio gelöst.
Probiere EcoGrader gerne auch mal aus.
💡 Welches Tool solltest du wann verwenden?
- Für einen ersten Blick empfehle ich dir den Website Carbon Calculator.
- Wenn du weißt, wie du deine Website nachhaltiger machen kannst, würde ich in den meisten Fällen Beacon nutzen.
- Für die größte Informationsdichte und konkrete Empfehlungen solltest du Ecograder einsetzen.
Es spricht aber auch nichts dagegen, alle 3 Tools für ein kleines Audit einer Website zu verwenden, um die CO2-Emissionen und andere Faktoren einzuschätzen.
Tools für nachhaltiges Webdesign
Abseits der Messung von CO2-Emissionen gibt es weitere Tools, die dir dabei helfen können, deine Website nachhaltiger zu machen bzw. einen Status-Quo zu erheben.
The Green Web Foundation Green Web Check
Mit dem Green Web Check kannst du relativ unkompliziert prüfen, ob deine Seite Green Hosting verwendet oder nicht.
Es gibt auch ein Verzeichnis von grünen Hosting-Anbietern, in dem du nachschlagen kannst.
Zur Erinnerung: Green Hosting ≠ Green Hosting. Prüfe selbst, ob der Anbieter wirklich grün unterwegs ist!
Als webflow User habe ich leider keinen Einfluss auf das Hosting bei webflow. Es ist zwar grün und was ich so gelesen habe hört sich auch gut an. Irland ist aber ein relativ kohlenstoffintensives Land, daher nicht 100% optimal.
Are My Third Parties Green
Der Name Are My Third Parties Green ist Programm. Hier kannst du prüfen, ob deine Drittanbieter-Inhalte Green Hosting verwenden oder nicht.
Bei meiner webflow-Seite habe ich nur bei 1/10 Requests Einfluss, ob diese Green Hosting verwenden oder nicht. Der Rest sind Anfragen, die webflow automatisch generiert, um z.B. die Bilder möglichst schnell vom CDN auszuliefern.
Wenigstens ist Plausible Analytics (scheinbar) grün gehostet.
Performance Budget
Das Tool Performance Budget habe ich dir bereits kurz vorgestellt. Hiermit kannst du für eine bestimmte Internetgeschwindigkeit eine akzeptable Ladezeit definieren und bekommst dann ein Ressourcenbudget ausgegeben, das angibt, wie groß deine unterschiedlichen Datentypen sein dürfen.
💡 Besonders interessant wird es, wenn du diese Daten mit dem aktuellen Status-Quo deiner Website abgleichst (z.B. durch die Messung in Digital Beacon).
So bekommst du ein Gefühl dafür, wie viel Prozent du möglicherweise rausholen musst, um bestimmte Schwellwerte zu erreichen.
Cloudinary Website Image Analysis Tool
Mit diesem Tool von Cloudinary kannst du deine Seite analysieren und dir ausgeben lassen, wie viel Einsparungspotenziale du bei den von dir verwendeten Bildern hast.
Auch bei meiner Seite gibt es kleine Verbesserungspotenziale. webp, Kompression und Bilderskalierung setze ich schon um. Was ich z.B. noch nicht mache, ist die Verwendung von avif.
webflow bietet nicht die Möglichkeit, Bilder im CMS nachträglich in webp oder avif umzuwandeln und avif wird aktuell noch nicht unterstützt.
💡 Das Beste an diesem Tool ist, dass du nicht nur siehst, welche Bilder welches Einsparungspotenzial bieten, sondern du die optimierten Bilder direkt herunterladen kannst.
Bildkompression und -konvertierung
Hierfür gibt es unzählige Tools, die dir dein Bild in webp oder avif umwandeln können. Ich verwende z.B. cloudconvert.
Damit kannst du quasi jedes Bildformat in ein anderes Bildformat umwandeln.
Noch besser geht das aber mit Compress-or-Die. Hier kannst du dein Bild direkt umwandeln und es dann komprimieren lassen.
Wenn du ein paar einzelne Bilder (maximal 20, die je maximal 5mb groß sein dürfen) schnell komprimieren möchtest, kannst du dir auch mal TinyPNG anschauen.
Wie du hier im Beispiel sehen kannst, konnte ich die Dateigröße schnell und einfach um 50% reduzieren, ohne spürbaren Qualitätsverlust.
Insgesamt empfinde ich Compress-or-Die aber als das nützlichste Tool, weil es alle notwendigen Schritte konsolidiert.
Font Compression und Font Subsetting
Fonts kannst du wie beschrieben durch Subsetting und Kompression optimieren.
Dafür kannst du folgende Tools verwenden:
- Font Squirrel Webfont Generator oder Font Subsetter
- ttf to woff2 converter oder TTF to WOFF2 Converter
Erst solltest du das Subsetting vornehmen und danach die Komprimierung. Mit dem Tool von Font Squirrel kannst du beide Schritte in einem vornehmen.
Die Einsparpotenziale liegen insgesamt bei über 90%.
💡 Beim Subsetting und der Komprimierung ist es wichtig, dass du die entsprechende Lizenz für den Font besitzt, wenn du diesen veränderst und auf deiner Website hochlädst. Du darfst nicht jeden Font einfach beliebig verändern!
HTTP Archive
HTTP Archive ist streng genommen eigentlich kein Tool, sondern eine Datenbasis.
The HTTP Archive Tracks How the Web is Built.
Auf der Startseite wird perfekt beschrieben, was auf dieser Website passiert. Es wird erfasst, wie das Web gebaut ist und stellt dafür eine Historie zur Verfügung.
Ein paar Beispiele zur Historie von Bildern habe ich dir am Anfang des Artikels bereits gezeigt.
Du kannst hier einen guten Maßstab für dich und deine Website ableiten und dich über die Zeit informieren, wie sich das Internet weiterentwickelt.
What Does My Site Cost?
What Does My Site Cost (WDMSC) hilft dir nachzuvollziehen, wie teuer ein Seitenaufruf deiner Website im mobilen Netz in unterschiedlichen Ländern ist.
Eine besonders ressourcenintensive Seite schließt bestimmte Nutzer:innen aus oder macht die Nutzung besonders kostenintensiv.
Vielleicht schaust du mal rein und prüfst, wie deine Seite abschneidet?
Zusammenfassung: Nachhaltiges Webdesign ist gut für uns alle
FAQ zu nachhaltigem Webdesign
Nachhaltiges Webdesign ist die Gestaltung von Weberfahrungen, die Menschen der Gegenwart begeistern und die Möglichkeiten zukünftiger Generationen nicht einschränken.
Eine nachhaltige Website hilft dir, die Nutzererfahrung, Barrierefreiheit, Suchmaschinenoptimierung und vieles mehr zu verbessern. So tust du der Umwelt und deinem Geldbeutel einen Gefallen.
Am besten benutzt du eins der vorgeschlagenen Tools. Es gibt unter anderem den Website Carbon Calculator, Digital Beacon und den Eco Grader.
Quellen (in nummerierter Reihenfolge)
- Nachhaltigkeit (nachhaltige Entwicklung) (https://www.bmz.de/de/service/lexikon/nachhaltigkeit-nachhaltige-entwicklung-14700)
- Webdesign (https://de.wikipedia.org/wiki/Webdesign)
- The real climate and transformative impact of ICT: A critique of estimates, trends, and regulations (https://www.sciencedirect.com/science/article/pii/S2666389921001884)
- EDGAR - Emissions Database for Global Atmospheric Research (https://edgar.jrc.ec.europa.eu/)
- 90.63% of Content Gets No Traffic From Google. And How to Be in the Other 9.37% [New Research for 2020] (https://ahrefs.com/blog/search-traffic-study/)
- World Wide Waste - Gerry McGovern (2020)
- Tom Greenwood: A sustainable web for everyone (https://www.youtube.com/watch?v=ebxeXqjesOo&t=)
- Renewable Energy Sources and Climate Change Mitigation (https://www.ipcc.ch/report/renewable-energy-sources-and-climate-change-mitigation/)
- Can I use _ ? (https://caniuse.com/)
- World Wide Waste - Gerry McGovern (2020)
More Articles
