Was haben Webseiten mit Energie zu tun? Ganz einfach: Jedesmal, wenn Webseiten über das Netzwerk gesendet werden, werden Informationen zwischen den Computern über das Netzwerk ausgetauscht. Das kostet Energie, und das ist noch lange nicht alles …
HTML-Code optimieren
In einem ersten Schritt gilt es, alle nicht sichtbaren Daten einer Website optimieren:
Nur die Header-Informationen einfügen, die wirklich benötigt werden.
- Längere Dokumente sinnvoll in Teildokumente aufspalten: So finden Suchmaschinen und Web-Nutzer gezielter die Informationen, ohne gleich große Datenmengen herunterladen zu müssen -> bis zu 90 Prozent Ersparnis.
- Verwendung der Formatierungs-Informationen in CSS-Files auslagern. CSS-Files einer Website werden auf dem Client-Rechner zwischengespeichert und müssen daher nicht für jede einzelne HTML-Datei geladen werden -> bis zu 50 Prozent Datenmengen-Ersparnis.
JavaScript und Plug-Ins gezielt einsetzen
JavaScript kann viele Funktionen deutlich verbessen und ist eine wichtige Erweiterung reiner HTML-Seiten. JavaScript kann aber, falsch eingesetzt, den Datentransfer deutlich erhöhen. Auch Plugins können größere Mengen an Datentransfer verursachen.
Dazu kommt, dass so manche JavaScript-Funktionen oder Plugins, falsch eingesetzt, unnötig sehr hohen Rechenaufwand auf dem Client-Rechner verursachen. Damit tragen sie direkt zu einem unnötigen Stromverbrauch bei.
Bilder optimieren
Bilder benötigen – im Vergleich zu Texten, große Datenmengen. Bilder bieten ein hohes „Datentransfer-Einsparpotential“:
- Bilder in einer Qualität abspeichern, die für den entsprechenden Zweck ausreicht. Bei JPEG reicht die Qualitätsstufe von 75 Prozent auch für hochwertige Darstellung, 60 Prozent sind oft ausreichend -> Einsparpotential 50-90 Prozent.
- Bilder nur in der Größe abspeichern, in der sie tatsächlich angezeigt werden. Bilder, die auf eine Breite von z.B. 400 Pixel gerechnet und unskaliert dargestellt werden, sind kleiner als ein 10-Megapixel-Digitalfoto und sehen zudem im Browser deutlich schärfer aus.
- Es ist sinnvoll, die Bildelemente pro HTML-Ansicht möglichst gering zu halten, da jeder Bildaufruf den Austausch von HTTP-Protokolldaten erfordert.
- Es ist sinnvoll, gleiche Bildelemente möglichst häufig auf einer Website zu verwenden. Dadurch müssen Bilder, etwa das Logo, nur einmal für eine Nutzung der Website heruntergeladen werden, danach sind sie auf dem Client-Rechner im Zwischenspeicher abgelegt und werden von dort in die Seite eingebunden. Dadurch ist es auch einfacher, allgemein verwendete Grafiken an einer Stelle zu ändern.
Video – massiver Datentransfer!
Videos sind schick, die hat man heute im Web. Es spricht auch nichts dagegen, Videos auf einer Website zu verwenden. Man sollte jedoch darauf achten, dass
- Die Videos auch in kleineren Auflösungen/Qualitätsstufen angeboten werden. Nutzer können dann den Datentransfer und damit den Energieverbrauch deutlich reduzieren. Eine Bundestagsrede reicht oft auch in Modemqualität aus, sofern der Ton gut zu verstehen ist.
- Den Inhalt eines Videos treffend beschreiben – so freuen sich die Nutzer, dass sie sehen, was sie erwartet haben. Sie können aber auch vorab entscheiden, ob das Video die gewünschten Bilder enthält oder nicht.
Verwendung anderer Dokumentenformate
Es ist teilweise zur Unsitte geworden, aus Gründen der Einfachheit wesentliche Inhalte einer Website als PDF- oder Word-Dokument anzubieten. Dies ist einerseits schlechter Stil, weil die Nutzer gezwungen werden, die Anwendung zu wechseln und die Startverzögerung hinzunehmen. Zum anderen kann der Datentransfer unnötig erhöht werden:
- PDF: Als layouttreues Format sicher erste Wahl, wenn hochwertige Broschüren angeboten werden – die sich die Nutzer ausdrucken wollen. Auch gut geeignet für Formulare usw. Optierung für die Rechnernutzung: Angebot von PDF-Files, die für den Computerschirm optimiert sind. Dabei werden Grafiken auf z.B. 75 dpi herunterskaliert, statt 300 dpi für die Druck-Version. Die Druckversion kann dann auch als Alternativversion zusätzlich angeboten werden, wenn dies sinnvoll ist.
- DOC: Immer gut, wenn die Formulare auch ausgefüllt werden sollen. Achtung: Word-Dokumente können leicht verändert und weiterverbreitet werden. PDF bietet dagegen zumindest einige Schutzmechanismen, die dies erschweren.
Generell ist es hilfreich, bei Verweisen auf Nicht-HTML-Dokumente die Dokumentenart und die Dateigröße zu beschreiben, etwa in der Form:
Bedienungsanleitung (PDF, 228 kByte)
Damit können Nutzer entscheiden, ob sie das Dokument herunterladen oder nicht – ein 24 MByte-PDF-Dokument wird ein Mobiltelefonnutzer wohl eher nicht direkt auf sein Telefon herunterladen.
Informative Seitenverweise
Dies reduziert die Wahrscheinlichkeit, dass Seiten aufgerufen werden, die dann doch nicht gelesen werden. Dies gilt für alle Seitenverweise, besonders aber für solche, die einen hohen Datentransfer verursachen.