Nachdem mir 1&1 nur mickrige 32 MB RAM für mein Shared Hosting Paket zur Verfügung stellt und mir die von 1&1 gebotenen Alternativen angesichts meines üppig ausgestatteten Heimservers zu teuer sind, habe ich mich auf die Suche nach Möglichkeiten zur Geschwindigkeits- bzw. Ladezeitoptimierung gemacht. Der Google PageSpeed Test gibt dazu sehr gute Anhaltspunkte, Doch ich möchte hier konkrete Maßnahmen beschreiben.

Piwik

Den größten Speicherbedarf hat erstmal die Webanalyse-Lösung Piwik. Diese Software benötigt mindestens 128 MB RAM und erzeugt sehr schnell große Datenbanken. Davon merkt man zwar als Besucher wenig, da der Piwik-Code am Ende des Bodys eingebunden wird. Das Backend von WordPress und Piwik selbst fühlte sich allerdings ziemlich träge an. Daher habe ich Piwik nun auf meinen Heimserver umgezogen, der mehr als ausreichend dimensioniert ist. Das bietet auch den Vorteil, dass man weitere Webseiten zentral analysieren kann. Der Haken ist dann allerdings, dass der Heimserver 24/7 durchlaufen muss.

Caching

Weiterhin habe ich mit dem Plugin WP-SuperCache das serverseitige Cachen von generierten HTML-Inhalten ermöglicht. Ansonsten muss für jeden Besucher jede Seite neu mit PHP generiert werden. Auf einem eigenen Server kann man mittels des Pakets php-apc das gleiche erreichen.

Über die .htaccess Datei habe ich  Kompression und die Caching-Zeilen beim Client eingestellt, sodass man nicht bei jedem Besuch Inhalte herunterlädt, die sich ohnehin selten ändern, wie Bilder und JavaScript Dateien. Dadurch werden die Dateien gzip-komprimiert übertragen, was gerade bei reinen Text-Dateien bis zu 50% der Größe einspart., bei Bildern bringt es wenig, diese sind i.d.R. bereits komprimiert. Dies wird her genauer beschrieben.

Bilder und JavaScripts

Ladezeitanalysen mit den Entwicklertools des Browsers zeigen, dass für jede Eingebundene Datei eine eigene HTTP-Verbindung aufgebaut wird. Die Anzahl der Dateien bremst dabei mindestens genauso stark wie die Größe der zu übertragenden Dateien.

Ladezeitanalyse mit den Entwicklertools von Firefox

Leider gibt es bei WordPress mit seinen Plugins wenig Möglichkeiten, die eingebundenen Dateien zu reduzieren. Bei einem beruflichen Projekt würde ich aber CSS-Dateien per LESS oder SASS in eine einzige Datei kompilieren, die man auf diese Weise auch komprimieren kann. Dies geht direkt mit dem LESSC Kompiler. und dem Plugin –clean-css. Dadurch werden Leerzeichen und Zeilenumbrüche entfernt und der Code auch analysiert und doppelte Deklarationen entfernt.

Ein sehr wichtiger Punkt sind die Bildgrößen. Bilder im Web sind generell viel zu groß. Häufig kann man die Dateigröße um 50% oder mehr reduzieren. Hierbei geht es nicht nur um die Auflösung, sondern auch um die Kompressionsrate und bei PNG bzw. GIF Bildern auch um den enthaltenen Farbraum. Auch die richtige Wahl das Dateiformats spielt eine Rolle:

• Für sehr kleine Grafiken GIF
• Für Logos, Screenshots und ähnliches mit einem begrenzten Farbraum PNG.
• Nur für Fotos JPG, diese kann man aber oft bis zu 75% komprimieren. Man muss schauen, dass keine Kompressions-Artefakte sichtbar sind.

Generell sollte man alle Bilder mit Tools wie jpepoptim und optipng  behandeln. Es gibt auch ähnliche Tools mit grafischer Oberfläche. Damit habe ich z.B. das Headerbild auf dieser Seite von 150 KB auf 36 KB eingedampft. Vorsicht ist übrigens geboten, wenn man mit WordPress zuschneidet. Bei mir wurde das Bild dann auf wundersame Weise wieder größer…

Wie kann man die Anzahl der Grafiken verringern?

• Für die üblichen Webicons bieten sich Icon-Fonts wie FontAwesome oder das in Bootstrag enthaltene Glyphicon an. So muss man nicht jedes Icon einzeln laden, sondern nur eine Schriftarten-Datei
• Eine weitere, aber relativ aufwändige Möglichkeit sind CSS-Sprites. Hier hat man viele Bilder in einer Grafikdatei, die man dann per CSS entsprechend zuschneidet.

Das Optimieren meiner Bilder ist noch nicht abgeschlossen, aber gefühlt ist die Seite spürbar flotter geworden finde ich!