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.

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.

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

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").

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.

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.

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.

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