Grün ist das neue Schnell

15 Energie-Hacks für nachhaltigere Webentwicklung

Mit unserer Liste der besten Energie-Hacks könnt ihr im Handumdrehen die richtigen Schalter finden, um eure Webprojekte effizienter aufzusetzen und zu betreiben. Die gute Nachricht ist: All diese Maßnahmen bringen euch auch in puncto Performance und reibungsloser User Experience ganz weit nach vorn. Denn eine schlanke Website bringt automatisch schnellere Ladezeiten mit sich. 

Los geht's

Die erste Hürde ist immer, einen Anfang zu finden. Nicht jede Methode mag für jedes Projekt gleich viel Sinn machen und einige Punkte kennt ihr sicher schon. Im Alltag muss es oft schnell gehen und da bleiben gute Vorhaben gern mal auf der Strecke. Wir wollen euch also helfen, sinnvolle Maßnahmen zu finden, mit denen ihr einfach starten könnt. Die Tipps erfordern unterschiedliches Know-how, kosten mal mehr mal weniger Zeit, aber jede einzelne bringt euch näher in Richtung Klimafreundlichkeit. Ihr müsst beispielsweise nicht alle Bilddateien auf einmal optimieren, ihr könnt aber von jetzt an passend skalierte Dateien neu hochladen.

 

Lange Rede, kurzer Sinn: 
Spart Energie ein! Wir helfen euch dabei.

Die Klima-Skala:

Wir zeigen euch kleine Kniffe und größere Stellschrauben. Damit ihr den Impact kennt, den die einzelne Maßnahme für euch hat, haben wir die Klima-Skala erfunden: 

 

1 = kleines Schräubchen, zeigt aber in Summe Wirkung

5 = macht einen großen Unterschied

UX-Design 
und Content

Zu den Hacks

Web-
entwicklung

Zu den Hacks

Web-
hosting

Zu den Hacks

UX-Design und Content

Von SEO über Webfonts zu Lazy Loading. Design und Content matters. 

Auch in Bezug auf Nachhaltigkeit.

1. Sinnvolles SEO betreiben

Nicht selten rankt die eigene Seite zu irrelevanten Keywords. Wenn diese in den Top 15 erscheinen, ist das vielleicht noch sinnvoll. Weniger jedoch, wenn sie auf den Positionen dahinter sind. Wer irrelevante Keywords sucht und entfernt, kann nicht nur Suchergebnisse entschlacken und damit Energie einsparen, sondern zudem sein Keyword-Profil schärfen und bestehende relevante Rankings stärken.


Daneben lohnt es sich, zu schauen, welche Seiten für Suchmaschinen tatsächlich relevant sind. Solche, die es nicht sind, sollten auf NoIndex gesetzt werden. Dadurch wird die Seite von Suchmaschinen ignoriert, was Ressourcen spart. Zum Beispiel die Seite 10 einer Online-Galerie oder seit Jahren nur einmalig aufgerufene Blog-Artikel zählen dazu.

2. Bilder und Videos

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.

Plugin-Empfehlung für WordPress:

  • Imsanity
    Plugin zur automatischen Skalierung und Komprimierung von Bildern.

Extension-Empfehlungen für TYPO3:

3. Verwendung von Fonts

Fonts müssen vom Server geladen werden und verlangsamen die Ladezeit. Das hat einen negativen Einfluss auf Performance und SEO. Spare also Energie ein, indem du dich auf möglichst wenige Fonts beschränkst. Oder nutze Fontanbieter, die sich auf das Ausliefern von Webfonts spezialisiert haben.

4. Mobil optimierte Seiten

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.

5. Lazy Loading

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.

Webentwicklung

Wie du mit performantem Code, Browsercaching, weniger JavaScript 

uvm. nachhaltiger entwickelst.

6. Nutze performanten Code

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.

7. Nutze weniger JavaScript

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. 

Plugin-Empfehlungen für WordPress:

8. Macht die Nutzung einer Progressive Web App (PWA) Sinn?

PWA bietet die Möglichkeit, Dateien auf dem Gerät des Benutzers zwischenzuspeichern. Inhalte und Assets müssen bei wiederholten Besuchen also nicht neu geladen werden, dadurch wird die Datenmenge reduziert.
Wie die meisten Punkte kann es auch dazu beitragen, Ladezeiten und Benutzererfahrung ohne echte Nachteile zu verbessern.

9. Nutze Browsercaching

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.

Beispiel:

Statt das Script mit index.js zu laden, lieber index.js?v=1.2.0 verwenden. Bei der WordPress-Registrierung kann man einfach eine Version mit angeben. Es kann die Plugin-Version, eine eigene Skript-Version oder einfach der Edit-Timestamp der Datei verwendet werden.

Webhosting

Server verbrauchen Ressourcen, aber auch hier gibt es Einsparpotenzial. Bspw. bei Backups, Bots und Cronjobs.

10. Nutze Servercaching

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.

Plugin-Empfehlung für WordPress:

APCu für TYPO3 mit einem Klick im Kundencenter einrichten: 

11. Cronjobs überprüfen

Cronjobs und In- und Exporte für Warenwirtschaftssysteme sollten nicht öfter als nötig ausgeführt werden. Die grundsätzliche Überlegung lautet: Wie oft sollte ein Cronjob durchgeführt werden? Muss das minütlich passieren oder ist ein stündliches Intervall ausreichend?

12. Nutze CDN

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.

Nähere Informationen und wie du es bei uns einrichtest erfährst du im Blog:

13. Nutze aktuelle Software

Halte deine CMS/Shopsysteme samt zugehöriger Erweiterungen und Themes stets aktuell. Dies beschleunigt nicht nur deine Website, sondern erhöht auch signifikant die Sicherheit deiner Anwendung und der gespeicherten Daten. 

 

Gehackte Webseiten liefern zudem Schadcode an deine Webseitenbesucher aus, der zum Beispiel durch Cryptomining zusätzliche Systemressourcen und damit Energie verbraucht. Gleiches gilt für den Fall, dass deine Seiten für den Versand von Spam-Nachrichten missbraucht werden.

Wir bieten euch die ELTS-Versionen von TYPO3 kostenlos an. Infos findet ihr z.B. hier:

14. Unerwünschte Bots 
sperren

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.

15. Ordnung halten

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.