WordPress mit W3 Total Cache und MaxCDN beschleunigen

Heute gibt es mal einen Artikel zum Thema Performance Optimierung für WordPress. Die Geschwindigkeit des eigenen Blogs ist auch schon für kleine Seiten ein wichtiges Thema. Ein schneller WordPress-Blog macht nicht nur den Besuchern das surfen angenehmer, sondern die Performance der Seite spielt auch immer mehr bei der Googleindexierung eine Rolle. Ich kann aus Erfahrung sagen, dass eine Performancesteigerung auch mehr Besucher bringt. Heute gehe ich speziell auf das Thema CDN (Content Delivery Network) ein, welches immer mehr im kommen ist und für größere Seiten schon lange nicht mehr wegdenkbar ist. Oftmals verzichten kleinere Seiten auf ein CDN, weil es meistens mit monatlichen Kosten verbunden ist. Es gibt allerdings auch Anbieter die kostenlose Einstiegspakete anbieten (z.B. Cloudflare.com ). Vorteile bringt ein Content Delivery Network aber für jede Seite egal wie viele Besucher die Seite aufrufen.

Was ist ein CDN?

Ein Content Delivery Network (CDN), oder auch Content Distribution Network genannt, ist ein Netz lokal verteilter und über das Internet verbundener Server, mit dem Inhalte (insbesondere große Mediendateien) ausgeliefert werden. CDN-Knoten sind auf viele Orte verteilt und oft auch auf viele Backbones. Sie arbeiten zusammen, um Anfragen (Requests) von End-Nutzern nach Inhalten (Content) möglichst ökonomisch zu bedienen. Im Hintergrund (transparent) werden die Daten im Netz so vorgehalten (Caching), dass die jeweilige Auslieferung entweder möglichst schnell geht (Performance-Optimierung) oder möglichst wenig Bandbreite verbraucht (Kosten-Optimierung), oder beides zugleich.

Große CDNs unterhalten tausende Knoten mit zehntausenden Servern. (Quelle: wikipedia.org)

W3 Total Cache installieren und die Erstkonfiguration

W3 Total Cache ist wohl eins der besten und mächtigsten WordPress Plugins überhaupt. Die Installation und erst Konfiguration ist relativ simpel und einige haben es bereits installiert, deshalb beschreibe ich die Schritte nur grob.

• Wählt Plugins | Installieren im WordPress Dashboard
• Suche nach W3 Total Cache | Installieren und anschließend aktivieren
• Unter dem Reiter General Settings aktiviert ihr folgende Punkte | Page Cache, Minify, Database Cache (Braucht ziemlich viel Performance), Browser Cache und zu guter letzt CDN
• Wählt MaxCDN als CDN Type aus
• Speichert die Einstellungen

MaxCDN konfigurieren

Nun geht es weiter mit der Konfiguration des MaxCDN Accounts. Im Laufe der Konfiguration kommen wir nochmals auf die CDN Einstellungen unter W3TC zurück.

• Registriere dich unter MaxCDN.com und spare 25% | Ich persönlich habe das kleinste Paket gewählt, weil mir und wahrscheinlich vielen anderen die 100GB Traffic im Monat erstmal ausreichen. Das gute ist, dass es keine feste Vertragslaufzeit gibt und man immer nur für einen Monat knappe 5€ bezahlt. Somit ist das Risiko also relativ gering, falls das CDN nicht das leistet was es verspricht.
• Logge dich mit deinem neuen Account ein und erstelle eine neue Zone

• Create Pull Zone

• Pull Zone Name: Kann beliebig gewählt werden (Ohne Sonderzeichen)
• Origin Server URL: Tragt hier die komplette URL eures Blogs ein
• Label: Hier könnt ihr einen freien Namen wählen ohne Beschränkungen
• Zusätzlich solltet ihr Compression wählen, damit die Daten komprimiert übertragen werden und somit Traffic gespart wird

• Unter Custom URL (leider nicht auf dem Screenshot) habe ich cdn.tobias-hartmann.net gewählt, damit die MaxCDN URL auf meiner Seite nicht zum Vorschein kommt. Falls ihr eine Custom / Sub Domain wählt, müsst ihr im Anschluss noch einen CNAME Eintrag für die neue URL anlegen. Das Eintragen eines CNAME Records passiert von Provider zu Provider unterschiedlich. Subdomain (CNAME): cdn.tobias-hartmann.net –> Ziel: Die URL die nach dem Anlegen der Pull Zone erzeugt wird. (z.B. tobiashartmann.netdna-cdn.com)

Nun geht es wieder zurück zu WordPress und zu W3TC um die Konfiguration abzuschließen.

• Wählt nun unter W3 CDN und klickt auf Authorize

• Nun öffnet sich eine neue Seite, welche den Auth Key ausgibt

• Kopiert den Key und fügt ihn auf der W3 Konfigurationsseite für CDN ein
• Zum Schluss fügt ihr noch die zuvor Angelgte Subdomain unter Replace site´s hostname with ein
• Speichert die Einstellungen und eure Seite gibt den statischen Content absofort über das performante CDN aus.

Überprüfen könnt ihr das Ganze ganz einfach indem ihr in die Eigenschaften eines Bildes schaut. Der Pfad sollte nun die neue CDN Adresse sein. Zusätzlich habt ihr im Dashboard von MaxCDN eine Übersicht des Traffics.

Hinweis

Aufgrund eines Bugs in W3 Total Cache wird die CDN Konfigurationsseite nach dem Speichern der Einstellungen weiß und zeigt keine Inhalte mehr an. Zusätzlich wird folgende Fehlermeldung ausgespuckt:

A configuration issue prevents CDN from working: You need to select / create a pull zone

Die Funktion der CDN Funktion ist aber nach wie vor gegeben.

Ergebnis

Die Geschwindigkeit meines Blogs habe ich natürlich vor und nach der Optimierung getestet. Den Test habe ich mit Webpagetest.org ausgeführt. Vor der Optimierung brauchte mein Blog beim ersten Ladevorgang ca. 8 – 10 Sekunden. Nach dem Tuning dauerte das Ganze gerade mal noch 3 – 4 Sekunden. Somit ist habe ich durch die Optimierung mit W3TC und MaxCDN eine 2 – 3x schnellere Ladezeit.