15 Energie-Hacks für nachhaltigere Webentwicklung

Je mehr Bilder und je größer die Bilddateien, desto größer ist auch die Datenmenge, die gesendet wird. Das verbraucht viel Energie.

Fotos sollten responsive optimiert werden. Kann aufgrund der View-Port-Breite sowieso nur ein 400px-Bild angezeigt werden, sollte dieses auch als Alternative zu einem vollauflösenden Bild auf dem Server abgelegt werden. 

Verwende Vektorgrafiken wie z. B. SVGs. Diese haben in der Regel eine sehr geringe File Size, sind jedoch frei skalierbar. Achtung: Nicht jedes Bild kann willkürlich in eine Vektorgrafik umgewandelt werden.

Lade also Bilder gleich im richtigen Maßstab hoch, anstatt dich auf das CSS zu verlassen.

Verwende ein Tool wie jpegoptim, optipng und gifsicle, um Bilddateien ohne sichtbaren Qualitätsverlust zu komprimieren, speichere am besten gleich in einem effizienten Dateiformat ab, also z. B. ein WebP anstatt eines JPEG.

Prüfe bei der Einbindung von Videos, ob die Anzahl der gestreamten Dateien reduziert werden kann. Automatische Wiedergaben sollten entfernt und Videoinhalte kurz gehalten werden.

Mobil optimierte Seiten und grundsätzlich die Anwendung von Responsive Design können dazu führen, dass später auch in der Desktop-Ansicht weniger große Daten geladen werden müssen. Dies kann die Seiten-Ladezeit und die Energieeffizienz verbessern.

Besonders bei der Entwicklung von mobilen Applikationen ist das verzögerte Laden von Bildern ein häufig verwendetes Design Pattern. Lazy Loading sorgt für ein dynamisches Herunterladen und Anzeigen von Bildern. Dies kann die Website-Performance verbessern, da die Bilder erst geladen werden, wenn jemand nach unten scrollt oder über eine Reihe von Bildern blättert.

Effizienter Code ist grundsätzlich eine sinnvolle Sache. Duplications sollten vermieden und Queries effizient geschrieben werden. Bei der Verwendung von CMS wie z. B. WordPress, sollten nur Plugins installiert sein, die du auch tatsächlich nutzt, alle nicht genutzten bitte deaktivieren und entfernen.

Reduce, reuse, recycle – die großen R der digitalen Müllvermeidung. Reduziere deinen Content für eine deutlich kompaktere und performante Website. Arbeite mit vorhandenen Modulen und Materialen wie beispielsweise Style-Elementen und Überschriften und verwende den Code mehrfach.

JS wirkt sich auf zwei Arten auf die Effizienz der Website aus: Zum einen wird Dateigewicht zur Seite hinzugefügt und zum anderen erhöht es den Verarbeitungsaufwand beim Benutzergerät. Letzteres gilt viel mehr für JS als für andere Dateitypen.

JavaScript sollte nur auf Seiten geladen werden, auf denen es wirklich gebraucht wird. Oftmals werden Scripts, die nur auf der Startseite benötigt werden, auch auf allen Unterseiten geladen. Über SERP gelangt man direkt zur gewünschten Unterseite und vermeidet damit unnötige Daten. Bei WordPress z. B. sollte das wp_register_script bzw. wp_enqueue_script in ein if(is_home()) {...} gepackt werden.

Einmal integrierte Tracking-Codes können Dauerbegleiter jedes Website-Aufrufs werden. Es lohnt sich immer wieder, zu schauen, ob die aktuell genutzten Tracking-Dienste tatsächlich benötigt werden. In manchen Fällen können sie wegfallen, in anderen so konfiguriert werden, dass sie nur in bestimmten Seitenbereichen aktiv sind. 

Durch den Einsatz guter Browsercaching-Regeln kann die übertragene Datenmenge bei wiederkehrenden Besuchern stark verringert werden. Es bietet sich vor allem für Medien wie Bilder und Videos sowie CSS / Javascript und Fonts an. Die Cache-Dauer sollte dabei möglichst lang gewählt werden, wenn keine Änderungen an den betroffenen Dateien absehbar sind. Vor allem bei Bildern kann man einen sehr langen Zeitraum festlegen. 

Browser-Caching lässt sich über GET-Parameter noch besser steuern. Man kann die Skript- oder Plugin-Version an den Skript-Pfad anhängen. Dadurch kann auch bei Dateien, die sich häufiger ändern oder bei denen Änderungen immer sofort geladen werden müssen, eine hohe Cache-TTL angegeben werden.

Nutze die Möglichkeiten zum Caching deines CMS/Shopsystems, damit die Seiten nicht bei jedem Besuch neu generiert werden müssen. Neben dem Caching auf Basis des Dateisystems und der Datenbank bietet sich vor allem der APCu als Cache-Backend an, um Seiten sehr schnell auszuliefern. 

Für stark frequentierte Seiten kann man zudem auf eine Reverse-Cache-Proxy-Lösung wie Varnish setzen. Diese speichert einmal generierte Seiten ebenfalls zwischen und liefert diese anschließend an die Seitenbesucher aus. Das CMS/Shopsystem muss dadurch deutlich weniger Seiten generieren, wodurch die Systemlast signifikant gesenkt wird.

Wie du APCu für TYPO3 mit einem Klick im Kundencenter einrichtest, erfährst du hier. 

Content Delivery Networks liefern statische Ressourcen einer Website wie Bilder oder Skripte von mehreren Netzwerkknoten (also Rechenzentren) aus. Dadurch wird die Last einer Anfrage auf verschiedene Systeme verteilt. Bei entsprechender Konfiguration wird primär der Netzwerkknoten angefragt, der die beste Latenz besitzt, sich also am „nächsten“ am Kunden befindet.

Bei Websites mit hohem Besucheraufkommen, die aus geografisch weit auseinander liegenden Regionen angefragt werden, ist der Einsatz eines CDN auch in Bezug auf Energieeinsparung meist sinnvoll, da so Latenzen minimiert werden und Transitaufwände sinken. 

Bei Präsenzen mit geringem Besucheraufkommen, die vorwiegend regional angefragt werden, ist die Bilanz durch das permanente Vorhalten weiterer Serverressourcen im CDN in Bezug auf Energie-Einsparung zumeist kontraproduktiv.

Sperre unerwünschte Bots von deiner Seite aus. Damit werden die zugehörigen Anfragen direkt abgelehnt und müssen nicht mehr von deinem CMS/Shopsystem verarbeitet werden. Dies schont unmittelbar die Systemressourcen und sorgt auch langfristig dafür, dass etliche unliebsame Bots die Aufrufe auf deine Seiten einstellen.

Wer sich von obsoleten Dateien trennt, verringert die Größe seines Projekts und trägt damit zu einer effizienteren Auslastung des Gesamtsystems bei. Ebenso wird der benötigte Speicherplatz auf den Backupsystemen verringert, wodurch diese ebenfalls effizienter genutzt werden können. Stichworte hier: Reduktion der Anzahl von Revisionen, Papierkorb leeren, uvm.