Ökologisches Webdesign: Wie man eine nachhaltige Website entwickelt
Ökologisches Webdesign erkennt an, dass digitale Technologien und das Internet der Menschheit und unserem Planeten nicht nur nutzen, sondern auch schaden können. In diesem Artikel fassen wir das Konzept einer nachhaltigen Website zusammen und erklären, was es damit auf sich hat. Außerdem teilen wir praxisnahe Empfehlungen, um Ihre Webpages nachhaltiger zu machen.
Was ist eine nachhaltige Website?
Bei der Entwicklung nachhaltiger Websites geht es um die Zukunft der Menschheit und unseres Planeten, aber auch um langfristige Profitabilität. Nachhaltige Websites werden mit erneuerbaren Energien betrieben und sind effizient im Verbrauch. Sie dürfen nicht unethisch sein, niemanden ausnutzen und sie müssen (Mehr-)Werte schaffen.
Warum sollten Websites nachhaltig sein?
Das Internet und digitale Technologien waren in 2018 für 3,7% der Treibhausgasemissionen verantwortlich, so der Report „Lean ICT: Toward Digital Sobriety” von The Shift Project. Das ist vergleichbar mit der weltweiten Flugzeugindustrie.
Während es üblich geworden ist, dass sich die Presse und Nutzer in den sozialen Medien über die Inlandsflüge von Politikern empören, wird der Umweltbelastung durch das Internet wenig Beachtung geschenkt – trotz seines schnellen Wachstums.
Die Forschung hat prognostiziert, dass sich die 3,7% von 2018 bis 2025 verdoppeln werden. Tatsächlich ist von einer noch höheren Wachstumsrate auszugehen, jetzt wo COVID die Digitalisierung weiter beschleunigt.
Deshalb werden ökologische Websites gebraucht.
Eigenschaften einer nachhaltigen Website
Gemäß des Sustainable Web Manifesto hat eine nachhaltige Website folgende Eigenschaften:
Um zu verstehen, inwiefern diese Eigenschaften eine Website nachhaltiger machen, stellen wir das Manifesto einem anderen Framework gegenüber – dem Nachhaltigkeitsdreieck.
Das Nachhaltigkeitsdreieck
“Nachhaltige Entwicklung ist eine Entwicklung, die den Bedürfnissen heutiger Generationen Rechnung trägt, ohne die Möglichkeiten zukünftiger Generationen zu gefährden, ihren eigenen Bedürfnissen nachzukommen” (Brundtland, 1987). Nachhaltigkeit hat drei Eckpfeiler:
- Ökonomisch (Profit)
- Ökologisch (Planet)
- Sozial (Menschen)
Zusammen formen diese Eckpfeiler das Nachhaltigkeitsdreieck.
Überprüfung des Sustainable Web Manifesto
Die Eigenschaften im Sustainable Web Manifesto formen ein robustes Rahmenwerk, weil sie zielgerichtet sind und alles abdecken. Jede Eigenschaft bedient wenigstens 1 Eckpfeiler des Nachhaltigkeitsdreiecks, und jeder Eckpfeiler wird von wenigstens 2 Verpflichtungen im Manifesto adressiert.
1. Sauber
| Verpflichtung | „Die Dienste, die wir anbieten und die Dienste, die wir nutzen werden von erneuerbarer Energie betrieben.“ |
| Eckpfeiler | Ökologisch |
2. Effizient
| Verpflichtung | „Die Produkte und Dienstleistungen, die wir anbieten, werden so wenig Strom und materielle Ressourcen wie möglich verbrauchen.“ |
| Eckpfeiler | Ökonomisch, ökologisch |
3. Offen
| Verpflichtung | „Die Produkte und Dienstleistungen, die wir anbieten, werden leicht zugänglich sein, Raum für einen offenen Informationsaustausch geben und Nutzern die Kontrolle über ihre Daten belassen.“ |
| Eckpfeiler | Sozial |
4. Ehrlich
| Verpflichtung | „Die Produkte und Dienstleistungen, die wir anbieten, werden Nutzer weder täuschen noch ausbeuten – weder im Design noch im Content.“ |
| Eckpfeiler | Sozial |
5. Regenerativ
| Verpflichtung | „Die Produkte und Dienstleistungen, die wir anbieten, werden eine Wirtschaft unterstützen, die die Menschen und den Planeten ernährt.“ |
| Eckpfeiler | Ökonomisch, ökologisch, sozial |
6. Belastbar
| Verpflichtung | „Die Produkte und Dienstleistungen, die wir anbieten, werden funktionieren, wo und wenn sie am meisten gebraucht werden.“ |
| Eckpfeiler | Sozial |
Wie Sie die Treibhausgasemissionen Ihrer Website messen können
Nachhaltigkeit ist eine abstrakte Größe, die sich nicht so leicht messen und vergleichen lässt. Ein Weg, die Nachhaltigkeit wenigstens in Teilen zu quantifizieren, ist ein Blick auf die Treibhausgasemissionen Ihrer Website.
Treibhausgasemissionen können nur beschreiben, wie sauber (1.) und effizient (2.) Ihre Website ist. Über die anderen Eigenschaften, die im Sustainable Web Manifesto definiert sind, können sie keine Aussage treffen, da es sich dabei eher um qualitative und strategische Angelegenheiten handelt.
Sie können den folgenden Rechner benutzen, um die Treibhausgasemissionen Ihrer Homepage zu schätzen: Website Carbon Calculator.
Obwohl der Rechner einsatzfähige Daten liefert, sollten Sie folgende Limitationen bedenken:
- Die aktuelle Version (V2 in 2021) des Rechners erstellt nur Schätzungen für Ihre Homepage, nicht die gesamte Website. Lesen Sie mehr darüber, wie es funktioniert.
- Außerdem konzentriert sich der Rechner auf die Website-Nutzer, den Stromverbrauch der Rechenzentren usw. Die Treibhausgasemissionen im Zusammenhang mit der Website-Entwicklung und den eingesetzten Ressourcen werden nicht berücksichtigt.
- Der Website Carbon Calculator behält die Testergebnisse ziemlich lang in seinem Server-seitigen Cache. Wenn Sie Ihre Homepage testen, Optimierungsarbeiten umsetzen und anschließend wieder testen, kann es sein, dass Ihnen immer noch die Ergebnisse des ersten Tests angezeigt werden. Achten Sie auf den Hinweis „This page was last tested on [Datum]“. Im Zweifelsfall sollten Sie Ihre Homepage in ein paar Tagen erneut testen.
- Ihre Website ist vermutlich nicht die einzige, die der Nutzer besucht. Daher ist es wichtig, dass sie genug Mehrwert liefert, damit der Nutzer auf seiner Recherche vorankommt. Wenn sie das leistet, kann sie den Besuch anderer, womöglich weniger klimafreundlicher Websites reduzieren oder ganz unnötig machen.
- Damit Ihre Website wirklich nachhaltig ist, müssen Sie auch die Kriterien 3. – 6. im Manifesto erfüllen.
Wie Sie Ihre Website nachhaltiger machen können
Um eine Website zu entwickeln, die ökonomisch, ökologisch und sozial nachhaltig ist, empfehlen wir die folgenden Maßnahmen:
- Betreiben Sie Ihre Website mit Ökostrom
- Praktizieren Sie SEO und treffen Sie die Suchintention
- Optimierung von Bildern
- Optimierung von Videos
- Überprüfen Sie Ihre Plugins und Skripte
- Minimieren Sie den Cumulative Layout Shift
- Vereinfachen Sie Ihre Schriften
- Benutzen Sie rel=’preconnect’
- Implementieren Sie eine Caching-Strategie
- Benutzen Sie ein CDN
1. Betreiben Sie Ihre Website mit Ökostrom
Grüne Webhosting-Provider betreiben ihre Rechenzentren mit erneuerbarer Energie. In seinem Artikel auf utopia.de unterscheidet Chefredakteur Winter die Anbieter in zwei Qualitäten:
- Empfohlen: Provider, die angeben, wer ihr Ökostromlieferant ist, von einer empfehlenswerten Bezugsquelle einkaufen und sich auch darüber hinaus für Nachhaltigkeit einsetzen.
- Nicht empfohlen: Provider, die nicht angeben, woher sie ihren Ökostrom beziehen oder bei einem Anbieter einkaufen, der noch im Fossilenergiesektor involviert ist.
Entscheiden Sie sich für einen Provider mit einer zuverlässigen Uptime und einem guten Service. Anderenfalls wird Google Ihre Website aus dem Index nehmen. Provider die ganz oder teilweise mit renewable energy credits (RECs) operieren, sind besser ausgestattet, um das ganze Jahr über eine nahezu perfekte Uptime zu gewährleisten. Das liegt daran, dass sie notfalls auf Fossilenergie mit RECs wechseln können, wenn ihr Ökostrom-Anbieter einen Ausfall hat.
Sobald Ihre Website auf Ökostrom läuft, können Sie das mit einem Label von der Green Web Foundation kommunizieren.
2. Praktizieren Sie SEO und treffen Sie die Suchintention
Bei Suchmaschinenoptimierung ging es früher fast ausschließlich um Keywords. Vor ein paar Jahrzehnten sind SEO-Agenturen wie folgt vorgegangen:
- Identifikation eines Keywords wie “nachhaltige Website”,
- Erstellung eines Artikels, in dem das Keyword möglichst häufig vorkommt und
- Aufbau von Backlinks mit “nachhaltige Website“ im Ankertext.
Ein Teil davon ist bis heute gleichgeblieben. Allerdings hat sich Google als Suchmaschine stark weiterentwickelt. Es beschränkt sich nicht mehr auf Ergebnisse, bei denen Keywords syntaktisch mit den Suchbegriffen der Nutzer übereinstimmen. Stattdessen versteht es jetzt – auf einem semantischen Niveau – wonach der Nutzer sucht und zeigt Ergebnisse an, die die Suchintention erfüllen.
Warum ist SEO nachhaltig?
SEO ist ökonomisch nachhaltig, weil sie Firmen dabei hilft zu wachsen: langfristig und kosteneffizient. SEO ist sozial nachhaltig, weil sie Nutzern dabei hilft zu finden, wonach sie suchen. Und SEO ist ökologisch nachhaltig, weil sie die Notwendigkeit reduziert, andere, potenziell weniger klimafreundliche Websites zu besuchen.
Benutzen Sie Content Cluster und interne Verlinkungen
Indem Sie Ihren Content in Cluster organisieren, d.h. in einführenden Hub-Artikeln auf weiterführende, vertiefende Spoke-Artikel zu verlinken und umgekehrt, können Sie die sekundäre Suchintention Ihrer Nutzer erfüllen.
Während es bei der primären Suchintention darum geht, das unmittelbare Kernproblem des Nutzers zu lösen, bezieht sich die sekundäre Suchintention auf weiterführende Fragen, die erst bei der Recherche des Nutzers aufkommen.
Content Cluster und interne Verlinkungen können bei der Erfüllung der sekundären Suchintention mithelfen. Dies hebt die Notwendigkeit auf, in Google zurückzukehren und eine weitere Websuche durchzuführen.
Nur eine Einschränkung
Eine Website mit perfekter SEO wird viel Traffic generieren, der wiederum viel CO2 ausstößt. Allerdings: Die Nutzer suchen im Web nach Ergebnissen, mit oder ohne Ihre nachhaltige Website. Wenn Ihre „perfekte“ Website klimafreundlicher ist als andere und die einzige Website, die Nutzer in ihrer Recherche besuchen müssen, wird dies in der makroökologischen Betrachtung eine Menge CO2-Emissionen einsparen.
3. Optimierung von Bildern
Bilder, speziell wenn diese nicht optimiert sind, tragen erheblich zur Dateigröße Ihrer Website-Daten bei. Die Bereitstellung und der Download von Bildern kosten Strom und sind daher für einen bemerkenswerten Anteil an Website-Treibhausgasemissionen verantwortlich.
Setzen Sie weniger Bilder ein
Bevor Sie sich die Mühe machen, Ihre Bilder zu optimieren, prüfen Sie doch besser zuerst, ob es nicht vielleicht einige Bilder gibt, die ersatzlos entfernt werden können. Zum Beispiel könnte es dekorative Bilder geben, die auf Ihrer nachhaltigen Website nicht gebraucht werden. Oder redundante Bilder, die keinen Mehrwert generieren, weil sie zu ähnlich sind wie andere, bereits bestehende Bilder auf derselben Webpage.
Reduzieren Sie die Bildauflösung und -qualität
Es gibt verschiedene Wege, wie Sie Bilder verkleinern können. Eine schlanke Methode ohne ein nennenswertes technisches Setup ist die Nutzung von tinypng.com. Es handelt sich dabei um einen kostenfreien Online-Service für die Kompression von WebP, PNG und JPEG. Alternativ können Sie, wenn Sie Photoshop besitzen, die Option „für Web speichern“ einsetzen.
Wenn Ihre Website auf WordPress läuft und Sie Ihre klimafreundliche Bildoptimierung lieber innerhalb des CMS abwickeln möchten, können Sie WP Smush Pro kaufen. Das Plugin ermöglicht außerdem, „lazy loading“ auf einfache Art zu implementieren, damit Bilder außerhalb des Bildschirms erst später geladen werden und Ihre Webpages schneller laufen.
Aus Gesichtspunkten der sozialen Nachhaltigkeit empfiehlt es sich, Alt-Texte zu hinterlegen. Alt-Texte sind Bildbeschreibungen, die erscheinen, wenn Nutzer das Bild nicht sehen können. Zum Beispiel sind Nutzer mit Sehbehinderungen auf einen Screen Reader angewiesen, der den Alt-Text vorliest. Oder der Browser stellt den Alt-Text dar, wenn die Internetverbindung nicht gut genug ist, um das Bild zu laden.
Wählen Sie effiziente Dateiformate für Ihre nachhaltige Website
| Bildformat | Anwendungsfall |
| JPEG | Für Bilder und Grafiken mit komplexen Abstufungen. |
| PNG | Für Bilder mit teilweiser Transparenz. |
| GIF | Nutzen Sie GIF und setzen Sie CSS image sprites ein, um häufig wiederkehrende Elemente wie z.B. Logos oder Icons darzustellen. |
| SVG | Für Grafiken und Illustrationen mit einfachen Farben. Einschränkung: Alt-Texte werden von SVGs nicht unterstützt. Außerdem ist ein spezielles Setup nötig, damit SVGs in WordPress laufen (ein Artikel dazu folgt bald). |
4. Optimierung von Videos
Es gibt eine Menge widersprüchliche Informationen über den CO2-Fußabdruck von Video-Streaming. Es erscheint aber naheliegend, dass die meisten Videos eine höhere Dateigröße haben als Bilder, und deswegen eine wichtige Rolle in der nachhaltigen Website-Optimierung spielen.
Wenn auf Ihrer Website lange Videos bereitgestellt werden, empfehlen wir in der Regel Folgendes (Ausnahmen möglich): Betten Sie den Video-Content von einem Dienst wie YouTube (für öffentliche Videos) oder Wistia (für Videos hinter einem Login) ein.
Effizientes Video-Encoding ist keine leichte Aufgabe – besonders für Unternehmen, die keine Skaleneffekte oder Verbundvorteile in diesem Feld ausnutzen können.
Im Gegensatz dazu operiert Google zu 100% auf Ökostrom – nun schon seit 4 Jahren und mehr. Creating Shared Value auf Grundlage eines effizienten Video-Encodings ist Bestandteil von Wistias Geschäftsmodell sowie von ihrem selbstreflektierten Sustainability Statement.
5. Überprüfen Sie Ihre Plugins und Skripte
Wann haben Sie zum letzten Mal geprüft, ob alle Ihre Plugins und Skripte effizient sind, Ihrem Unternehmen oder Kunden einen Mehrwert bieten und keine Fehler oder Inkompatibilitäten aufweisen?
Beispiel: Wir haben eine Website geprüft, die Lead Forensics nutzt, um sicherzugehen, dass die gewünschte Zielgruppe erreicht wird. Es ist gut, selbstkritisch zu sein und die Effektivität der eigenen Marketing-Aktivitäten zu hinterfragen. Wenn dies allerdings Ihr einziger Motivator ist, Lead Forensics zu nutzen, dann ist die Schließung eines langfristigen Vertrags mit diesem Anbieter übertrieben – besonders wenn Ihr Unternehmen keine Kapazitäten hat, mit den Lead Analyse Daten auch effektiv weiterzuarbeiten.
Ein weiteres Beispiel: Die Website eines Kunden hatte ein Skript, welches Nutzer auf spezielle Sprachverzeichnisse weiterleitet, abhängig von ihrer GeoIP. In manchen Fällen führte dies nach etwa 5 Sekunden nach Start der Sitzung dazu, dass die Page in einer anderen Sprache neu geladen wurde. Viele Expats – ein wichtiges Zielgruppensegment in der Nische unseres Kunden – sind daraufhin abgesprungen.
Beide Beispiele zeigen, dass nachhaltige Website-Optimierung gleichzeitig Nutzer (sozial nachhaltig), Unternehmen (ökonomisch nachhaltig) und Treibhausgaseffizienz (ökologisch nachhaltig) bedienen kann.
Worauf warten Sie noch? Überprüfen Sie jetzt Ihre Plugins und Scripts, oder beauftragen Sie eine vertrauenswürdige Online Marketing Agentur mit der Umsetzung Ihrer klimafreundlichen Website-Optimierung.
6. Minimieren Sie den Cumulative Layout Shift
Cumulative Layout Shift (CLS) findet statt, wenn sich Layout-Elemente während des Ladevorgangs einer Website verschieben.
Typischerweise geschieht das, wenn Elemente mit einer langen Ladezeit über Elemente mit einer kürzeren Ladezeit platziert werden.
Die üblichen Verdächtigen schließen Bilder, eingebettete Elemente, Werbung und dynamisch eingeblendeten Content wie z.B. Kontaktformulare und Content-Discovery-Module ein („das könnte Sie auch interessieren“).
Nachhaltige Websites stellen sicher, dass die Dimensionen jedes relevanten Elements im Vorfeld genau definiert werden. Dazu wird das height and width attributes in CSS verwendet. Dadurch wird die Page Experience angenehmer, Ihre Sichtbarkeit in Google verbessert und jene Treibhausgasemissionen reduziert, die durch längere Ladezeiten und frustrierte Nutzer verursacht werden.
7. Vereinfachen Sie Ihre Schriften
Web Fonts sind beliebt im Marketing, weil sie einen positiven Einfluss auf die Nutzerbindung und das Branding haben können. Die Legibility (die Unterscheidbarkeit von Buchstaben / Schriftzeichen) und die Readability (der Lesefluss) sind wichtige Eigenschaften einer guten Web Font.
Allerdings müssen Web Fonts genau wie jede andere Datei auch heruntergeladen werden, damit sie korrekt dargestellt werden können. Die Umweltbelastung einer Nicht-System-Schrift in Form von Treibhausgasemissionen ist vergleichbar mit der eines kleinen Bildes.
Deshalb empfehlen wir unseren Kunden normalerweise, sich auf bis zu 2 Web Fonts für ihre nachhaltige Website zu beschränken. Sie können die meisten Webfonts optimieren, indem Sie sie komprimieren.
Tipp: Wenn Ihre Website auf WordPress läuft und Sie nicht vorhaben, Emotes einzusetzen, können Sie die Emotes und ihre Skripte in der functions.php deaktivieren.
