How To: Blog Performance

Egal ob Anfänger oder Fortgeschritten, Blogs können immer verbessert werden. Doch meist fehlt uns das Wissen oder das Geld für einen Profi. Ich habe gemeinsam mit einem Experten einige Tools und Tipps gesammelt, die Euren WordPress Blog in Sachen Performance ganz nach vorne bringen.

Viele Blogs sind hübsch und man merkt schon am ersten Blick, wieviel Liebe darin steckt. Leider haben viele Blogger nicht das nötige, technische Hintergrundwissen und die Blogs sind oft sehr langsam. Das wirkt sich sowohl negativ auf die Google Rankings (Position) aus, aber auch die Besucher springen nach einer Ladezeit von mehr als zwei Sekunden ab. Doch wie kann man selbst die Performance seines WordPress Blogs verbessern ohne dafür vom Fach zu sein oder jede Menge Geld auszugeben?

How to: Blog Performance

Ich habe mich mit meinem Freund zusammengesetzt und einige Tipps und Tricks für Euch festgehalten. Er ist in dieser Branche tätig und hilft mir stets dabei meinen Blog technisch auf Vordermann zu halten. Also eigentlich viele Dinge, die Leser gar nicht sehen, aber es merken wenn es nicht vorhanden ist – Stichwort Blog Performance.

Ausgangslage für unsere Tipps ist eine einfache WordPress-Installation, also ein Blog, der über WP läuft auf einem üblichen Webhoster. Es wird hier nicht auf eine spezielle Infrastruktur mit mehreren Servern eingegangen. (Stichwort CDN für statische Dateien/Bilder).

Zu Beginn die Analyse – Tools

Zu allererst stelle ich Euch Websites vor, mit denen Ihr eure aktuelle Websitegeschwindigkeit messen könnt. Denn nichts ist wichtiger, als zu wissen, welche Maßnahme und Optimierung am Blog auch wirklich Früchte trägt. Deshalb empfehle ich Euch diese beiden Tests zu machen, und die Ergebnisse zu sichern.

1. webpagetest.org

webpagetest.org liefert sehr ausführliche Ergebnisse, welche einen Nicht-Techniker leicht überfordern können. Wir gehen hier nur auf die wichtigsten und wesentlichen Parameter ein, damit das Ganze nicht zu Verwirrungen führt. Als Referenzseite hab ich einen beliebigen Blog-Beitrag von mir genommen.

Wählt als Location Frankfurt (ist bei mir am nähesten) aus und einen gewünschten Browser (z.B. Chrome).

2. Google PageSpeed Insights

Google Page Speed Insights ist um ein Vielfaches simpler gehalten und gibt zusätzlich noch hilfreiche Tipps, wie sich die Mängel ausmerzen lassen. Zugegeben, hierfür braucht man ein gewisses technisches Verständnis, oder jemanden der einem dabei hilft.

Nun aber ran ans Optimieren. Nachfolgend zeige ich euch mit welchen Schritten ich versuche, die Ladezeit meines Blogs zu verbessern.

Schritt für Schritt zu einer besseren Performance

1. Fotos

Fotos machen meist den Großteil des Datenvolumens eines Blogs aus. Deshalb verbirgt sich hier natürlich auch das meiste Einsparungspotential. Oft wird beim Hochladen nicht darauf geachtet, wie groß die Datei eigentlich ist. Dies hat zur Folge, dass oft zig MB große Bilddateien heruntergeladen werden müssen (z.b. wenn Ihr beim Einfügen der Bilddatei in WordPress die Größe auf “Individuelle Größe” ändert), obwohl oft wenige hundert KB völlig ausreichend sind.

1.1 Dateigrößen vor Upload prüfen und komprimieren

Bereits vor dem Upload sollt Ihr die Datei auf die größte nötige Größe (Länge & Breite) verkleinern. So kann bereits unnötiger Ballast vermieden werden. Wenn Ihr die Datei in Adobe Photoshop speichert, unbedingt “Für Web speichern” benutzen und als JPG abspeichern, bei einer Qualität von 60-70. Fotos sollten generell stets im JPG Format gespeichert werden, da dieses hierfür ausgelegt ist und sehr gut komprimiert werden kann.

Doch damit nicht genug, auch hier gibt es noch großes Potential welches sich mithilfe spezieller Komprimierungssoftware heraus kitzeln lässt. Für Mac User empfehle ich ImageOptim (JPGs) bzw. ImageAlpha (PNGs). Windows Nutzer können den FileOptimizer verwenden, den ich allerdings selbst bisher nicht testen konnte.

Ein Beispiel:

JPG direkt von Kamera: 4912x3264px mit 2,8MB
JPG mit PS verkleinert: 850x565px mit 202KB (-93%)
JPG mit PS für Web gespeichert: 127KB (-37%)
JPG optimiert mit ImageOptim: 118KB (-7%)

Sieht man sich das Ergebnis an, wird man mit freiem Auge kaum einen Qualitätsunterschied feststellen können. Wenn, dann lediglich, im direkten Vergleich mit dem Original – kann aber kein Leser machen 😉 Bindet man in einem Artikel mehrere Bilder ein, summiert sich hier die Ersparnis enorm.

1.2 Dateigrößen mit WordPress PlugIns prüfen und komprimieren

Fotos lassen sich auch direkt beim Upload komprimieren, dies ist natürlich ebenfalls eine Methode, wenn man die Dateien nicht im Vorhinein bearbeiten will, oder mehrere Benutzer an einem Blog arbeiten und diese nicht ganz so konsequent und genau sind. Oder aber, man vergisst es einfach bei dem ein oder anderen Bild – kann ja auch passieren. Hierfür gibt es zahlreiche Plugins für WordPress. Googelt Ihr danach, werdet Ihr von Beispielen regelrecht erschlagen. Jedes ist natürlich immer mit Abstand “das beste am Markt”. Viele davon sind allerdings nicht ganz kostenfrei.

Ich möchte Euch hier zwei Plugins vorstellen, die ich selbst im Einsatz habe:

1.2.1 Imsanity

Imsanity ist ein sehr simples Plugin, das noch keine Komprimierung vornimmt. Es dient dazu, zu große Bild-Dateien beim Hochladen auf eine definierte Größe zu verkleinern und falsche Formate in JPG umzuwandeln. So kann es beispielsweise nicht passieren, dass Fotos mit 4000x4000px hochgeladen werden.

1.3 “Lazy Loading” von Bilddateien

2. Requests reduzieren

Requ..was? Requests sind Anforderungen an den Server, eine Datei (auch Fotos) zu laden. Zum Beispiel CSS-Dateien für das Layout & Styleinformationen und Javascript Dateien für Effekte & Funktionalität Eures Blogs. Solche Anfragen brauchen natürlich eine gewisse Zeit. Der Browser muss sich zum Server verbinden und anschließend die Datei auf den jeweiligen Computer laden. Je größer die Datei, desto länger dauert das natürlich.

Viele Plugins benutzen eigene Javascript- und CSS-Dateien und fügen diese ins Layout ein, ohne, dass man es selbst merkt. So wird die Seite mit jedem Plugin immer langsamer und langsamer. Leider wissen das die Wenigsten und installieren munter ein Plugin nach dem anderen. Oder noch schlimmer, man sortiert nicht mehr benutzte Plugins nicht aus. Deshalb sollte man versuchen, die Anzahl an extern eingebunden Dateien die heruntergeladen werden müssen auf ein Minimum zu reduzieren. Glücklicherweise gibt es auch hierfür einige praktische Plugins die ich Euch nun kurz vorstellen werde.

Ich benutze derzeit das Plugin Better WordPress Minify, aber es gibt auch hier wieder viele weitere sehr gute Alternativen (z.B. Autoptimize). Dieses Plugin lässt sich sehr leicht konfigurieren und funktioniert quasi Out-of-the-box. Ich habe in den Einstellungen lediglich die max. Anzahl der Dateien auf 50, sowie die Cache-Dauer auf 30 Tage erhöht.
Hierbei werden die von den verschiedensten Plugins und Theme verwendeten bzw. benötigten Dateien aneinandergereiht und anschließend komprimiert. So kann man 20 oder mehr, wie es bei vielen WordPress Blogs gang und gäbe ist, auf ca. 2-4 Requests verringern. Dies schlägt sich natürlich positiv auf die Ladezeit nieder.

3. Caching

Ich denke, jeder hat schonmal von “Cache” gehört. Das sind diese Dinger die Sachen (= Fotos, CSS, JS, etc.) lokal zwischenspeichern, damit der Browser sie nicht immer wieder aufs Neue laden muss.
Auch bei WordPress lässt sich im Hintergrund einiges zwischenspeichern, damit es nicht immer wieder neu geladen werden muss. Beispielsweise Abfragen an die Datenbank.

3.1 W3 Total Cache

Hierfür verwende ich das vielseitige Plugin W3 Total Cache, das mit mehr als 1 Million Installationen sehr verbreitet ist. Nach der Installation verfügt Ihr in der Navigationsspalte über den Menüpunkt “Performance”. Dieser ist in mehrere Unterseiten gegliedert und es gibt verschiedene Einstellungsmöglichkeiten. Nicht verzagen, Ihr braucht nicht jede einzelne davon. Hier eine kurze Übersicht der Einstellungen, die für den Großteil von Euch funktionieren sollte:

General Settings

Aktiviert hier Page Cache, Database Cache, Object Cache und Browser Cache. Setzt die jeweilige “Cache Method” sofern möglich auf “Opcode: APC”, sollte dies nicht funktionieren, dann auf “Disk” bzw. “Disk: Enhanced”, Memcached wird vermutlich nicht auswählbar sein, da dies auf spezielle Caching-Server ausgelegt sind.

Die Aufmerksamen unter Euch werden beobachtet haben, dass es auch eine Sektion “Minify” gibt. Leider hat bei mir dieser Punkt nicht sehr gut funktioniert (zerstört das Layout). Deshalb verwende ich das oben angesprochene Plugin zum Minimieren der CSS- und Javascript-Dateien. Ihr könnt es aber gerne selbst versuchen, es kommt oft darauf an, welches Theme man verwendet und welche Plugins man bereits installiert hat.

Page Cache

Ich denke die Beschreibungen der einzelnen Optionen sind ziemlich selbst erklärend und die Standard-Einstellungen passen normalerweise ganz gut. Sollte Eure Website mit https laufen, ist der Punkt “Cache SSL (https) requests” wichtig.

Database Cache & Object Cache

Standardeinstellungen übernehmen. Wichtig ist das Häkchen bei “Don’t cache queries for logged in users”.

Browser Cache

Hier setzt die Häkchen jeweils in der Sektion “General”, “CSS & JS”, “HTML & XML” und “Media & Other Files” bei:

• “Set Last-Modified header”
• “Set expires header”
• “Set cache control header“
• “Set entity tag (eTag)”
• “Enable HTTP (gzip) compression”
• “Don’t set cookies for static files”

4. Datenbank bereinigen

Wie ihr vermutlich wisst, speichert WordPress für jede Änderung eines Beitrags eigene Version ab (= Revision). Das ist natürlich sehr praktisch, wenn man wieder zurück zu einem vorherigen Stand springen möchte. All diese Versionen werden in der Datenbank abgelegt und je mehr man “zwischenspeichert” desto schneller füllt man damit seine Datenbank. Darüber hinaus sammelt sich auch durch Spam-Kommentare oder Auto-Drafts jede Menge an unnötigem Ballast an.

Glücklicherweise gibt es auch für diesen Fall die passenden Plugins. Zum Einen das etwas einfacher gehaltene Better Delete Revision, das lediglich die Beitrags-Revisionen entfernt und zum Anderen das etwas umfangreichere WP-Sweep.
Ich habe beide Plugins ausprobiert, beide funktionieren wunderbar. Aber auch von meiner Seite der Hinweis, nach Möglichkeit vorher ein Backup der Datenbank anzulegen, auch wenn im Normalfall nichts passieren sollte. Ein detailierter Beitrag zum Thema Backup folgt bald.

Mit WP-Sweep (im Menü unter “Werkzeuge” zu finden) habt ihr die Möglichkeit, wie oben bereits erwähnt, Spam-Kommentare oder andere Meta-Daten die nicht benötigt werden zu entfernen. Ich habe vorerst nur die Spam-Kommentare, Revisionen und Transient Optionen bereinigt sowie die Datenbank optimiert.

Experten-Tipp: Um zu verhindern, dass WordPress wieder beginnt etliche Revisionen zu speichern, kann man folgendes in die wp_config.php eintragen:

define('WP_POST_REVISIONS', 2);

Mit dieser Einstellung, legt WordPress in Zukunft nur mehr zwei Versionen pro Beitrag an und nicht unendlich viele!

5. Gib Acht bei Tracking und Werbeintegrationen

Ich verwende, wie vermutlich viele unter Euch, Plugins für Pinterest Feeds, Instagram Feeds, Google Analytics Tracking oder Partnerprogramme wie Tracdelight etc. All diese Erweiterungen haben eines gemeinsam: sie verlangsamen die Website, da sie Daten für die Darstellung von “ihren” Servern holen müssen. Dies ist grundsätzlich auch in Ordnung, jedoch sollte man sich darüber im Klaren sein, und nicht blindlings alles installieren.

Viele Integrationen werden zum Glück mittlerweile asynchron geladen. Das heißt, sie werden erst nachgeladen, wenn die eigentliche Website fertig geladen hat. Somit verlangsamt sich die initiale Seitenladezeit nicht. Bei Integrationen wie Tracdelight wird – dankenswerterweise – darauf hingewiesen, dass die Javascript-Datei die eingebunden werden muss, nicht mehr als einmal eingebaut wird.

Fazit & Vergleich

Zum Abschluss interessiert uns natürlich ob all diese Verbesserungen auch wirklich etwas gebracht haben. Deshalb starten wir nun den Initial-Test ein weiters Mal und vergleichen die Ergebnisse.

Wie Ihr seht, habe ich alle gesteckten Ziele erreicht. Nun heißt es, weiter dran zu bleiben und wenn möglich noch mehr bzw. besser zu optimieren, dann ist auch eine Start Render Zeit von 1.4s (top!) möglich. Die größten Performance-Bringer sind normalerweise das Lazy Loading der Bilder sowie das Minimieren und Aneinanderketten von Javascript- & CSS-Dateien.

Das Beste an all meinen Tipps? Sie haben mich 0 Cent gekostet und mein Blog wurde enorm beschleunigt, was sich hoffentlich in naher Zukunft auch auf mein Google Ranking positiv auswirkt.

Nun heißt´s aber ran ans Optimieren! Teilt mir in den Kommentaren mit wie gut es bei Euch klappt oder stellt Fragen sofern welche auftreten.