[Seite 1]
Nachhaltige Gestaltung von Webseiten
Der Energieverbrauch von Webseiten kann zwar nur schwer oder sogar manchmal unmöglich genau zu messen sein, aber es gibt viele Dinge, die man tun kann, um Verschwendung zu vermeiden und Effizienz zu erhöhen. Die meisten dieser Aktionen sind nicht grundlegend schwierig oder komplex, sie erfordern einfach ein bisschen Aufmerksamkeit und sorgfältige Überlegungen hinsichtlich Design, Inhaltserstellung, Entwicklung und Hosting. Diese Hinweise können einzeln oder als Ganzes zum Bestandteil von Leistungsbeschreibungen zur Erstellung neuer Webseiten verwendet werden.
Bei der Umsetzung dieser Hinweise darf zudem der Datenschutz nicht außer Acht gelassen werden. Ob und unter welchen Voraussetzungen einzelne Tools und Dienste zur nachhaltigen Gestaltung von Webseiten eingesetzt werden können, muss vor Anwendung jeweils überprüft werden.
Insgesamt gilt die Faustregel: je weniger Daten verarbeitet werden, desto weniger Energie wird verwendet. Hierdurch erhöht sich auch der Pagespeed. Damit ist die nachhaltige Gestaltung von Webseiten durch Datenminimierung auch immer ein Beitrag zu Nutzerfreundlichkeit und Datenschutz und umgekehrt.
- Notwendigkeit einer eigenen Webseite
Bevor Sie eine neue Webseite beauftragen prüfen Sie zunächst, ob diese wirklich erforderlich ist. Für den nachhaltigen Webseitenbetrieb und die Userfreundlichkeit kann es besser sein, vorhandene Webseiten zu erweitern.
- Reduktion von Bildmaterial
Je mehr Bilder eine Website verwendet und je größer diese Bilddateien sind, desto mehr Daten müssen übertragen werden und desto mehr Energie wird verbraucht. Bevor hier technische Optimierungen angewendet werden, um dies zu kompensieren, könnte man sich zunächst grundsätzliche Gedanken über die Verwendung von Bildern machen und sich die folgenden Fragen stellen:
Bringt das Bild wirklich einen Mehrwert für den Benutzer? Vermittelt es nützliche Informationen? Könnte die gleiche Wirkung erzielt werden, wenn das Bild kleiner wäre? Kann auf Bilder verzichtet werden, die für den Benutzer nicht sichtbar sind, z.B. in Slidern? Kann der gleiche Effekt mit einer Vektorgrafik (oder sogar per CSS) anstelle eines Fotos erzielen?
Eine Reduktion des Bildmaterials trägt direkt dazu bei, den Online-Energieverbrauch zu senken.
Wenn die Verwendung von Bildern auf einer Website auf Effizienz und Nützlichkeit geprüft wurde, können nun einige technische Entscheidungen dabei helfen, die Dateigröße der letztendlich verwendeten Bilder erheblich zu optimieren:
[Seite 2]
Bilder sollten in der richtigen Größe und nicht nur skaliert mit CSS ins richtige Format geladen werden. Responsive Image Elemente wie picture, source und srcset können genutzt werden, um für jedes Endgerät die passende Bildgröße auszuliefern. Tools wie TinyPNG oder ShortPixel können helfen, um Bilddateien ohne sichtbaren Qualitätsverlust zu komprimieren. Für jedes Bild sollte das effizienteste Dateiformat genutzt werden, z.B. WebP anstelle von JPEG.
Somit können Bilddateigrößen deutlich optimiert werden, was den Energieverbrauch reduziert und Ladezeiten verbessert, ohne die Benutzerfreundlichkeit der Webseite zu beeinträchtigen.
Videos sind mit Abstand die daten- und verarbeitungsintensivste Form von Inhalten - werden jedoch als Inhaltsformat im Web immer beliebter. Eine Website mit Videowiedergabe kann um ein Vielfaches größer sein als ohne Video und erzeugt zusätzlich eine viel höhere Belastung der CPU des Nutzers, was zu einem deutlich höheren Energieverbrauch führt.
Hinsichtlich der Energieeffizienz einer Website daher zu aller erst zu prüfen, ob Videos wirklich notwendig sind. Falls ja, sollte man überlegen wie die Menge der Streamingdaten reduziert werden kann: z.B. indem Videoinhalte so kurz wie möglich gehalten werden und die automatische Wiedergabe deaktiviert wird.
- Optimierung der Webseite für Suchmaschinenranking
Die Optimierung einer Website für Suchmaschinenrankings hilft Nutzern, die gewünschten Informationen schnell und einfach im Netz zu finden. Erfolgreiches Suchmaschinenranking führt also dazu, dass Menschen weniger Zeit damit verbringen, im Internet nach Informationen zu suchen und auch weniger Seiten besuchen, die ihren Bedürfnissen nicht entsprechen.
Es wird also in Summe weniger Energie verbraucht und die dennoch verbrauchte Energie liefert den Nutzern einen echten Mehrwert.
- Javascript
Die Verwendung von Javascript erhöht einerseits die Dateigröße der Webseite und andererseits erfordert dessen Verarbeitung mehr Ressourcen auf dem Endgerät des Benutzers. Dies erhöht die CPU-Auslastung, was wiederum den Energieverbrauch des Geräts erhöht.
Die gewünschte Interaktion, Funktionalität oder Animation kann in vielen Fällen auch mit effizienteren Technologien realisiert werden.
- Optimale User Experience (UX)
Die User Experience geht einher mit der Erwartung, dass Erlebnisse einwandfrei funktionieren, dass der Nutzer in der Lage ist, die Dinge zu finden, die er finden will und zudem noch Freude bei der Anwendung hat.
[Seite 3]
Ein gutes UX-Design macht die Nutzung des Internets einfacher und angenehmer für alle und reduziert vor allem die Menge an Energie, die durch die Navigation zu falschen Seiten oder durch die Verwendung von Buttons, welche die falsche Aktion auslösen, verschwendet wird.
- Guter Text spart Energie
Das Verfassen guter Texte hat durchaus Einfluss auf die Energie-Effizienz einer Website, da es die Dauer beeinflusst, die der Nutzer auf der Website verbringt.
Manchmal ist es gewünscht, dass der Leser möglichst viel Zeit auf der Website verbringt und sich in die Inhalte vertieft. Es ist aber nie gewollt, dass Nutzer Zeit damit verschwenden, sich durch Inhalte zu kämpfen, die sie überhaupt nicht interessieren.
Somit kann klares und effizientes Schreiben dazu beitragen, Zeitverluste und damit einhergehende Energieverschwendung zu reduzieren.
- Tools für effizientes Arbeiten im Backend
Die kontinuierliche Wartung, Betreuung und Pflege von Webseiten erfordert mal mehr und mal weniger komplexe und zeitintensive Online-Aktivitäten im Backend der Onlinepräsenz. Webseiten so effizient und zeitsparend wie möglich zu Pflegen spart also Online-Zeit und damit Energie. Wenn also Tools verwendet werden, die das Arbeiten im Backend erleichtern und effizienter machen, kann damit langfristig eine Menge Energie gespart werden.
- Accelerated Mobile Pages (AMP)
AMP wurde entwickelt, um das Laden von Inhalten auf mobilen Geräte zu beschleunigen, indem unnötiger Code und Dateigewicht entfernt werden und eine minimalistische Version der ursprünglichen Webseite bereitgestellt wird. Eine AMP Seite hilft natürlich nicht wirklich viel, wenn die Website von Anfang an effizient ist, aber falls die ursprüngliche Webseite eher etwas schwerfälliger daherkommt, kann AMP ein nützliches Werkzeug sein, um mobilen Benutzern eine leichtere und energieeffizientere Version zu liefern. Es sei auch darauf hingewiesen, dass Google AMP-Inhalte in den mobilen Suchergebnissen priorisiert, insbesondere nachrichtenbezogene Themen.
Somit können AMP Seiten nicht nur die Energieeffizienz und User Experience sondern auch die Sichtbarkeit der platzierten Inhalte erhöhen.
- Web-Hosting / Rechenzentrum
Ein Großteil der vom Internet verbrauchten Energie entfällt auf die Datenübertragung über die Telekommunikationsnetze - und je weiter die Daten reisen müssen, desto mehr Energie verbrauchen sie auf ihrem Weg. Die Auswahl eines Rechenzentrums in der Nähe der Zielgruppe trägt daher direkt dazu bei, den Energieverbrauch zu senken. Wenn beispielsweise ein günstiger US-Webhoster präferiert wird, sich die Zielgruppe jedoch in Deutschland befindet, dann wird jedes Mal Energie dafür verschwendet, die Daten quer
[Seite 4]
über den Atlantik und zurück zu verschicken. Darüber hinaus kann diese zusätzliche Entfernung auch zu einer Verlängerung der Seitenladezeiten führen.
Das Hosting einer Website in einem Rechenzentrum in der Nähe des Zielpublikums ist also optimal für die Benutzerfreundlichkeit und die Energiebilanz. Zudem bietet sich Hosting in Deutschland oder der EU auch bereits aus Datenschutzgründen an.
In Bezug auf Energieeffizienz sollte man auch über die Server-Technologien des Rechenzentrums nachdenken:
Beispiel PHP: Neuere Versionen von PHP sind meist nicht nur schneller, sondern verbrauchen auch weniger Serverressourcen und damit weniger Energie. Dies gilt sicher auch für PHP-Alternativen.
Zudem gehen beim Update einer Software auf die neuste Version mit der erlangten Performance-Steigerung meist auch sicherheitstechnische Vorteile einher.
Die Energieeffizienz von Rechenzentren lässt sich mit einer Kennzahl namens Power Usage Efficiency, kurz PUE einstufen. Die PUE zeigt das Verhältnis von der Gesamtenergie, die in das Rechenzentrum gelangt, zu der Energie, die tatsächlich benötigt wird, um dessen Computer zu betreiben. Dies verdeutlicht dann die Menge an Energie, die für nicht- rechenbezogene Aktivitäten, wie Kühlung, verwendet wird.
Die typische PUE für ein Rechenzentrum liegt bei etwa 1,67. Dies bedeutet, dass von 1,67 Watt, die in das Rechenzentrum fließen, nur 1 Watt für die Stromversorgung der Computersysteme verwendet wird. Je mehr sich der PUE-Wert also der Zahl 1 nähert, umso effizienter arbeitet das Rechenzentrum. Hochleistungsrechenzentren, wie die von Google betriebenen, können einen PUE-Wert von bis zu 1,11 aufweisen.
Es kann auch ein Hoster gewählt werden, der ausschließlich mit Ökostrom arbeitet, auf effiziente Klimatisierung setzt und ein eigenes Rechenzentrum betreibt. In Deutschland ist dies zum Beispiel bei Biohost oder Mittwald möglich und auch all-inkl setzt auf Strom aus regenerativen Energien. Dies allein reicht sicher nicht aus, um das online entstandene CO₂ zu kompensieren, aber es sorgt zumindest für Schadensbegrenzung.
Soweit möglich sollte für das Web-Hosting ein Rechenzentrum mit dem Blauen Engel verwendet werden.
- Bots blocken
Das Blockieren von Bots kann den Energieverbrauch einer Website unter Umständen deutlich senken - je nachdem wie stark die Website üblicherweise von Bots frequentiert wird. Es wird vermutet, dass Bots oft bis zu 50% der Ressourcen, wie Rechenleistung und Bandbreite, verbrauchen können.
Hier steckt also möglicherweise ein deutliches Energieeinsparpotential.
[Seite 5]
- Statische Seiten und Caching
CMS-basierte Webseiten stellen Datenbank-Abfragen und generieren daraus dynamisch Seiten. Wenn also jemand versucht eine Seite zu laden, muss der Webserver jedes Mal erst nachschauen, welche Informationen er an den Benutzer zurücksenden soll bevor er sie senden kann. Und dafür verbraucht er mehr Energie. Eine Lösung sind Caching- Technologien, aber in einigen Fällen ist es sogar möglich, einfach statische Webseiten ohne Datenbank auszuliefern. (Was beispielsweise bei einer sehr hohen zu erwartenden Seitenfrequentierung sinnvoll sein kann)
Daher sollte man entweder ganz schlicht und einfach statische Dateien in HTML, CSS und JS schreiben oder einen Generator für statische Seiten verwenden, um CMS-basierte Webseiten in statische Dateien zu konvertieren.
Ist das nicht möglich, so kann die Energieeffizienz bei der regelmäßigen Aktualisierung des CMS durch immer bessere Cachingtechnologien optimiert werden.
Caching-Technologien erzeugen vorab statische Versionen jeder Seite, so dass der Energieverbrauch des Servers deutlich reduziert und die Ladezeiten der Seiten erheblich verkürzt werden. Die Einrichtung kann durchaus kompliziert sein, aber viele Hoster bieten diese Option mittlerweile als Zusatzservice an.
Die Energieeffizienz und Performance der Website kann durch Server-Caching also mit wenig Aufwand enorm verbessert werden.
- DARK Mode hilft
Dunkle Webseiten waren eine der ersten Techniken, die vor vielen Jahren zum Energiesparen auf Websites populär wurden. Sie verschwanden jedoch mit dem Aufkommen von LCD-Bildschirmen, die durch eine permanente Hintergrundbeleuchtung gekennzeichnet sind und immer die gleiche Energie verbrauchen - unabhängig von der auf dem Bildschirm angezeigten Farbe. Mit dem Aufkommen von OLED-Bildschirmen, die jedes Pixel einzeln beleuchten, ist die Verwendung dunklerer Farben jedoch wieder eine praktikable Technik, um den Energieverbrauch auf Endgeräten zu reduzieren.
- PWA (Progressive Web App)
Durch die progressive Web-App-Technologie können Webseiten Funktionen zu nutzen, die normalerweise nur in native Apps verfügbar sind. Beispielsweise das Zwischenspeichern von Dateien auf dem Endgerät des Nutzers, mit dem klaren Vorteil, dass Inhalte und Assets bei wiederholten Besuchen nicht jedes Mal neu geladen werden müssen. Dies kann die zu übertragende Datenmenge deutlich reduzieren, insbesondere auf mobilen Geräten, bei denen die Datenübertragung energieintensiver ist als bei drahtgebundenen Verbindungen.
Neben der Energieeinsparung werden zudem automatisch Ladezeiten und Benutzerfreundlichkeit optimiert und das ohne irgendwelche Nachteile.
[Seite 6]
- Auf Webfonts verzichten
Webfonts können Webseiten schöner & individueller machen - sie wirken sich jedoch oft negativ auf die Dateigröße der Website aus. Eine einzelne Schriftdatei kann bis zu 250kb groß sein - und das pro Schriftstil. Wer also gern light, fett, kursiv und Kapitälchen verwendet landet schnell bei 1MB Zusatzgewicht. Wer Daten, Ladezeiten und Energie sparen will, sollte daher sparsam mit der Anzahl der Schriften und auch deren Schriftstilen umzugehen, weniger ist hier mehr.
Verwenden Sie keine Webfonts. Verwenden Sie stattdessen Systemschriften.
- Leichter Code
Schlanker und effizienter Code ohne Doppelungen und mit effizienter Abfrage, wie z.B. css- Framework Spectre, ist nicht nur energiesparend, sondern auch gut für Performance und Wartbarkeit. Das gilt natürlich auch bei der Verwendung von fremden Frameworks und Bibliotheken.
(vgl. https://pdir.de/news/24-tipps-fuer-nachhaltige-webanwendungen.html )