Skip to main content

Nachhaltiges Webdesign

Effizient - Benutzerfreundlich - Suchmaschinenoptimiert

Die größte Maschine der Welt verbrennt fossile Energien!

Das Internet verbraucht Strom, und zwar sehr viel davon. Ein durchschnittliches Rechenzentrum verbraucht etwa so viel wie eine mittelgroße europäische Stadt.

Nur wenige Rechenzentren nutzen dafür erneuerbare Ressourcen. Auf dem Weg der Daten vom Rechenzentrum zu uns wird zusätzlich Energie verbraucht. Und schließlich benötigen wir Strom, wenn die Daten auf unseren Notebooks, Smartphones und Tablets ankommen.

Das Internet sorgt inzwischen für einen mindestens genau so hohen Ausstoß an Treibhausgasen wie die Luftfahrt, ist in der Süddeutschen Zeitung zu lesen. Und wir befinden uns erst am Anfang der weltweiten Digitalisierung.

Was können wir also tun, um unseren digitalen Energiebedarf effizienter zu gestalten und zu minimieren?

Der Weg zur klimafreundichen Website

Anders als bei der Luftfahrt ist es nicht so einfach, den Energieverbrauch z.B. einer Suchanfrage bei Google oder eines Websitebesuchs zu messen.

Wir müssen zunächst fragen, wo Energie benötigt und verbraucht wird und wie wir auf die Art und die Menge des eingesetzten Stroms Einfluss nehmen können.

Rechenzentrum und Webhosting

Rechenzentren haben einen immensen Energieverbrauch. Die Server benötigen einen permanenten Stromanschluss und erzeugen sehr viel Abwärme, weswegen sie ständig heruntergekühlt werden müssen.

Wählen Sie einen Webhoster, der für den Betrieb seiner Rechenzentren erneuerbare Energien einsetzt. Eine detaillierte Liste finden Sie auf der Website der Green Web Foundation. Allerdings ist aus der Liste nicht ohne weiteres zu erkennen, ob der Webhoster bloß Ausgleichszertifikate erwirbt oder die Server echten Ökostrom nutzen. Da hilft nur direktes Nachfragen beim Hoster - auch zum Thema Energieeffizienz.

Übrigens: Mit der Abwärme der Rechenzentren in der Region Frankfurt könnten die Frankfurter Privathaushalte zu 100% mit Fernwärme versorgt werden. (Quelle: tagesschau.de)

Der Weg der Daten

Auch die Übertragung der Daten vom Rechenzentrum zum User verbraucht Energie. Und zwar unabhängig von der Ressource des Rechenzentrums. Welche Art Energie dabei genutzt wird, hängt vom jeweiligen Strommix des Landes / der Region ab und wie die Daten transferiert werden.

Es macht Sinn, einen Webhoster wählen, dessen Rechenzentrum in der Nähe unserer Zielgruppe, also den  BesucherInnen unserer Website liegt. Das ist für Websites mit regional relevantem Inhalt einfacher als bei internationalen Angeboten.

Übrigens: Der Stromverbrauch von Glasfaserkabeln ist etwa 8 mal geringer als der von VDSL oder TV-Kabeln. (Quelle: Verivox)

Endgeräte und Nutzerverhalten

Die Geräte, mit denen wir im Internet unterwegs sind, werden immer leistungsstärker. Eine höhere Rechenleistung und große Monitore sowie schnelle Netze sorgen dafür, dass wir uns keine Gedanken über die Datenmengen machen zu müssen.

Beim Thema Geräte spielen die Stichworte reduce, reuse, recycle eine große Rolle, denn die meiste Energie wird bei der Herstellung verbraucht. Wir müssen nicht jedes Jahr ein neues Mobilgerät erwerben. Es gibt Refurbished-Angebote oder auch Fairphones, deren Komponenten austauschbar sind.

Auf die Endgeräte oder die Art des eingesetzten Stroms bei unseren Website-Besuchern haben wir keinen Einfluss, aber wir können mit nachhaltigem Webdesign zur Ressourcenschonung beitragen.

Nachhaltiges, klimafreundliches Webdesign

Nachdem wir für uns und unsere KundInnen eine optimale Lösung für das Webhosting gefunden haben, kommen wir zum eigentlichen Thema, und zwar der Optimierung der Website. Wir beginnen bei der Strukturierung der Inhalte, machen uns Gedanken über die Farben für Hintergrund und Schriften, beschränken die eingesetzten visuellen Effekte auf ein Minimum und komprimieren JavaScript- und CSS-Dateien. Zusätzlich geben wir der Website einen wirksamen Zwischenspeicher.

1. Klare Strukturierung führt schneller zum Ziel

Bei jedem Klick werden Daten übertragen. Jedes Mal wird dabei Strom verbraucht. Bevor wir die Inhalte einer Website strukturieren, entwickeln wir gemeinsam mit unseren KundInnen Personas und User Journeys, um die Content-Struktur auf die UserInnen und deren Bedürfnisse zu optimieren.

Eine übersichtliche Gestaltung und eine klare Menüstruktur tragen erheblich zur Effizienz einer Website bei.

2. Der Einfluss der Farben

Bei modernen OLED-Displays (organische Leuchtdioden), wie wir sie in Smartphones, Tablets und Notebooks verwenden, reagiert jedes Pixel wie eine einzelne beleuchtete LED. Schwarz ist die effizienteste Farbe, dunklere Farbpaletten verbrauchen weniger Energie als helle. Google Maps im Nachtmodus verbraucht z.B. 60% weniger der Leistung eines Monitors als der helle Tag-Modus. Farbe hat außerdem einen großen Einfluss auf die Dateigröße von Bildern. Je geringer die Farbtiefe, desto kleiner die Bilddatei.

Für uns als WebdesignerInnen stellt sich die Aufgabe, ein Layout so zu optimieren, dass es gut aussieht und gleichzeitig effizient ist.

3. Optimierte Bilderwelt und Lazy Load

Große Bilder sehen gut aus, aber sie verursachen mit ihren oft betrrächtlichen Datenmengen auch lange Ladezeiten, die wiederum den Energieverbrauch in die Höhe treiben. Es ist aber gar nicht so kompliziert, die Datenmenge von Bilddateien zu reduzieren.

Maximal 100dpi / 1920px Breite: Aktuelle Monitore und Displays können etwa 100 dots/pixel per inch darstellen. Alles, was darüber hinaus geht, ist deswegen überflüssig. Handys und Digitalkameras erzeugen standardmäßig Bilder mit 300 dpi oder mehr und haben riesige Bildformate mit einer Breite von 3000px und mehr, die auf Handy-Displays oder Standard-Monitoren gar nicht dargestellt werden können.

Ausreichend für Bildmaterial auf Websites sind Bildbreiten von maximal 1920px und 100 dpi. Ziel bei der Bildoptimierung sollte eine Dateigröße von unter 100 kb sein.

Die Bildqualität kann verlustfrei auf 60-70% reduziert werden. Moderne Dateiformate wie WEBP sind effizienter als JPG und PNG. Grafiken können statt als GIF oder PNG als SVG eingebettet werden. Es gibt also reichlich Möglichkeiten, die Datenmenge zu reduzieren. Die einfachste Methode: Reduzieren! Wir überlegen, ob ein Bild informativ ist oder nur nett aussieht und verzichtbar wäre.

Wenn Bilder unverzichtbar sind, sollten sie erst dann laden, wenn sie im sichtbaren Bereich einer Website erscheinen. Diese Methode nennt man Lazy Load und führt zu schnelleren Ladezeiten. Viele moderne PageBuilder machen das für uns automatisch.

Bilder können z.B. mit Adobe Photoshop (teuer), Affinity (preiswert) oder GIMP (kostenlos) optimiert und bearbeitet werden.

Außerdem gibt es kostenlose Online-Tools zur Bildoptimierung wie z.B. den Online Image Compressor

4. Videos und Animationen

Mehr noch als für Bilder gilt für Videos die Frage: Sind sie unverzichtbar oder dienen Sie nur dem Image? Denn die Datenmenge von Videos ist immens! Vielleicht lässt sich der Inhalt ja statt im Video mit CSS-Slidern darstellen. So können z.B. aus Erklärvideos gut strukturierte Animationen entstehen. Zusätzlicher Vorteil: die Geschwindigkeit und Abfolge der Elemente können die NutzerInnen selbst bestimmen, während ein Hin- und Herspringen bei Videos oft mühsam ist.

Geht es nicht ohne Video, sollte man in jedem Fall auf automatisches Abspielen verzichten und den NutzerInnen die Entscheidung überlassen, ob sie das Video anschauen möchten oder nicht.

Tipps zu Video-Einstellungen in Social Media Portalen:

Facebook: Klicken Sie auf Ihr Profilbild und öffnen Sie die Einstellungen. Unter "Video" finden Sie die Auswahl zwischen HD und SD - in der Regel reicht SD. Außerdem können Sie dort die automatische Wiedergabe ausschalten.

LinkedIn: In den allgemeinen Einstellungen kann die automatische Wiedergabe von Videos abgeschaltet werden. Außerdem gibt es dort eine Einstellung für den Dark Mode (siehe "Der Einfluss der Farben").

5. Typografie

Die effizienteste Schrift für eine Website ist eine, die sowieso im System verwendet wird. Sogenannte Systemschriften sind z.B. Helvetica, Times New Roman oder Arial. Alle anderen Schriftarten müssen wir dem Datenpaket einer Website hinzufügen und je mehr Schriften und Schriftschnitte wir verwenden, desto größer wird das Datenvolumen.

Beim Entwurf können wir mit Systemschriften einiges an Datenvolumen einsparen. Wenn wir Webfonts verwenden, reicht in der Regel eine Schriftart aus. Eventuell kommt ein weiterer Schrifttyp für Überschriften hinzu. Selbstverständlich sollten die Schriften lokal referenziert werden, also auf dem Server der Website liegen. Andernfalls drohen Abmahnungen wegen der Verletzung von Datenschutzrichtlinien - aber das ist ein anderes Thema.

6. Effizienter Seitencache

Eine Website besteht aus einer großen Menge von Bild-, Skript- und Style-Dateien sowie Datenbank-Inhalten. Für eine funktionierende und lesbare Seite müssen all diese Elemente zusammengefügt werden.

Damit dieser Prozess nicht bei jedem Seitenaufruf vom Server erneut ausgeführt werden muss und dabei Energie verbraucht wird, werden Websites im Cache zwischengespeichert. Das erhöht die Performance und beschleunigt die Darstellung der Seite auf dem Endgerät.

Es gibt verschiedene Arten von Caches, die, wenn sie richtig eingesetzt werden, alle sehr wirksam die Effizienz einer Website erhöhen können.

7. Kurz und bündig: Komprimierter Code

JavaScript und CSS sorgen auf einer Website für Funktionen und Layout. Die Codes sind in .js- und .css-Dateien abgelegt, die je nach Anforderung durchaus erhebliche Dateigrößen haben können. Um diese Dateigrößen zu reduzieren, gibt es die Methode der GZIP-Komprimierung. Das Datenvolumen kann um bis zu 80% verkleinert an den Browser ausgeliefert werden. Das reduziert die Ladezeiten und damit den benötigten Energieaufwand erheblich.

8. Frühjahrsputz – Digital declutter

Auch wenn Daten nicht abgerufen werden, belegen sie Speicherplatz auf dem Server des Rechenzentrums. Je mehr Speicherplatz benötigt wird, desto mehr Energie muss eingesetzt werden. Also lohnt es sich, hin und wieder einen Frühjahrsputz auf dem gemieteten Server zu veranstalten. Alle nicht genutzten Bilder, Plugins, Templates oder alte Posts sollten gelöscht werden. Das schafft nicht nur mehr Übersicht auf dem Server, es spart auch Energie.

Gleiches gilt für veraltete Mails oder Backups. Für die Archivierung können Sie externe Festplatten nutzen, die nur dann Strom verbrauchen, wenn sie im Einsatz sind.

Wer mehr über Digital Declutter erfahren möchte, kann sich dieses Toolkit mit konkreten Tipps anschauen: Digital Declutter for Business

An dieser Stelle möchte ich mich bei Tom Greenwood bedanken, der mit seinem Buch Sustainable Webdesign mit vielen Anregungen zum obigen Text beigetragen  hat.

Lässt sich der Aufwand messen?

Wie eingangs beschrieben kann man den Energiebedaruf und damit den CO2-Fußabdruck einer Website nicht so simpel messen wie den eines Flugzeugs oder eines PKW. Dafür gibt es zu viele unterschiedliche Stellen, an denen Energie verbraucht wird.

Es gibt aber ein paar Test-Tools, die all diese Faktoren zusammen abbilden und uns zeigen, ob unsere Bemühungen um die Effizienz unserer Website Erfolg hatten und welche Stellschrauben wir noch anziehen können.

Hier ein paar Beispiele:

Es gibt eine ganze Reihe weiterer Test-Tools, die teilweise sehr detaillierte Ergebnisse mit Handlungsempfehlungen liefern. Wir verwenden neben den oben genannten außerdem ecograder.com und GTmetrix.

Effizienz - Benutzerfreundlichkeit und Suchmaschinenoptimierung

Ich möchte nicht unerwähnt lassen, dass es ein paar sehr schöne "Nebeneffekte" der oben beschriebenen Optimierungsansätze gibt.

  • Effiziente Websites mit geringen Ladezeiten werden von Google in den Suchergebnissen bevorzugt.

  • Gut strukturierte Seiten sind nutzerfreundlich und leiten schnell und unkompliziert zum gewünschten Inhalt.

  • Ein reduziertes Datenvolumen spart Webhosting-Aufwand und Kosten.

Übrigens: Nachhaltiges Webdesign ist bei odecologne eine INKLUSIVLEISTUNG!

Wir können und sollten alle etwas tun für mehr Klimafreundlichkeit. Deswegen ist nachhaltiges Webdesign bei uns eine Inklusivleistung, für die Sie kein zusätzliches Budget benötigen.

Nach Veröffentlichung einer neuen Website nutzen wir die oben genannten Test-Tools. Auf diese Weise gewährleisten und dokumentieren wir die Qualität unserer Arbeit.

Wir geben uns erst zufrieden, wenn alles im grünen Bereich ist!

Neugierig geworden?

Wenn wir Ihr Interesse geweckt haben, freuen wir uns über die Vereinbarung eines persönlichen Gesprächs mit Ihnen. Wir hören uns Ihre Wünsche an, beraten Sie zu den Möglichkeiten der Umsetzung und erstellen ein individuelles Angebot.

Kontakt

Sie erreichen uns telefonisch in der Zeit von 10.00-18.00 Uhr unter
0221 733979 oder
0172 6761483
und per E-Mail unter Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein.