1. erneuerbare Energie

Grünes Hosting

Eine der größten positiven Auswirkungen auf die Umwelt ist es, zu einem umweltfreundlichen Hoster, welcher mit erneuerbarer Energie betrieben wird, zu wechseln.¹

Am ökologisch nachhaltigsten wäre es, einen grünen Hoster in der Nähe zu finden, da auch das Übertragen über eine größere Entfernung mehr Energie benötigt. Eine Liste ökologischer Hoster stellt The Green Web Foundation zur Verfügung. ➚www.thegreenwebfoundation.org.²

Grüne Webhosting Provider aus Österreich und Deutschland:³

➚greenhosting.at ➚hosttech.at ➚greenwebspace.com ➚greensta.de ➚biohost.de ➚strato.de ➚hetzner.com ➚manitu.de ➚greensta.de ➚hoststar.at  ➚raidboxes.io

2. Inhalt optimieren

Fotos und Videos komprimieren

Ursprünglich bestand das Internet nur aus Text, Bilder kamen erst später zur Verwendung. Dies hatte erhebliche Auswirkungen auf die Leistung.⁵ Um die Geschwindigkeit, Größe und somit auch das Benutzererlebnis der Webseite zu optimieren, sollten, ohne auf Inhalt verzichten zu müssen, Fotos und Videos komprimiert oder durch Medien mit geringer Datengröße, wie Illustrationen, Icons, Vekorgrafiken oder Typografie, ersetzt werden.⁶ Außerdem wird noch mehr Energie gespart, wenn auf den verschiedenen Gerätegrößen passende Bildgrößen angeboten werden.⁷

Speziell Videos werden oft nicht nur normal eingebettet, sondern als Hintergrund verwendet. Zudem sind sie meist in einer zu hohen Auflösung und Größe vorhanden, als notwendig ist. Werden Videos eingesetzt, sollten sie so kurz und komprimiert wie möglich sein⁸ und nicht automatisch abgespielt werden.⁹

Um eine Antwort auf die Frage, ob Bilder oder Videos verwendet werden sollten, zu erhalten, sind folgende Fragestellungen hilfreich:

– Ist das Bild/Video notwendig und verschafft es dem Nutzer einen Mehrwert?
– Kann dieselbe Wirkung erzielt werden, wenn es durch weniger datenintensive
Grafiken ersetztwird?¹⁰
– Ist es sinnvoll und spiegelt es mein Unternehmen/meine Produkte wider?¹¹

Mithilfe von kostenlosen Tools kann die Größe von Bildern komprimiert werden:¹² 

➚smush.it! ➚ImageOptim ➚kraken.io ➚WebP von Google 

Fonts optimieren

Weniger ist mehr! Jeder liebt gute Typografie, jedoch sollte darauf geachtet werden, wenn möglich, auf Webfonts zu verzichten und die Anzahl an Schriftarten zu reduzieren.¹³ Am umweltfreundlichsten wäre es, Systemschriften wie Arial, Courier, Georgia, Helvetica etc. zu verwenden, denn diese befinden sich auf jedem Rechner und verbrauchen somit weniger Energie. Auch das Format der Variable-Fonts wäre eine Alternative. Dieses befindet sich in Bezug auf die Dateigröße zwischen Web- und Systemschriften. Webfonts bieten zwar die meiste gestalterisch Freiheit und schaffen eine Differenzierung, jedoch liegen sie auf externen Servern, dadurch steigen Stromverbrauch und Ladezeit.¹⁴

Benutzerfreundlichkeit prüfen

Inhalte und Seiten sollten so gut wie möglich reduziert werden, dennoch ist es wichtig, auf eine gute Usability und User Experience zu achten. Denn mit einem guten UX/UI Design kann die Auffindbarkeit der Inhalte verbessert und somit auch die Webseite umweltfreundlicher gestaltet werden.¹⁵ Wichtige Keywords, Orientierungspunkte und Call-to-Actions sollten ersichtlich gestaltet werden. Denn je schneller Nutzer das finden, wonach sie suchen, umso weniger Seiten müssen geladen werden, was zu einem geringeren Stromverbrauch führt. Hilfreich dafür ist auf jeden Fall ein Prototyping-Tool.¹⁶

Save Data

Außerdem gibt es bereits die Möglichkeit in den Browsern Chrome, Opera und Yandex die Funktion „Save Data“ zu aktivieren, welche Webseiten in reduzierter Form darstellt. Designer*innen und Developer*innen können dabei selbst entscheiden, wie die Webseite vereinfacht angezeigt werden soll.¹⁷

Mobile first

Mobile-first ist eine weitere Möglichkeit mit einem großen Potenzial für mehr ökologische Nachhaltigkeit im Internet. Starten Designer*innen ihren Design-Prozess auf einem kleinen Gerät, so werden Inhalte nach ihrer Priorität verwendet und auf unwichtige Elemente und Inhalte verzichtet.¹⁸

Tracking von Drittanbieter, Werbung & Social-Media-Buttons

Auf Tracking von Drittanbietern, Werbeanzeigen sowie Social-Media-Buttons sollte verzichtet werden, wenn sie nicht nützlich oder notwendig sind, denn sie verursachen eine große Datenlast.¹⁹

3. Kunden sensibilisieren

Um eine Webseite ökologisch nachhaltig umzusetzen, wird auch die Zustimmung des Kunden benötigt. Das Thema der Nachhaltigkeit wird zwar immer präsenter, jedoch wissen viele Unternehmen nicht, dass sie auch digital/online einen Beitrag dazu leisten können.

Um sie dabei zu unterstützen und das Bewusstsein dafür zu schärfen, können im ersten Schritt (bei einem Re-Design) die Leistung sowie die ökologischen Auswirkungen der aktuellen Webseite analysiert werden (siehe 4. technische Basis):²⁰

– den aktuellen Kohlenstoffdioxid-Ausstoß mit einem CO₂-Rechner ermitteln
– die aktuelle Leistung (Ladezeit, Gewicht) mithilfe von Tools messen
– den Hoster der Webseite mit Hosting-Checker überprüfen

Durch diese Daten sollte der Kunde die Probleme und die Bereiche, die verbessert werden könnten, verstehen. Um Unternehmen zu ermutigen und das Vertrauen zu erhöhen, sollten Kunden darüber aufgeklärt werden, welche Optionen bestehen, um online grüner zu werden.²¹

4. technische Basis

Webseiten auf erneuerbare Energie & CO₂-Emissionen untersuchen
(bei Re-Design einer Website)

Ecograder – gibt Infos über ökologische Nachhaltigkeit einer Website und Tipps, wie man die Bilanz noch verbessern kann. ➚ecograder.com

WebsiteCarbon – berechnet den CO₂ Bedarf eines Aufrufes einer Webseite. ➚websitecarbon.com²²

Leistung berechnen und optimieren

Leistungstests sollten angewendet werden, um Webseiten noch effizierter zu gestalten. Außerdem verbessert eine geringe Ladezeit nicht nur die Rechenleistung, sondern auch die Zufriedenheit der Nutzer.²³

Einige Anbieter verfolgen die Leistung und helfen bei Optimierungen:²⁴

➚speedcurve.com
➚calibreapp.com
➚sitespeed.io
➚developers.google.com/speed/pagespeed/insights
➚performancebudget.io (Der Performance Budget Calculator berechnet zur gewünschten Ladezeit die maximale Größe der Webseite.)

Lazy-Loading-Plug-in

Anstatt die ganze Seite zu laden, werden Inhalte (Bilder und Videos) beim Scrollen nach und nach aufgerufen, dieses Plug-in ist vor allem bei großen One-Pagern sinnvoll.²⁵