Seit WPML kommerziell wurde, hat wpml.org mit viel mehr Traffic zu tun. Vor zwei Wochen lief unser Server mit einer Auslastung von 95 % und die Antwortzeit lag bei über 10 Sekunden. Mit W3TC ist unsere Auslastung wieder bei 5 % und die Antwortzeit liegt bei etwa 300 ms.
Falls Sie es noch nicht kennen: W3TC ist ein Plugin für die Website-Performance. Es beinhaltet einen Seiten-Cache, aber das ist nur der Anfang. Über das grundlegende Caching von Seiten hinaus minimiert es auch JS- und CSS-Dateien, komprimiert alles und betreibt ein CDN (Content Delivery Network). Zusammengenommen können diese Funktionen eine Website um ein Vielfaches beschleunigen, sodass komplexe WordPress-Websites auch mit hohem Traffic-Aufkommen zurechtkommen.
Warum ist das für WordPress-Websites so wichtig?
Ein Bild sagt mehr als tausend Worte. So lädt unsere Website ohne jegliches Caching (generiert von den Pingdom Tools):
Wenn Sie denken, dass das beängstigend ist, bedenken Sie, dass es in der Realität noch schlimmer war. Dieses Diagramm der Ladezeit wurde aufgenommen, als unser Server tatsächlich mit 5 % Auslastung lief. Als er wirklich ohne Cache lief, kochte der Server bei 95 % Auslastung und die Verarbeitungszeit war viel länger. Das erste Byte brauchte 5 Sekunden, bis es gesendet wurde, und nicht eine halbe Sekunde, wie Sie in diesem Diagramm sehen.
Um unsere Startseite vollständig anzuzeigen, musste unser Server 77 Dateien senden. Selbst dieses Diagramm, das bei 5 % Serverauslastung erstellt wurde, endet mit einem Timeout bei 30 Sekunden (siehe die roten Linien).
Liegt das an schlampiger Programmierung und schlechten Designpraktiken? Nein.
Die Stärke von WordPress liegt in seiner Modularität. Sie können jedes gewünschte Theme mit einer beliebigen Kombination von Plugins wählen. Das bedeutet, dass jedes davon unabhängig entwickelt wird und mit seinen eigenen Ressourcen läuft. Die meisten Plugins, die Sie aktivieren, enthalten mehrere CSS- und Javascript-Dateien und tragen zum Verarbeitungsaufwand von PHP und MySQL bei. Sie könnten das manuell optimieren, aber dann würden Sie all diese großartige Modularität verlieren und wir stünden wieder am Anfang.
Überprüfen Sie Ihre Website mit den Tools von Pingdom oder einer anderen Messung der Seitenladezeit (dafür gibt es ein Firefox-Add-on). Sehen Sie sich an, welche Dateien geladen werden und in welcher Reihenfolge. Sie werden feststellen, dass CSS-Dateien Bilder und anderes CSS laden und dass für jede Seite unzählige Javascript-Dateien geladen werden.
Um Ihnen einen Vorgeschmack zu geben, sehen Sie hier, was wir mit all den Raffinessen von W3TC erreicht haben:
Die Zahlen, die Sie hier sehen, sind korrekt. Insgesamt werden 28 Dateien abgerufen, um die Seite anzuzeigen. 5 Dateien kommen von wpml.org (unserem eigenen Server) und der Rest kommt vom CDN (Content Delivery Network). PHP muss kaum etwas tun, um diese Seite auszuliefern, außer zu überprüfen, ob sie im Cache ist, und ein paar andere winzige Prüfungen durchzuführen.
Die gesamte Seite lädt in weniger als 2 Sekunden und verursacht eine Auslastung, die wir auf dem Server kaum messen können. Wir sind glücklich, die Besucher sind glücklich und sogar Google ist glücklich.
Schritt 1) Seiten-Cache
Das Erste und Grundlegendste, was Sie tun sollten, ist das Caching von Seiten zu aktivieren. Gehen Sie zu Performance, aktivieren Sie W3TC und konfigurieren Sie den Bereich Page Caching.
Beim Seiten-Caching sind wir bei den Grundeinstellungen geblieben. Eine Sache, die wir hinzugefügt haben, war der Ausschluss der Bereiche für Kundenkonten und Downloads aus dem Seiten-Cache, damit W3TC nicht mit WPML-Kundenkonten und WPML-Downloads in Konflikt gerät.
Wenn Sie einen Opcode-Cache verwenden, wird W3TC diesen nutzen, um Ihre Website weiter zu beschleunigen. Wir verwenden ihn nicht, aber er lohnt sich, wenn Sie komplexe PHP-Verarbeitungen ausführen, die nicht zwischengespeichert werden.
Schritt 2) Minify – CSS und JavaScript packen und komprimieren
Erinnern Sie sich an all die CSS- und JS-Dateien, die das Theme und die Plugins hinzufügen? Jetzt ist es an der Zeit, die von ihnen verursachte Auslastung zu beheben.
Minify sammelt mehrere Ressourcendateien, packt sie in eine einzige Datei und komprimiert diese. Das Ergebnis ist eine größere Datei anstelle von Dutzenden winzigen Dateien.
Auch wenn die Gesamtgröße vielleicht nur um 50 % schrumpft, ist die dadurch eingesparte Auslastung enorm. Anstatt dass der Browser mehrere HTTP-Anfragen stellen und viele winzige Dateien abrufen muss, stellt er eine einzige Anfrage und erhält sie alle zusammen. Diese Änderung trägt wahrscheinlich am meisten zur Verbesserung der Reaktionsfähigkeit Ihrer Website bei – insbesondere für neue Besucher (die Ihr CSS und JS noch nicht im Cache haben).
Klicken Sie oben auf der Seite auf den Button Help. W3TC wird Ihre gesamte Website durchsuchen und nach Ressourcendateien suchen. Dann können Sie auswählen, welche kombiniert werden sollen. Normalerweise können Sie alle auswählen, aber Sie müssen etwas aufpassen, was Sie tun, da dies die Ladereihenfolge ändern kann.
Sobald Sie die CSS- und JS-Dateien für Minify ausgewählt haben, müssen Sie sicherstellen, dass ihre Reihenfolge korrekt ist.
Bei CSS-Dateien ziehen Sie die Dateien in der Liste nach oben und unten.
Die Reihenfolge, die Sie in dieser Liste sehen, sollte mit der Reihenfolge übereinstimmen, in der CSS-Dateien ohne Minify geladen werden. Sie können das im Quelltext Ihrer HTML-Seite sehen.
Javascript-Dateien sind etwas kniffliger. Hier ist die Ladereihenfolge noch kritischer, da eine falsche Reihenfolge zu JS-Fehlern und fehlerhafter Funktionalität führt.
W3TC lässt Sie wählen, welche JS-Dateien in den Header-Bereich und welche in den Body kommen. Zum Beispiel würden die Google-Analytics-Skripte kurz vor das Ende kommen, während jQuery in den Header gehört, da es zuerst (und außerhalb der Minify-Liste) ausgeführt werden muss.
Schritt 3) Content Delivery Network (CDN)
Für uns ist das Tüpfelchen auf dem i ein wunderbar funktionierendes CDN.
Die Konfiguration und der Betrieb eines CDNs sprengen den Rahmen dieses Beitrags, da dafür die Einrichtung eines Kontos bei einem Drittanbieter erforderlich ist.
Für unsere eigenen Websites verwenden wir Amazon S3 für die Speicherung und CloudFront für die Auslieferung. Es gibt noch andere gute Optionen auf dem Markt, die Sie erkunden und vergleichen können.
Sobald Ihr CDN-Konto eingerichtet ist, sendet W3TC Ihre lokalen Dateien an das CDN und ersetzt Links von Ihrem Server zu den Dateien im CDN. Dann sendet Ihr Server nur noch die HTML-Dateien und das CDN kümmert sich um den Rest.
Während Ihr Server eine einzelne Maschine ist, ist das CDN eigentlich ein Netzwerk von Servern. Es sendet die Dateien vom nächstgelegenen Server an jeden Besucher. CDNs können statische Dateien viel schneller ausliefern, als es ein einzelner Server kann. Durch die Nutzung eines CDNs verbessern Sie das Erlebnis Ihrer Besucher und reduzieren die Bandbreite und Netzwerkauslastung Ihres Servers drastisch.
Sie sollten dem CDN-Einrichtungsassistenten in W3TC folgen. Er wird Ihnen helfen, die Mediathek sowie Theme- und Plugin-Ressourcen auf das CDN zu übertragen.
Haben Sie Spaß an der Optimierung der Website-Performance? Lassen Sie es uns wissen, indem Sie hier einen Kommentar hinterlassen!
