Klimaeffiziente Webseiten - nachhaltiges Webdesign
Jeder Aufruf einer Webseite benötigt Energie. Zunächst wird ein entfernt stehender Server in einem Datenzentrum angefragt. Dieser Server verarbeitet die Anfrage und sendet eine Vielzahl von Daten wie Skripte, Bilder und andere Inhalte zurück an das Endgerät. Der Browser des Endgeräts muss diese Daten dann ausführen und darstellen. Diese Vorgänge sowie der Transport der Daten über Telekommunikationsnetzwerke sind energieintensiv. Durch gezielte Maßnahmen kann der Energiebedarf von Webseiten signifikant gesenkt werden. Positive Begleiterscheinung solcher Maßnahmen: Wege zur Energie Einsparung von Webseiten führen automatisch zu einer deutlichen Performance Verbesserung und steigern das Nutzererlebnis.
Der Inhalt teilt sich in die Abschnitte "Design & Inhalte", "Entwicklung" und "Hosting".
Design & Inhalte
Der Rahmen für Design und Inhalt eines Webprojekts wird durch spezifische Projektanforderungen vorgegeben. Auch unter Berücksichtigung dieser Vorgaben können Designer und Redakteure maßgeblichen Einfluss nehmen, so dass eine Webseite klimafreundlich betrieben werden kann.
Nutzererlebnis / User Experience (UX)
Gutes Webdesign ermöglicht dem Besucher ein gutes Nutzererlebnis. Sind beispielsweise Inhalte intuitiv ansteuerbar, ist das von großem Mehrwert für alle Besucher. Das bewirkt zudem einen reduzierten Energieaufwand durch die Vermeidung unnötiger Seitenaufrufe.
Fonts
Fonts werden von einem Server geladen und erhöhen somit den Energieverbrauch sowie die Ladezeit der Webseite. Daher sollte die Anzahl verwendeter Fonts stark beschränkt sein.
Der energieeffizienteste Einsatzes von Fonts wäre das Verwenden von Systemschriftarten, denn diese Schriften werden lediglich lokal vom Endgerät geladen.
Dark Mode
LCD Monitore haben eine permanente Hintergrundbeleuchtung. Bei OLED Displays werden dagegen die Pixel einzeln beleuchtet, so dass durch einen Dark Mode eine Energieeinsparung möglich ist.
Sinnvolle Suchmaschinenoptimierung (SEO)
SEO erleichtert Anwendern die gezielte Suche nach Informationen. Intelligentes SEO macht die Suche energieeffizienter, da kürzer gesucht wird und weniger irrelevante Seiten aufgerufen werden, um zum gesuchten Ergebnis zu kommen. Dazu können unwichtige Seiten einer Website z.B. auf "noindex" geschaltet werden.
Relevante Texte
Relevante Textinhalte mit effizienter Textlänge führen zu einer effektiven Verweildauer und heben zudem die Qualität der Website.
Relevante Bilder/Videos
Bilder stellen meist den größten Teil der vom Server zu ladenden Datenmenge dar. Der Einsatz von Bildern sollte bedacht erfolgen. Stellen sie für Betreiber und Besucher keinen Mehrwert dar, sollte darauf verzichtet werden. Dies gilt umso mehr für Videos. Video Dateien sind sogar deutlich größer und zudem sehr verarbeitungsintensiv. Auch diese sollten nur sehr ausgewählt eingesetzt werden.
System schlank halten
Nicht benötigte Dateien, Seiten, Inhalte und der Papierkorb sind regelmäßig zu löschen. Dadurch wird Speicherplatz frei und der Server arbeitet effizienter, z.B. beim Erstellen von Backups.
Entwicklung
Jedes Projekt hat spezifische Anforderungen an Konzeption und Design. Dennoch haben Entwickler maßgeblichen Einfluss auf die Energieeffizienz einer Website und in verschiedene Bereichen auch die volle Kontrolle über die Optimierung von Design und Inhalten.
Sauberer Code
Performanter Code ist schlank und sauber geschrieben. Effizienter Code wird an verschiedenen Stellen genutzt und vermeidet überflüssige Teile. Das gilt insbesondere beim Einsatz von Frameworks und Bibliotheken. Bei der Verwendung eines CMS wie TYPO3 oder Wordpress sind unnötige Plugins zu vermeiden, um die Serverlast zu reduzieren und das Frontend schlank zu halten.
JavaScript reduzieren
JavaScript (JS) Dateien werden vom Server geladen und vom Browser ausgeführt. Dadurch tragen sie in zweierlei Hinsicht zum Energieaufkommen einer Website bei. JS beansprucht die CPU des Rechners stärker als andere Datei Typen. Insbesondere beim Einsatz großer Monitore führt dies erkennbar zu einer Erwärmung des Rechners und dem Hinzuschalten der Lüftung. Javascript Bibliotheken wie jQuery können durch reines JS ersetzt werden. CSS Animationen sind zudem energieeffizienter als JS Animationen. Werbeskripte und Website Tracking sind zudem meist überflüssig, da hiervon kein Mehrwert für den Nutzer der Website entsteht.
Bilder & Videos optimieren
Bilder und Videos sind der größte Teil der zu übertragenden Datenmenge einer Website. Es gibt technische Möglichkeiten, um die Energieeffizienz erheblich zu steigern:
- Bilder so beschneiden, dass sie entsprechend der Darstellungsgröße auf der Webseite eingebettet sind.
- Bei großen Headern und Slidern die Bilder in unterschiedlichen Größen bereitstellen und entsprechend der Displaybreite ausgeben.
- Für jedes Bild/Grafik sollte das effizienteste Dateiformat verwendet werden, z.B. für Bilder WebP statt JPG und für Icons SVG statt PNG.
- Die Qualität von JPGs und WebPs kann ohne drastische Einbußen meist signifikant heruntergesetzt werden. Das Bildmaterial von professionellen Fotografen lässt sich ohne relevanten Qualitätsverlust meist deutlicher reduzieren als das von Laien.
- Durch Tools wie SVGO, TinyPNG etc. können JPGs, SVGs, PNGs etc. teilweise deutlich komprimiert werden. Die Qualität wird dabei nicht sichtbar herabgesetzt.
- Icons können in einer SVG-Sprite zusammengefasst werden. Dadurch wird für diese Icons nur noch ein Server Aufruf benötigt.
- Auch die Dateigröße von Videos wird durch bewusstes herabsetzen der Qualität und verlustfrei (z.B. mit HandBrake) deutlich reduziert.
- Die Videolänge auf das Wesentliche beschränken.
- Automatisches Starten von Videos vermeiden (nervt ohnehin).
Diese Maßnahmen reduzieren den Energieverbrauchs signifikant und erhöhen die Performance der Webseite durch schnellere Ladezeiten.
Lazy Loading verwenden
Beim Lazy Loading werden Bilder dynamisch geladen und angezeigt. Dabei wird ein Bild erst geladen und angezeigt, wenn Besucher durch Scrollen der Webseite das Bild erreichen. Lazy Loading verbessert die Ladegeschwindigkeit von Webseiten und verhindert ein unnötiges Laden, da nicht alle Website-Besucher bis zum Ende einer Webseite scrollen. Lazy Loading wird von aktuellen Browsern durch das setzen eines HTML-Attributs unterstützt, die Verwendung von Javascript ist somit nicht mehr notwendig.
Schriften optimieren
Sofern keine Systemschriftarten verwendet werden, sind Schriftarten mit dem Webfont Dateiformate WOFF2 zu bevorzugen (ggfs als Fallback für ältere Browser WOFF). Dateiformate wie TTF, OFT oder SVG sind deutlich größer. Zudem können mit Tools wie Font Subsetter nicht benötigte Zeichen ausgeschnitten werden.
Browser Caching nutzen
Durch das Definieren von Browsercaching-Regeln kann bei wiederkehrenden Besuchern die übertragene Menge an Daten deutlich verringert werden. So werden Bildformate, Videos, Fonts, JS, CSS etc. im Browser vorgespeichert. Die angegebene Cache-Dauer sollte möglichst lang sein. Das Anhängen z.B. der Versionsnummern ermöglicht bei Änderungen das erneute laden der Datei.
Statische Webseiten ausliefern
Webseiten, die auf einem CMS aufgebaut sind, stellen Anfragen an Datenbanken und generieren dynamisch die Seiten. Das verlangsamt nicht nur die Ladezeit, sondern erfordert auch serverseitig einen Mehraufwand und somit einen erhöhten Energieaufwand. CMS wie TYPO3 setzen daher Server Caching Technologien ein (siehe nächstes Kapitel) oder - noch besser - generieren temporäre HTML Seiten, die dann bei Aufruf ausgeliefert werden (z.B. TYPO3 Erweiterung "Static File Cache"). Ansonsten empfehlen sich Static Website Generatoren und statisches Website Hosting, um statische Dateien zu generieren.
Aktuelle Software verwenden
Sind das CMS und Plugins auf einem aktuellen Stand, wird die Verarbeitung auf dem Server meist reduziert und die Webseiten werden beschleunigt. Zudem erhöht das die Sicherheit, so dass das System weniger anfällig für Schadcode ist. Eine gehackte Website kann in der Folge Schadsoftware an die Besucher übertragen. In der Folge haben Bots wie illegales Cryptomining einen enormer Energiebedarf.
Unerwünschte Bots sperren
"Gute Bots" sind zum Beispiel die Crawler der Suchmaschinen. Ist eine Indexierung von Webseiten unerwünscht, kann z.B. der Google Bot durch einen Eintrag in der robots.txt Datei geblockt werden. Damit wird die Anfrage auch nicht vom Server verarbeitet. Es gibt aber auch definitiv unerwünschte Bots wie Spam Bots. Unnötiger Versand von Formularen kann z.B. durch den Einsatz von Honeypots und Captchas verhindert werden. Auch hier gilt: Aktuelle Software schützt besser.
Progressive Web App (PWA)
Durch die PWA Technologie können Funktionen genutzt werden, die normalerweise nur nativen Apps zur Verfügung stehen. Insbesondere die Möglichkeit, dass Dateien und Inhalte direkt auf dem Gerät des Nutzers gespeichert werden. Der Vorteil liegt hier insbesondere beim wiederholten Besuch der Seite, denn die zu übertragende Datenlast ist nun erheblich reduziert und damit auch das Energieaufkommen. Auch die Ladezeit ist entsprechend reduziert und das Benutzererlebnis gesteigert.
Cronjobs prüfen
Cronjobs sind automatisierte, wiederkehrende Aufgabe auf einem Server (z.B. das Erstellen eines Backups). Es gilt zu prüfen, ob alle Cronjobs notwendig sind bzw. das zeitliche Intervall heraufgesetzt werden kann. Wird ein Cronjob seltener durchgeführt, wird entsprechend weniger Energie benötigt.
Website Hosting
Webseiten werden auf Servern in einem Rechenzentrums gehostet. Rechenzentren zählen in Deutschland mit zu den größten Energieverbrauchern.
Rechenzentrum mit 100% Ökostrom verwenden
Wird eine Website über ein Rechenzentrum mit Strom aus 100% Ökostrom betrieben, ist bereits der serverseitige Energiebedarf klimaneutral.
Rechenzentrum mit guter PUE Bewertung
Zur Ermittlung der Energieeffizienz von Rechenzentren wurde der PUE Wert (Power Usage Effectiviness) eingeführt. Die verbrauchte Energie eines Rechenzentrums wird ins Verhältnis zur Energieaufnahme der IT-Infrastruktur gesetzt. So ist der PUE Wert sicherlich ein interessanter Indikator, lässt aber auch wichtige Faktoren unberücksichtigt: Rechenzentren brauchen Reserven, um die teilweise beachtlichen Schwankungen in der Auslastung abfangen zu können.
Datenzentrum in Nähe der Website Besucher
Kürzere Transportwege der Daten über Telekommunikationsnetzwerke reduzieren automatisch den Energiebedarf. Wird der Großteil der Webseiten aus Deutschland aufgerufen, sollten der Server Standort ebenfalls in Deutschland sein. Vorsicht: viele deutsche Hoster wie 1und1 oder Hosteurope betreiben einen Großteil der Server im Ausland.
Server Caching verwenden
Content Management Systeme (CMS) wie TYPO3, Drupal oder Wordpress generieren Seiten automatisch. Grundsätzlich ist das sehr ineffizient, da hier bei jedem Aufruf die Seite auf dem Server zunächst erstellt werden muss, bevor sie ausgeliefert wird. Daher verwendet z.B. TYPO3 unter anderem APCu als Cache-Backend. APCu wird von vielen Hostern bereitgestellt und muss vom Entwickler aktiviert werden. Es müssen nun deutlich weniger Seiten generieren werden, da einmal generierte Seiten gespeichert werden. Außerdem gibt es Reverse Cache Proxy Lösungen wie Varnish.
Aktuelle PHP Version verwenden
Aktuelle PHP-Versionen sind nicht nur schneller, sondern verbrauchen auch weniger Serverressourcen und sparen damit Energie.
Content Delivery Network (CDN) verwenden
Bei manchen Webseiten sind die Besucher über die ganze Welt verteilt. Hier bieten sich Content Delivery Networks (CDNs) an. CDNs sind Netzwerke regional verteilter Server, die Skripte sowie besonders großer Inhalte wie Bilddateien oder Videos ausliefern. Dabei werden Dateien unabhängig vom Standort des Besuchers meist über einen regionalen Server ausgeliefert. Dadurch verringern sich die Transportwege der Daten teilweise extrem und die Performance der Webseite steigt.
Update 8.6.2022:
Webseiten auf Energieeffizienz und Performance testen
