Irgendwann möchte ich einmal das Theme dieser Website veröffentlichen und bastle und tune immer mal wieder daran. Aktuell habe ich mich einmal dem Thema Geschwindigkeit angenommen. Ich möchte also: WordPress Sites beschleunigen. Bei GTmetrix kann man die Seite wieder und wieder testen lassen und erhält sehr gute Hinweise, wie man die Seite schneller machen kann. Dazu setzt GTmetrix zum einen auf YSlow (Yahoo) und zum anderen auf PageSpeed (Google).
Dabei geht es im Wesentlichen darum die Menge der zu übertragenden Daten zu reduzieren (optimieren) und dadurch die Ladegeschwindigkeit zu erhöhen und damit die Ladezeiten zu senken. Für www.tuxlog.de, habe ich die Ladezeiten ungefähr halbiert von knapp 7 Sekunden auf im Durchschnitt 3,6 Sekunden (gemäss GTmetrix).
Einige meiner Erkenntnisse möchte ich hier teilen. Vielleicht helfen sie euch auch weiter.
1. Cache und Compress Plugins
Angeschaut habe ich mir W3 Total Cache, Cachify und BWP Minify. Mit Cachify habe ich mit Abstand die besten Zeiten erreicht, jedoch keine Zusammenfassung der vielen Javascript und CSS Einbindungen, was je nach Anbindung zu längeren Zeiten führen kann. W3 Total Cache habe ich bis heute nicht zum Laufen gebracht. Warn- und Fehlermeldungen bis hin zum Absturz der Website, das war mir dann irgendwann zu anstrengend. BWP Minify ist relativ einfach einzurichten. Es fasst Javascript und CSS Dateien zusammen und Cached auch noch die Seiten. Für mich war das der beste Kompromiss. Zu den Plugins gibt es haufenweise Berichte im Netz. Einfach mal googlen.
2. CSS Sprites zur Reduzierung der notwendigen Zugriffe
Das Konzept der CSS Sprites beruht darauf, dass man viele Bilder in einer Datei, als ein Bild speichert und über CSS Regeln an der gewünschten Stelle jeweils genau den Ausschnitt des Bildes anzeigt, der das Einzelbild enthält. Zum Beispiel kann man die ganzen kleinen Icons, die auf einer Website verwendet werden in ein großen Bild speichern. Dann findet man das Icon 1 an den Koordinaten 0,0 des großen Bildes, das Icon 2 an der Stelle 0,50, das Icon 3 an der Stelle 0,100 u.s.w. Sagen wir die Icons wäre alle 16×16 Pixel groß. Jetzt definiert man CSS Regeln, die dafür sorgen, dass nur ein Teil des Bildes angezeigt wird. Für das Icon 2 würde dann der Bereich 0,50 bis 16,66 angezeigt. Dabei ergeben sich die 16 und die 66 einfach durch aufaddieren der Höhe und der Breite des Icons auf den Startpunkt 0,50.
Sehr schön erklärt und mit einem guten Praxisbeispiel versehen wird dies auf Webstandard. Um viele Bilder zu einem zusammen zu führen und die berechneten CSS Regeln zu erhalten bietet website-performance.org einen CSS Sprite Generator an, der Einwandfrei funktioniert.
Durch die Zusammenfassung in eine Datei wird erreicht, das nur noch wenige Bilddateien geladen werden. Damit reduziert sich die Anzahl der Zugriffe auf Websiten erheblich. Da die Technik relativ aufwändig ist, wird sie noch nicht von sehr vielen Themes verwendet.
3. CSS und Javascript offline komprimieren
Bei der Theme Entwicklung ist es hilfreich, wenn man seine CSS und Javascript Dateien gut formatiert und dokumentiert. Das erhöht die Lesbarkeit und Wartbarkeit. Dadurch werden die Dateien aber auch größer. Für die Entwicklung mittels Eclipse gibt es eine sehr schöne Anleitung wie man automatisch bei jeder Änderung an CSS und Javascript Dateien eine komprimierte Version erstellen lassen kann.
Die Anleitung hat Nicolas Debarnot auf seiner Homepage veröffentlicht. Und sie funktioniert bis auf eine Kleinigkeit exzellent. Der Builder wird bei jedem Speichervorgang aufgerufen und da das Skript nicht zwischen zu komprimierenden Dateien und anderen unterscheidet, erscheinen regelmäßig Fehlermeldungen in der Console. Ich habe eine kleine Änderung vorgenommen und so erspart man sich die Fehlermeldungen.
Das geändert Skript prüft, ob der Dateiname den Text „.src.“ enthält und komprimiert nur dann, sonst macht es gar nichts:
#!/bin/bash
# minifies js and css files
# by Nicolas DEBARNOT, tuned by tuxlog
if [ -f $1 ]; then
if [[ "$1" == *.src.* ]]; then
file=`echo $1 | sed 's/\.src//'`
java -jar yuicompressor-2.4.2.jar $1 -o $file --charset utf-8 --nomunge
fi
fi4. Bilder komprimieren / optimieren
Bilder tragen häufig dazu bei, dass große Datenmengen übertragen werden müssen. Verfahren der verlustfreien Komprimierung machen es möglich ohne Qualitätsverlust kleinere Bilddateien zu verwenden und so die Datenmenge zu reduzieren. GTmetrix bietet bei seinen Prüfungen direkt an optimierte Bilder zu erhalten. Speichert man diese dann auf seinem Server ab, so spart man teilweise erhebliche Datenmengen ein und beschleunigt damit den Ladevorgang. Wer seine Bilder selbst komprimieren möchte dem empfehle ich das Tool OptiPNG. OptiPNG optimiert Bilder verlustfrei und erzielt in meinen Tests die besten Kompressionsraten. Verarbeitet werden PNG, BMP, GIF, PNM or TIFF Formate. Natürlich kann man auch Grafikprogramme zur Komprimierung verwenden. Meine JPG Bilder habe ich mittels GIMP komprimiert. Den Komprimierungsrate kann man direkt beim Speichern angeben.