Kundenwebsites erstellen: 3 Tipps für nachhaltigere Webentwicklung.

Je größer die Datenmenge, die gesendet wird, umso mehr Energie wird verbraucht. Bilder und Videos zu komprimieren ist der erste logische Schritt. 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 voll auflö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 die Bilder also am besten gleich im richtigen Maßstab hoch, anstatt dich auf das CSS zu verlassen.

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- und Extension-Tipps zur automatischen Skalierung und Komprimierung von Bildern:

WordPress: Insanity

TYPO3: Image Optimizer

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-Tipp für WordPress:

Lightweight Statistics: Reicht in der Regel für kleine Projekte

Koko Analytics: Ausführliche Statistiken ohne externe Dienstleister

Durch den Einsatz guter Browser Caching-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.

Wenn du deine Projekte im Managed Cloud Hosting von mittwald hostest, kannst du dir CO2-Ausstoß pro Website-Aufruf anzeigen lassen. So hast du jederzeit im Blick, wie klimaschonend deine Entwicklung ist. Teste das Hosting einfach 30 Tage kostenlos und prüfe die KPI bei deinen Projekten.