Deine nachhaltige Webseite: Erste Schritte

Die Auswirkungen unserer immer umfangreicher werdenden Onlineaktivitäten auf die Umwelt wachsen bedenklich. Doch kaum einer denkt beim Surfen im Internet oder beim Streamen von Filmen an die riesigen Rechenzentren, die unsere Daten hin und her ­senden. Mit diesem Bewusstsein und ein einen paar einfachen Schritten, kannst Du Deine eigene Webseite verbessern und so verhindern, dass unnötige Ressourcen verbraucht werden. Lies hier, welche Dinge sich einfach an Deiner eigenen Webseite mit direkten Auswirkungen auf die Umwelt optimieren lassen.

‍

Die Bedeutung der Nachhaltigkeit im digitalen Bereich wird schnell klar, wenn man bedenkt, dass unsere Online-Aktivitäten in den letzten Jahren einen vergleichbaren ökologischen Fußabdruck hinterlassen wie der gesamte weltweite Luftverkehr. Im Gegensatz zum Reisen sind wir im Alltag jedoch selten damit konfrontiert. Auf zahlreichen Internetseiten können wir unseren eigenen ökologischen Fußabdruck messen, indem wir Angaben zu zurückgelegten Kilometern, unserem Wohnort und unserer Ernährung machen. Doch die Zeit, die wir online verbringen, wie lange wir Filme streamen oder auf digitalen Plattformen kommunizieren, wird selten erfasst. Denn die Unmengen an Energie, die für den Betrieb von großen Rechenzentren mit Kühlung und unterbrechungsfreier Stromversorgung für Tausende von Servern täglich benötigt werden, werden nicht auf unserer persönlichen Stromrechnung, sondern auf der der gigantischen Rechenzentren verbucht.

Ähnlich wie die zurückgelegten Kilometer im Flugverkehr sind es übertragene Datenmengen im Internet. Mit steigender Menge an übertragenen Daten in Form von Codezeilen, Ton- oder Bilddateien steigt auch der Energieverbrauch und somit der CO₂-Ausstoß einer Website. Als Beispiel verursacht der Zugriff auf die Wikipedia-Startseite, die mit sehr wenigen Bildern und Designelementen auskommt, lediglich einen CO₂-Ausstoß von 0,59 Gramm. Im Vergleich dazu verursacht der Aufruf der Youtube-Startseite bereits mehr als das Vierfache an CO₂, nämlich 2,88 Gramm pro Zugriff.

‍

Der erste Schritt: Green Hosting

Nachhaltiges Hosting, bei dem die Website-Hosts auf Ökostrom setzen, effiziente Klimatisierung verwenden und ein eigenes Rechenzentrum betreiben, kann dabei zur Schadensbegrenzung beitragen. In Deutschland bieten Unternehmen wie Biohost oder Mittwald nachhaltiges Hosting an. Doch reicht das aus, um das entstandene CO₂ zu kompensieren? Oder sollten wir nicht viel stärker an der Ursache, dem enormen Datenverkehr, arbeiten? Immer mehr Webdesigner:innen und Entwickler:innen setzen sich mit der Frage auseinander, wie wir auch im digitalen Raum nachhaltig handeln können. Der schlichte Aufruf an die Nutzer, weniger zu surfen, ist dabei nicht wirklich förderlich. Die Branche muss sich ihrer Verantwortung bewusst werden und sich auf Ursachenbekämpfung konzentrieren. Das kann beispielsweise durch die Entwicklung schlanker, nachhaltiger Websites geschehen, die beim Laden nicht Unmengen an Bits verbrauchen und gleichzeitig die Nutzerfreundlichkeit erhöhen.

‍

Nachhaltige Gestaltung Deiner Webseite

Überprüfe Deine Website und die der Konkurrenz

Auf zahlreichen Webseiten lässt sich überprüfen, wie es um Deine aktuelle Webseite steht. Auf ecograder.com können Websites z.B. auf verschiedene Kriterien hin untersucht werden. Seitengeschwindigkeit und Nachhaltigkeit gehen dabei Hand in Hand. Mit Hilfe von websitecarbon.com kannst Du den CO2-Ausstoß Deiner Websites anhand der übermittelten Datenmenge, Energiequelle des Rechenzentrums und den monatlichen Besuchern berechnen.

Eine durchschnittliche Website ist dabei inzwischen zwei ­Megaby­te groß. Vor drei Jahren war es noch knapp ein Megabyte. Die Frage ist dabei ob es überhaupt kleiner geht, ohne auf schickes Webdesign und gute User-Experience zu verzichten. Der Webentwickler Jack Lennox hat diese Frage aufgegriffen und eine WordPress-Website zum Thema Nachhaltigkeit im Web mit lediglich sechs Kilobyte Größe entworfen: sustywp.com. Die Zutatenliste ist dabei simpel: keine Bilder, keine Navigationsleiste, die Verwendung von lokal installierten Systemschriften, ein Menü, das als eigenständige Seite geladen wird und durch zwei Designelemente wie ein Popup wirkt, sowie minimiertes und komprimiertes CSS. Das Ergebnis ist eine schlanke, barrierefreie und minimalistische Website mit schneller Ladezeit und einem positiven Suchmaschinen-Ranking. Diese Website verdeutlicht, wie viel gewonnen werden kann, wenn man sich auf das Wesentliche konzentriert.

‍

Prinzipien des nachhaltigen Webdesigns

Eine Unternehmenswebsite wird nach wie vor als digitale Visitenkarte oder repräsentatives Aushängeschild im Internet betrachtet. Sie muss nicht nur funktionieren, sondern auch einen bleibenden Eindruck hinterlassen. Aus der Sicht der Nutzer sind jedoch zunächst folgende Kriterien entscheidend:

1. Seitengeschwindigkeit – Wie schnell lädt die Seite?
2. Zielfindung – Wie einfach finde ich das Gesuchte?
3. Responsive – Wie gut funktioniert die Seite auf meinem Gerät?
4. Usability – Wie schnell finde ich mich auf der Seite zurecht?
5. Aussehen – Spricht mich die Seite optisch an?

Diese Hierarchie verdeutlicht, dass im Webdesign insbesondere Geschwindigkeit und Einfachheit eine wesentliche Rolle spielen. Eine ästhetisch ansprechende Seite ist irrelevant, wenn der Nutzer sie aufgrund langer Ladezeiten verlässt oder die mobile Darstellung unzureichend ist. Informationen sollten schnell laden und leicht auffindbar sein. Daher ist schlankes Webdesign nicht nur umweltfreundlich, sondern fördert auch die Benutzererfahrung und somit die Generierung von Leads.

Das Prinzip der Müllvermeidung, bekannt als "Reduce, Reuse, Recycle", das viele aus der analogen Welt kennen, kann auch Webdesignern nützlich sein. Bei der Entwicklung schlanker Websites geht es ebenfalls um die Vermeidung von "Datenmüll". Übertragen auf Websites lassen sich daraus folgende Richtlinien ableiten:

1. Reduzierung der präsentierten Informationen.
2. Mehrfache Verwendung von Code.
3. Arbeit mit vorhandenen Modulen und Materialien.

Diese Maßnahmen helfen nicht nur bei der Umsetzung des Prinzips, sondern bieten auch erhebliches Einsparungspotenzial.

‍

‍

Reduce – Informationsflut eindämmen

Für 76 Prozent der Website-Nutzer steht die Zugänglichkeit von gesuchten Informationen an erster Stelle als wichtigstes Designkriterium. Diese Zahl verdeutlicht die Notwendigkeit, Websites primär für Nutzer und nicht für Unternehmen zu entwickeln. Nach einer eingehenden Seitenanalyse sollten die vorhandenen Informationen auf das Wesentliche reduziert werden. Eine geringere Informationsmenge bedeutet weniger Code und somit eine schnellere Ladezeit. Gleichzeitig steigen Performance und Benutzerfreundlichkeit. Tools wie Google Analytics helfen dabei, die häufigsten Klickpfade und besuchten Seiten der Nutzer zu identifizieren. Wenn beispielsweise 50 Prozent der Nutzer nach der Telefonnummer suchen, sollte diese Information auf der Startseite verfügbar sein, um zusätzliche Klicks (und Datenübertragungen) zu vermeiden und den Nutzer effizient ans Ziel zu führen.

Ein weiterer Aspekt, der Websites oft überfrachtet, ist Bildmaterial. Es gilt zu überlegen, wie viele Bilder wirklich notwendig sind. Smartphone-Nutzer in ländlichen Gebieten mit Edge-Empfang werden optimiertes Bildmaterial zu schätzen wissen. Hierbei werden Bilder in Pixelgröße verkleinert und mit Tools wie dem kostenlosen Imageoptim für das Web komprimiert. Allein diese Maßnahme spart bereits mehrere Megabyte und optimiert zusätzlich die Bildausgabe auf der Website. Durch die Implementierung einer intelligenten Bildausgabe, des sogenannten Lazyloads, wird ein Bild erst geladen, wenn der Nutzer in den entsprechenden Bereich scrollt. Zudem kann durch ein Source-Set mit verschiedenen Bildgrößen die Datenmenge weiter reduziert werden, indem jeweils die passende Bildgröße für das Endgerät ausgegeben wird.

‍

Reuse – Mehrfache Verwendung von allem

Durch wiederholende Muster in der Benennung lässt sich bei der Frontend-Entwicklung Zeit und Code einsparen. Eine Methode zur strukturierten Code-Gestaltung ist BEM – Block, Element, Modifier. Dabei wird die Website in Blöcke und darin existierende Elemente unterteilt, die durch Modifier verändert werden können. Blöcke sind eigenständig, wie zum Beispiel Header, Container oder Menüs, und können auch innerhalb anderer Blöcke existieren. Elemente existieren immer innerhalb eines Blocks, wie zum Beispiel Header-Titel, Textfelder oder Menüpunkte, und sind semantisch mit den Blöcken verbunden. Modifier ermöglichen verschiedene Optionen für Blöcke oder Elemente, wie zum Beispiel Größe, Sichtbarkeit oder feste Position. Durch Namenskonventionen werden die CSS-Hierarchien flach gehalten, und komplizierte Spezifizierungen werden vermieden.

Durch die nachfolgende Komprimierung des Codes mit Tools wie G-Zip können die durch die Namenskonventionen in BEM bedingten Wiederholungen zusammengefasst werden. Dies führt zu einer weiteren Reduzierung der Datenmenge und somit zu schnelleren Ladezeiten.

‍

Recycle – Vorhandene Materialien nutzen

Wie viele verschiedene Buttons, Überschriften und Container sind wirklich notwendig? Die Lösung sind Websitemodule und -elemente, die mehrfach verwendet werden können. So gibt es beispielsweise nur ein Textmodul, einen Slider, einen Teaser und ein Bildmodul. Mithilfe der zuvor beschriebenen Modifier aus der BEM-Methode können diese Module an verschiedene Optionen angepasst werden, sodass sie für unterschiedlichste Inhalte verwendbar sind. Im Textmodul können beispielsweise verschiedene Breiten oder Hintergrundfarben ausgewählt werden, und mit nur einem Element ergeben sich verschiedene Designoptionen.

Eine Reduzierung der Module macht eine Website nicht nur schlanker, sondern verbessert auch die Benutzererfahrung. Nutzer müssen sich nicht ständig neu orientieren und können Gelerntes anwenden, sowohl im Frontend als auch im Backend. Jedes Modul oder Element, das nur einmal auf der Website eingesetzt wird, sollte hinterfragt werden. Ist dieses Modul wirklich notwendig? Kann eine andere Lösung gefunden werden? Steht das Gewicht des Moduls im Verhältnis zum Nutzen für den Anwender?

Zudem kann für eine Website bereits vorhandenes Material im Web genutzt werden. Wer gängige Webfonts verwendet, die bereits auf vielen Geräten installiert sind, muss beim Aufrufen der Website keine neue Schriftart laden lassen.

Fazit

Das Internet verbraucht Strom. Und zwar ziemlich viel davon - die wahrscheinlich wichtigste Erkenntnis dieses Artikels. Denn nur wer sich der Problematik bewusst ist, kann an der Lösung arbeiten. Die besteht nicht nur aus der Kompensierung des CO₂-Ausstoßes durch das Pflanzen von Bäumen, sondern auch in der Reduzierung des täglichen Datentransfers. Dieser kann einerseits durch Websites mit geringem Daten­volumen reduziert werden, andererseits durch eine gute Usability die ­Nutzer schnell zum Ziel führen und das Laden überflüssiger Seiten ­reduzieren. Beides kann durch das Entwickeln und Entwerfen schlanker Websites nach dem Prinzip „Reduce, Reuse, Recycle“ umgesetzt werden.

‍

‍