Klimafreundliche Websites planen und erstellen

Wie kann eine Website so geplant und erstellt werden, dass ihre Nutzung möglichst wenig Energie benötigt? Dass sie möglichst wenig zum Klimawandel beiträgt? Im Zentrum stehen einige Kriterien, die sich recht leicht benennen lassen.

In unserem Artikel zu klimaneutralem Hosting hatten wir vorgestellt, auf welchen Wegen Sie dafür sorgen können, dass durch das Hosting Ihrer Website möglichst wenig Treibhausgase entstehen. Das ist nicht nur, aber auch eine Frage des Energieverbrauchs beim Hosting-Unternehmen, vor allem aber ist es die Grundlage dafür, eine Website überhaupt klimafreundlich zu betreiben.

Inhaltsverzeichnis

Klimaeffekte der Websitenutzung

Ein weiterer Aspekt ist allerdings, eine Website so zu planen und zu gestalten, dass ihre Verwendung, ihre aktive Nutzung möglichst wenig Ressourcen verbraucht, einen möglichst kleinen negativen Einfluss auf die Klimaveränderungen hat.

Die Nutzung einer Website verbraucht Ressourcen nicht nur beim Hosting-Unternehmen, sondern noch an zwei weiteren Stellen: bei der Datenübertragung und bei den Nutzer:innen. Anders als beim Hosting besteht dabei in der Regel keine Möglichkeit, darauf Einfluss zu nehmen, welche Art von Energie hier genutzt wird, ob ein CO₂-​Ausgleich genutzt wird usw.

Um also den Klimaeffekt der Website-Nutzung auch in diesen Bereichen so gering wie möglich zu halten, gibt es im Kern zwei zentrale Möglichkeiten:

  1. Sorgen Sie dafür, dass Ihre Website möglichst wenig Energie verbraucht und
  2. bemühen Sie sich selbst um einen CO₂-​Ausgleich für die von Ihrer Website benötigten Energie.

Wie sich die erste Möglichkeit umsetzen lässt, versuchen wir im Folgenden zu beschreiben – für die zweite Möglichkeit machen wir in einem späteren Artikel geeignete Vorschläge. (Melden Sie sich jetzt für unseren Newsletter ein, dann informieren wir Sie, wenn der Artikel erschienen ist!)

Das Ziel: energiesparende Websites

Beim Betrieb von Websites entstehen Treibhausgase durch den Verbrauch von (hauptsächlich elektrischer) Energie, die leider noch nicht immer klimaneutral produziert wird. Um hier die Entstehung von CO₂ und ähnlichen Gasen zu vermeiden, ist es also am besten, eine Website darauf zu optimieren, dass sie möglichst wenig Energie benötigt.

Um diesen Effekt im Datentransfer und auf den Endgeräten der Nutzer:innen zu erreichen, gibt es drei zentrale Hebel, die genutzt werden können:

  1. möglichst geringe Ressourcennutzung beim Hosting,
  2. möglichst wenig Datenmenge und
  3. möglichst wenig Ressourcenverbrauch im Endgerät.

Wie können diese Effekte erzielt, diese Hebel genutzt werden? Hierzu lassen sich einige sinnvolle Vorschläge machen.

Ressourcennutzung beim Hosting

Um schon auf dem Server möglichst ressourcensparend zu arbeiten, empfiehlt es sich, einige einfache Grundregeln zu beachten:

  • Die Zahl der Serverzugriffe sollte insgesamt möglichst reduziert werden. Ob es um Schriftschnitte, Skripte, Bilder oder Videos geht, jede Anfrage verbraucht auf dem Server (oder im Content Delivery Network) wieder Energie.
  • Für Websites, die keine dynamischen Bestandteile enthalten (oder enthalten müssten), die bei jedem Aufruf extra ergänzt werden müssen, kann es sinnvoll sein, wenn das CMS die Seiten nicht jedesmal dynamisch aufbaut. Manche Content Management Systeme arbeiten nach diesem Prinzip und generieren statische HTML-Seiten, die bei Aufrufen der Website abgefragt werden. Diese haben den Vorteil, dass nicht bei jedem Aufruf erst Skripte in größerer Zahl abgearbeitet werden. Statische Websites benötigen weniger Energie als dynamisch generierte.
  • Ein ähnlicher Effekt lässt sich durch gezieltes und effektives Caching erreichen – oft aufgerufene Seiten werden dann nicht jedesmal neu generiert.
  • Aus dem gleichen Grund sollten möglichst viele Ressourcen (Stylesheets, Skripte, Libraries, Bilder usw.) geteilt werden (“Shared Ressources”). Das bedeutet, dass die Ressourcen, falls sie auf mehreren Seiten einer Website benötiget werden, dort auch auf identische Weise eingebunden werden. So können sie per Caching zwischengespeichert werden, das reduziert die Zahl der Serverzugriffe und die Menge der übertragenen Daten.

Alle diese Maßnahmen haben den zusätzlichen und direkten Effekt, dass sie die Website zugleich auch schneller machen – weniger Serverzugriffe und Skriptaufrufe tragen unmittelbar dazu bei.

Datenmenge reduzieren

Sie reduzieren damit also bereits die Datenmenge, die über das Netz übertragen wird – und dies ist die entscheidende Maßnahme, um den für die Übertragung durch das Internet notwendigen Energieverbrauch zu reduzieren.

Wie lässt sich diese Datenmenge nun noch weiter reduzieren, und welchen Effekt hat das?

Ein Rechenbeispiel

Henning Fries, der einen der ausführlichsten Artikel zum Thema “Green Webdesign” geschrieben hat (auf den unser Text hier in vielen Punkten aufbaut) hat an einem Rechenbeispiel gezeigt, welche Auswirkungen auch relativ bescheidene Maßnahmen haben können:

Auf der Website der Johns Hopkins University (JHU) ist das Logo der Universität als Vektorgrafik im Format SVG sehr sparsam eingebunden – die Datei “wiegt” gerade einmal 21,67 Kilobytes. Durch ein entsprechendes Tool ließe sich die Dateigröße um weitere 12,15 Kilobytes (etwa 44 Prozent) reduzieren.

Da die Seite der JHU vor allem in der Anfangsphase der Corona-Pandemie enorm oft aufgerufen wurde – dort waren die aktuellen weltweiten Fallzahlen verfügbar – könnte diese eigentlich kleine Veränderung einen großen Effekt nach sich ziehen.

Für 7,9 Mio. Aufrufe pro Tag (im April 2020) kommt Fries auf einen Wert von 2.948,7 Gigabyte Ersparnis pro Monat, was etwa 5.307,66 kWh Energie entspräche. Selbst wenn man diesen Wert um 25% reduziert (z.B. um Caching-Effekte herauszurechnen), landet man noch bei 3.980,7 kWh. Dieser Wert entspricht (nach dieser Statistik für 2020) ungefähr der Menge an Strom, die ein Mensch in Deutschland pro Kopf im Jahr verbraucht.

Bilder optimieren, Videos weglassen, Schrifttypen reduzieren

Die Datenmenge lässt sich natürlich am leichtesten an jenen Stellen reduzieren, an denen viele Daten anfallen. Hier bieten Bilder und Videos zahlreiche Möglichkeiten, ohne Verluste bei Usability und Ästhetik die Datenmenge zu reduzieren.

Bei Bildern bedeutet das insbesondere, die Dateigröße so weit zu reduzieren, wie es möglich ist, ohne dass dies auf den üblicherweise von Ihren Nutzer:innen verwendeten Endgeräten schmerzhaft sichtbar wird. Wie dies im Alltag geschehen kann, haben wir bereits in einem ausführlichen Praxisartikel zusammengetragen:

Kompakte Informationen Website-Bildoptimierung – die Basics für den Alltag

Videos lassen sich zwar auch komprimieren, werden aber immer eine wesentlich höhere Datenmenge beanspruchen als Bilder. Insofern ist es hier wichtig, sich für die Gestaltung einer Website immer zu fragen,

  1. ob ein Video wirklich nötig ist,
  2. ob es sich auch durch einen (kürzeren) Loop ersetzen lässt oder
  3. ob ein Bild nicht genügt – und eventuell ein Video (nur) auf ausdrückliche Anforderung hin nachgeladen wird.

Und schließlich lässt sich auch bei den für eine Website genutzten Schrifttypen oftmals Datenverkehr einsparen – entweder, in dem man radikal nur auf Systemschriften der Nutzer:innen zurückgreift (was aber natürlich zu Lasten der CI gehen kann), oder indem man jedenfalls nur die Schriftschnitte anfordert und lädt, die auf der Website auch genutzt werden. Das Schriftbild in semi bold italic wird schließlich nur benötigt, wenn es auf der Seite auch tatsächlich irgendwo auftaucht.

Muss es blinken und reagieren?

Vor allem interaktive Seiten arbeiten viel mit Skripten, die geladen und anschließend auf dem Endgerät im Browser ausgeführt werden, um den Nutzer:innen eine direkte Reaktion auf ihre Eingaben und Handlungen anzuzeigen.

So sinnvoll und oft auch hilfreich im Sinne der User Experience solche Interaktionen sein können – ist jede einzelne davon notwendig? Durch den Verzicht auf Skripte und die dazugehörigen Grafiken lassen sich Daten einsparen – und zugleich wird auch noch die Rechenleistung auf den Endgeräten der Nutzer:innen geschont, was weitere Energieeinsparungen bringt.

Das Gleiche gilt natürlich im Prinzip auch für alle sonstigen nachgeladenen oder von anderen Plattformen integrierten Skripte und Assets: Im Sinne der Klimafreundlichkeit gilt stets: je weniger, desto besser.

Datensparsamkeit ist eine Tugend

Damit sind direkt auch alle sonstigen Daten gemeint. Viele Websites fragen Unmengen von Cookies, Tracking-Pixeln und anderen Informationen ab, um mehr über die Nutzer:innen zu erfahren.

Diese Informationen summieren sich nicht nur über viele Seitenaufrufe zu beträchtlichen Datenmengen, sie alle verursachen auch über den Datentransfer hinaus immer wiederkehrenden Energieverbrauch z.B. bei den trackenden Unternehmen – von Google über Facebook bis zu Werbenetzwerken.

Hier kann es auch für die Optimierung der Zustimmungsrate bei den Cookie-Bannern sinnvoll sein, die Zahl der Tracking-Tools deutlich zu reduzieren, um so mit Überzeugung auch sagen zu können, dass Ihnen die Datensouveränität Ihrer Nutzer:innen keineswegs egal ist. Das ist ein wesentlicher Faktor, um diese davon überzeugen zu können, dem Tracking auf Ihrer Website grundsätzlich zuzustimmen.

Wenig Daten, viel Zustimmung Cookie-Banner besser machen

Und schließlich sollte sich Ihre Datensparsamkeit zum Beispiel auch darin äußern, wie viele Informationen Sie von Ihren Kunden z.B. in Kontaktformularen abfragen. Das mag zwar oft nur wenige Byte ausmachen – aber, wie wir im Rechenbeispiel oben gesehen haben, macht Kleinvieh auch Mist.

Und die Erfahrung zeigt zudem, dass sich Ihre Sparsamkeit hier in einer entsprechend höheren CTR auszahlt: Wer im Formular weniger eintragen muss, der wird es mit größerer Wahrscheinlichkeit ausfüllen und abschicken.

Ressourcen im Endgerät sparen

Auf den Stromverbrauch der Endgeräte, an dem die Nutzer:innen Ihre Website betrachten, haben Sie naturgemäß keinen Einfluss – es kann sich um ein sparsames Smartphone handeln oder um einen stromfressenden Monitor an einem wenig sparsamen Desktop-Rechner. (Die gesamte Ökobilanz dieser Geräte sieht natürlich noch einmal ganz anders aus, aber das kann hier nicht ausführlich besprochen werden.)

In seinem oben bereits erwähnten Artikel hat Henning Fries viele Aspekte zusammengetragen, unter denen sich der Stromverbrauch am Endgerät beeinflussen und womöglich reduzieren lässt. Er fasst dabei zusammen: “Der Großteil der Energie auf (mobilen) Geräten wird von einigen wenigen Hauptkomponenten verbraucht: CPU, GPU, Vernetzung (Wi-Fi und zellulare Funkchips) und Bildschirm.” 

Das bedeutet auch, dass viele Maßnahmen, die wir hier bereits vorgeschlagen haben, auch auf dem Endgerät entsprechend energiesparend wirken: Skripte, die im Client (also dem Browser der Nutzer:innen) ausgeführt werden, Animationen und Videos beanspruchen Rechenleistung und Bildschirm des Geräts verhältnismäßig stark. Je geringer die übertragenen Datenmengen sind, desto weniger muss natürlich z.B. das WLAN senden und empfangen.

Dark Mode als Energiesparmodus?

Für Monitore und Laptop-Displays werden als Technologien vor allem LED- und LCD-Bildschirme verwendet, die unter anderem auch deshalb einen relativ hohen Energieverbrauch haben, weil sie eine ständige Bildschirm-Hintergrundbeleuchtung benötigen. Aus diesem Grund spielt bei diesen Displays auch für den Energieverbrauch praktisch keine Rolle, welche Farben eingesetzt werden.

Anders ist das bei OLED-Displays, die vor allem in Mobilgeräten verwendet werden. Bei ihnen leuchten die einzelnen LEDs selbst – oder eben nicht. Der deutlich bessere Hell/Dunkel-Kontrast dieser Displays wird also auch dadurch erreicht, dass schwarze Pixel in der Tat völlig dunkel sind.

Für Endgeräte mit diesen Displays kann es daher sinnvoll sein, im Sinne eines geringeren Energieverbrauchs entweder grundsätzlich ein Design zu verwenden, dass sehr viel Schwarz (oder dunkle Farbtöne) enthält oder zumindest einen “Dark Mode” anzubieten, wie es z.B. Google und andere Websites und Apps inzwischen tun.

Energiesparen ist gutes SEO. Gutes SEO spart Energie

Schon an einigen Stellen wurde deutlich: Eine ressourcensparende Website entspricht auch vielen Kriterien, die von den Algorithmen der meisten Suchmaschinen, insbesondere von Google, als positive Signale im Rahmen des Technical SEO gewertet werden.

Eine datensparsame Website, die schnell lädt und sich zügig im Browser aufbaut, schneidet bei den Core Web Vitals besser ab und wird damit – qualitativ hochwertige Inhalte vorausgesetzt – von Google auch entsprechend positiver bewertet als ein mehrere Megabyte großes Ungetüm.

Darüber hinaus zahlt sich aber gute, strategische und ganzheitliche Suchmaschinenoptimierung auch fürs Klima aus. Denn das Ziel einer ehrlichen SEO-Strategie ist es ja nicht, ziellos möglichst viele Nutzer:innen auf die eigene Seite zu lotsen. Das Ziel sollte es stattdessen sein, gezielt jene Nutzer:innen anzusprechen, für die die eigenen Inhalte und vor allem die eigenen Produkte oder Dienstleistungen relevant sind.

Eine SEO-Strategie ist also dann erfolgreich, wenn sie bei möglichst geringen Streuverlusten (auch wenn diese sich nie vermeiden lassen werden) hauptsächlich die genau passende Zielgruppe erreicht. In diesem Sinne ist Suchmaschinenoptimierung weniger Optimierung für die Suchmaschinen als emphatisch auch und gerade Optimierung der Suchmaschinen.

Das Ziel ist es, dass möglichst viele Nutzer:innen schon bei ihren ersten Versuchen auf die richtigen Ergebnisse für ihre Fragen, ihre Bedürfnisse stoßen und so insgesamt weniger Websites aufrufen müssen. Die dabei eingesparte Menge an Energie mag im Einzelfall gering sein, auch hier summiert sie sich in der Masse wieder zu relevanten Mengen.

Fazit

Wie hoch die jeweilige Energieeinsparung bei den verschiedenen Maßnahmen jeweils tatsächlich ist, lässt sich kaum konkret bestimmen – dafür sind die Einflüsse zu vielfältig. Der Effekt auf den Ausstoß von Treibhausgasen lässt sich noch schwerer beziffern – hier kommt noch ins Spiel, welche Energiequellen Nutzer:innen und Rechenzentren jeweils nutzen, um nur das offensichtlichste Beispiel zu nennen.

In Zukunft werden sich voraussichtlich die Bemühungen verstärken, diese Effekte zu benennen und einzuschätzen – zumal mit steigenden CO₂-Preisen irgendwann auch spürbare Kosten (bzw. Einsparungen) damit verbunden wären.

Klimaschutz ist der Weg zu einer besseren Website

Schon jetzt lässt sich aber sagen, dass die beschriebenen Maßnahmen nicht nur Energie sparen, sondern Ihre Website auch in fast allen Fällen schlanker, schneller und attraktiver machen. Insofern ist, wieder einmal, Klimaschutz nicht nur Selbstzweck, sondern auch der Weg zu einer besseren Website.

Wenn Ihnen die Minimierung der Emissionen nicht ausreicht, steht Ihnen natürlich auch die Möglichkeit offen, durch einen entsprechenden CO2-Ausgleich dafür zu sorgen, dass die Klimabilanz Ihres Unternehmens zumindest durch Ihre Website nicht negativ ausfällt. Wie das funktioniert und was Sie dabei beachten müssen, darauf gehen wir in einem weiteren Artikel näher ein.

Wir sind Enthusiasten der digitalen Welt. Als Digitalagentur wollen wir unsere Leser mit dieser Begeisterung anstecken. Dazu packen wir Themen, Trends und Technologien an, die unser aller Leben und Arbeiten betreffen und leichter machen können. Unverschnörkelt geben wir wertvolle Updates und schaffen Orientierung zu digitalen Lösungen von heute und morgen.

Ähnliche Artikel

Die drohende Klimakatastrophe ist zurecht in aller Munde und sollte uns alle dazu anhalten, nachhaltiger zu wirtschaften und unsere Maßnahmen auf ihre Klimafolgen zu überprüfen. Im Bereich des Website-Hostings ist es dabei ohne allzu große Aufwände und Zusatzkosten möglich, weitgehend klimaneutrales Hosting zu nutzen. Wir zeigen, was es dabei zu beachten gilt.

Suchmaschinenoptimierung ist nichts, was sich allein mit einer einzigen Maßnahme erledigt hat – stattdessen ist eine ganzheitliche Perspektive wichtig. Wir zeigen die wichtigsten Aspekte, die dafür zu beachten sind.

VERDURE Update abonnieren

Erhalten Sie einmal im Monat unseren Newsletter mit einer Auswahl aktueller Themen, Trends und Artikeln, um am Puls der Zeit zu bleiben.

Entdecken Sie die zukunftsfähige Formel für hocheffektive KPI-Optimierung und nachhaltiges Wachstum

 

Zum Download