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

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.

Wir sind bei der Auswahl gerne behilflich.

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. Wir haben darauf keinen Einfluss. Eine Übersicht liefert z.B. die Bundeszentrale für politische Bildung.

Wir sollten daher einen Webhoster wählen, dessen Rechenzentrum in der Nähe der User liegt. Das ist für Websites mit regional relevantem Inhalt einfacher als bei Angeboten mit internationaler Zielgruppe.

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 große Videos problemlos abspielen können, ohne uns Gedanken über die Datenmenge machen zu müssen.

Wir haben keinen Einfluss auf Geräte, Nutzerverhalten oder Art des eingesetzten Stroms bei den Besuchern unserer Websites, 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 auf Websites, aber sie verursachen mit ihren betrrächtlichen Dateigrößen auch lange Ladezeiten die wiederum den Energieverbrauch in die Höhe treiben. Es ist aber gar nicht so kompliziert, die Dateigrößen zu reduzieren. 72dpi reichen aus, die Bildqualität kann zudem 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: 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 und geringerem Energieverbrauch.

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.

5. Typografie effizient einsetzen

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 des Layouts können wir mit Systemschriften, der Auswahl weniger Webfonts und der Verwendung von variablen Schriften, die eine genaue Definition unterschiedlicher Neigung und Fettung erlauben, einiges an mehr Effizienz erreichen.

6. Effektiver Seitencache

Eine Website besteht in der Regel aus mehreren Dateien. Das sind nicht nur die schon beschriebenen Bild- oder Videodateien, sondern auch JavaScript- und CSS-Dateien für Funktionen und Layout sowie eine Datenbank, in der die Inhalte gespeichert sind. Mit der Skriptsprache PHP werden diese Dateien und Datenbankinhalte in einer PHP-Datei zu einem HTML-Markup zusammengeführt.

Damit nicht bei jedem Seitenaufruf die Seite per PHP neu zusammengebaut werden muss, gibt es den Seitencache. Je wirkunsvoller wir ihn einrichten, desto geringer sind die Ladezeiten und die dafür verbrauchte Energie.

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. Gute Content Management Systeme wie Joomla! haben diese Funktion von sich aus an Bord. Dateien können 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 jede Menge 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!

Olivia Ockenfels
Grafikdesign

Vogelsanger Straße 47
50825 Köln
+49 221 518680
+49 176 43785040

Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!
Sabine Volmert
Webdesign + Konzeption

Blumenthalstraße 2
50670 Köln
+49 221 733979
+49 172 6761483

Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!