Kampagnenwebsite fürs Klima optimiert
Vor ein paar Wochen hatte ich mit einem meiner langjährigen Partner und Auftraggeber ein Gespräch über °Cleaner Web und die dahinterliegende Idee, den CO₂-Fußabdruck von Websites zu verkleinern. Jetzt hat mich Nicolas Entrup von Shifting Values gebeten, mit überschaubarem Aufwand seine Seite zumindest ein gutes Stück weit zu optimieren.
Da ich Herausforderungen mag, wollte ich sehen, was mit sehr wenig Aufwand möglich ist.
Vor der Optimierung
Ausgangspunkt der Optimierung war eine ältere WordPress-Website, die als Basis ein Multi-Purpose-Theme verwendet. Also eines jener Kauf-Themes, die out-of-the-box sehr viel können und es oft recht einfach machen, sich selbst eine Website zusammenzustellen. Das hat natürlich seine Kosten, denn eine Website, die sehr viel kann, hat auch sehr viel Code. Und viele der Multi-Purpose-Themes senden davon auch standardmäßig eine ganze Menge mit – selbst, wenn das im Einzelfall gar nicht nötig wäre.
Um einen Vergleich vor und nach der Optimierung zu haben, habe ich mir zwei Werte angesehen.
Über einen CO₂-Rechner für Websites habe ich mir eine erste Schätzung eingeholt. Dies ist eine rechnerische Annäherung an das CO₂ (immer wenn wir hier von CO₂ sprechen sind natürlich CO₂-Äquivalente gemeint), das durch den Aufruf einer Website entsteht. Wie sich dies korrekt berechnen lässt, ist aktuell nach wie vor eine lebhafte Diskussion in unserer Community.
Über das Audit von °Cleaner Web habe ich ermittelt, welchen Score die Website aktuell erreicht. Der Score errechnet sich aus der Prüfung und Analyse von derzeit 34 unterschiedlichen Faktoren, die neben der Gesamtgröße einer Website einen Einfluss auf den Stromverbrauch am Server, bei der Übertragung oder am Endgerät haben. Je höher der Einfluss eines Faktors, umso mehr Punkte steuert der Faktor bei.
Unsere Ausgangswerte
- 2,84 g CO₂ pro Seitenaufruf.
- 22 von 100 Punkten im Cleaner Web Scoring
Schritt 1 – der Server
Der Server verbraucht Strom, um Rechenleistungen durchzuführen und seine Einstellungen bzgl. Kompression, Übertragungsprotokoll, etc. haben einen großen Einfluss auf die zu übertragende Datenmenge. Und somit auch auf den Stromverbrauch beim Transfer der Daten.
Die drei größten Mankos des bestehenden Hostings
- Kein grüner Strom
- Kein Caching am Server
- Kein Caching der statischen Dateien im Browser des Endnutzers
Das bedeutet deutlich mehr CO₂-Ausstoß, um die Website am Server zu berechnen und auszuliefern und viele sinnlose Daten-Übertragungen, wenn mehrere Seiten aufgerufen werden.
Was haben wir gemacht?
An erster Stelle stand hier ein Wechsel auf einen grün gehosteten, optimierten Server mit NGINX-Caching und Redis, sowie einer Auslieferung der statischen Dateien mit einer Anweisung, dass der Browser diese bis zu einem Jahr aus seinem Zwischenspeicher nutzen kann, ohne sie erneut zu laden.
Der neue Server komprimiert die Daten auch stark für die Übertragung im Netz und nutzt mit http/2 ein moderneres Übertragungsprotokoll, was der vorherige Server beides nicht gemacht hat.
Was hat das gebracht?
Das Laden der Website hat bei einem erstmaligen Besuch auf dem altem Server 7,2 Sekunden gedauert. Erstaufruf der Website auf neuem Server 2,7 Sekunden und jeder Folgeaufruf dann nur noch durchschnittlich 474 ms.
Für das °Cleaner Web Scoring brachte dieser erste Schritt eine Verbesserung von 22 auf 54 Punkte. Was enorm ist. Aber nicht nur haben sich die Bewertungen für die auf den Server bezogenen Faktoren deutlich verbessert. Auch davon beeinflusste Daten wie die Gesamtgröße der übertragenen Daten verbessern sich hierdurch natürlich.
Mit 54 Punkten steht die Seite nun schon an der Schwelle zu den 70 Punkten, ab denen das °Cleaner-Web-Siegel genutzt werden kann.
Schritt 2 – die Medien-Inhalte
Und damit verbunden auch die Gesamtgröße der Website. Da auf den geprüften Seiten der Website keine Videos vorkommen, sind die größten Dateien der Website in diesem Audit Bilder. Dies ist meist der Fall. Wenn Videos auf Websites eingebunden sind und automatisch abspielen, sind diese oft der größte Faktor.
Hier aber sind es eben die Bilder.
Die drei größten noch nicht genutzten Hebel bei den Inhalten der Website
- Bilder werden nicht konsequent verzögert geladen (lazy load)
- Bildgröße ist nicht angepasst an die Anzeigegröße
- Bilder sind nicht fürs Web optimiert
Was haben wir gemacht?
Wir haben das sogenannte „Lazy Load“ für Bilder aktiviert. Dies ist bei Zugriff auf den Quellcode mittlerweile super einfach, da fast alle modernen Browser dies nativ unterstützen. Die einzige Ausnahme – Safari – ist gerade dabei, endlich nachzuziehen. Über ein simples loading="lazy" im image tag ist das schon aktiviert. Bei einer wie hier vorliegenden WordPress-Website geht das mit immer mehr Themes automatisch oder ist eine Option im verwendeten Theme. Auch bei dem hier verwendeten Multi-Purpose-Theme war das nach einem Update auf die neueste Version eine Einstellungsmöglichkeit in dessen Optionen.
Um die Bildgröße etwas mehr in den Griff zu bekommen, haben wir das Bildoptimierungs-Plugin „EWWW Image Optimizer“ installiert und konfiguriert. Das sorgt dafür, dass Bilder, die nicht ausreichend fürs Internet optimiert sind beim Upload nachträglich optimiert werden.
Die Bildgrößen selbst, also dessen Dimensionen an den unterschiedlichen Stellen, an denen Bilder angezeigt werden, können leider mit dem verwendeten Theme nicht einfach definiert werden. Daher konnten wir dies in dem knappen Zeitbudget nicht in Angriff nehmen. Daher fiel die Wahl für diesen Punkt auf eine Maximalgröße der Bilder, nicht jedoch auf eine exakte Anpassung je nach Endgerät. Dies ist bei vielen kostenlosen Themes und insbesondere bei sogenannten Multi-Purpose-Themes leider der Standard, da genau dadurch ja die Flexibilität beim Erstellen der Seiten entsteht.
Was hat das gebracht?
Vor der Optimierung wurden 24 Bilder beim erstmaligen Seitenaufruf der Startseite sofort geladen – nach Aktivierung des Lazy Load nur noch 14 Bilder. Sieben davon sind im Startseiten-Slider. Hier ist der Slider des Themes im Einsatz, der leider kein Lazy Load anbietet.
Allein durch das normale Komprimieren der Bilder über das Bildoptimierungs-Plugin konnten pro Bild im Schnitt knappe 10 Prozent der Größe eingespart werden – ohne sichtbaren Qualitätsunterschied.
Das erstmalige Laden der Website hat nach dem ersten Schritt der Optimierung noch 2,7 Sekunden gedauert. Der Erstaufruf der Website nach dem zweiten Schritt dauert nun nur noch 1,8 Sekunden.
Für das °Cleaner Web Scoring brachte dieser Schritt eine weitere deutliche Verbesserung von 54 auf 80 Punkte. Dazu haben auch hier wieder nicht nur die direkten Bewertungen für die oben genannten Faktoren beigetragen, sondern eben auch alle davon beeinflussten Werte wie die Gesamtgröße der übertragenen Daten.
Mit 80 Punkten erfüllt die Website hiermit nun die Voraussetzungen für das °Cleaner-Web-Siegel.
Schritt 3 – Optimierung der Gesamtgröße – ohne inhaltliche Veränderungen
Da noch ein wenig Zeit über war, schauen wir uns nach den grundlegenden oben beschriebenen Optimierungen im dritten Schritt noch den größten verbliebenen Hebel an, um noch ein wenig mehr zu optimieren. Dabei gehen wir noch nicht auf die Struktur und den Inhalt der Website ein, da dies ein umfassenderes Unterfangen ist.
Der größte noch nicht genutzte Hebel bezogen auf die Gesamtgröße
(den wir ohne inhaltliche Änderungen beeinflussen können)
- Ein hoher Anteil der Skripte und Design-Dateien, die geladen werden, werden gar nicht genutzt (typisches Problem von Multi-Purpose-Themes)
Was haben wir gemacht?
Wir haben analysiert, welche Skripte und CSS-Dateien (für das Design) aktuell geladen werden, woher diese kommen und ob diese tatsächlich (auf jeder Seite) benötigt werden. Die, die generell nicht benötigt werden, haben wir deaktiviert. Teils über Einstellungen im Theme und den Plugins, teils über ein „dequeue“ im Code.
Um die verbliebenen Dateien zu optimieren, müssen wir hier auf Grund der Dynamik im Code durch das Multi-Purpose-Theme, sowie der knappen zeitlichen Vorgabe auf ein Plugin zurückgreifen. Wir haben dazu Autoptimize installiert und konfiguriert.
Was hat das gebracht?
Eine nochmalige Verbesserung der Ladezeit von 1,8 auf 1,6 Sekunden und eine Reduktion des geladenen Javascripts um knapp 20 %. Da Javascript mehr Energie am Endgerät verbraucht als z.B. Bilder der selben Größe, ist das besonders schön.
Der °Cleaner Web Score ist dadurch und durch die indirekten Folgen davon von 80 auf 82 Punkte gestiegen.
Das Ergebnis
Wir hatten uns zum Beginn der Optimierung dieser Website zwei Werte angesehen.
Unsere Ausgangswerte:
- 2,84 g CO₂ pro Seitenaufruf.
- 22 von 100 Punkten im Cleaner Web Scoring
Nach den Optimierungen, die sich in 2,5 Stunden umsetzen ließen, liegen wir hier nun bei:
- 1,06 g CO₂ pro Seitenaufruf (Reduktion um knapp 63 Prozent)
- 82 von 100 Punkten im Cleaner Web Scoring
Was wären gute next steps für die nun mal „basic“ optimierte Website?
- Slider entfernen, wo irgendwie möglich. Viele Studien zeigen, dass Slider in den allermeisten Fällen eine schlechte User Experience darstellen und zu schlechteren Ergebnissen der Website führen. Wenn an manchen Stellen ein Slider sinnvoll eingesetzt wird, zum Storytelling oder um kompakt viele bildliche Eindrücke zu ermöglichen, sollte dort immer ein Slider gewählt werden, der verzögertes Laden der Bilder ermöglicht.
- Maximale Seitenbreite einführen, um eine klarere Definition der jeweiligen maximalen Bildgröße zu ermöglichen und damit weiteres Einsparungspotential auszuschöpfen.
- Einführung von modernen Bildformaten wie WebP und AVIF samt Konfiguration der Seite und des Servers dafür. Das modernere Bildformat WebP, das von modernen Browsern bevorzugt genutzt wird, kann zu weiteren Einsparungen von rund 30 Prozent pro Bild führen – AVIF, das modernste der Formate, kann bis zu 75 Prozent Dateigröße einsparen, wird aber noch nicht von vielen Browsern unterstützt. Aber man kann sowieso mehrere Bildformate parallel nutzen.
Was bleibt dann über?
Änderungen, die mit dem Inhalt und der Seitenstruktur zu tun haben.
Hier sind wir dann in einem Bereich, der eher bei einem umfassenden Refactoring, Re-Design oder kompletten Relaunch relevant ist. Wenn bestimmte Punkte nicht von Beginn an sowohl technisch als auch strukturell und im Design beachtet werden, ist es später tendenziell aufwändig, hier noch große Verbesserungen hinzubekommen.
- Komplexität des Codes der Website reduzieren
- Weniger Berechnungen beim Aufbau der Website im Browser verursachen
- Inhalte an sich auf den Prüfstand:
- Braucht es diese Anzahl an Blog-Artikeln auf der Startseite oder reichen auch weniger?
- Wie viele Bilder braucht es tatsächlich und in welcher Größe sind diese notwendig?
- Was passiert „above the fold“ – also in dem Bereich, der nach Laden der Seite ohne Scrollen sichtbar ist – und kann das entfernt oder weiter nach unten auf der Seite verschoben werden? Diese Frage ist besonders relevant für Bilder.
- Welche Funktionen (wie beispielsweise Slider) braucht die Website wirklich, um ihren Zweck gut zu erfüllen?
Conclusio
Dieses Experiment, in sehr kurzer Zeit eine Website möglichst gezielt klimabewusster zu machen, war für mich sehr spannend. Damit konnte ich sehen, dass über die Faktoren, die wir mit °Cleaner Web testen, zumindest laut der Berechnung des Website Carbon Calculators sehr große Einsparungen möglich sind – bei überschaubarem Aufwand. Hier sollte natürlich dann Seitenbetreiber:innen nicht stehen bleiben, sondern dies als Beginn eines Prozesses der laufenden Verbesserung sehen.
CO₂-Fußabdruck der Website in 2,5 Stunden mehr als halbiert – tolle Sache!
Dieser Artikel ist ein Teil unseres Blogs. Dort schreiben wir über unsere Ideen für klimabewusstere Websites und wollen Wege aufzeigen, wie Seitenbetreiber:innen, Designer:innen und Entwickler:innen hier selbst Schritte setzen können.
Dieser Artikel wurde von Michael Voit geschrieben.
Anregungen, Ideen und Fragen dazu gerne direkt an Michael oder an unsere E-Mail-Adresse [email protected].