Home Menü

5 Minuten WordPress CDN Installation mit MaxCDN

Im vorhergehenden Artikel unserer WordPress High-Performance Guideline haben wir Ihnen die Grundlagen und die Idee hinter einem Content Delivery Network (CDN) vorgestellt. Heute wird es praktisch, indem wir Ihnen zeigen, wie Sie in nur 5 Minuten ein CDN unter WordPress installieren und dadurch die Geschwindigkeit Ihrer Webseite um bis zu 50 Prozent steigern.

Dieser Artikel ist Teil der Guideline High-Performance Websites mit WordPress.

Falls Sie noch kein Hintergrundwissen zum Thema CDN haben, dann empfehlen wir Ihnen als Grundlage den Artikel Content Delivery Network (CDN) für WordPress – Eine Übersicht. Im verlinkten Text wird detailliert beschrieben, warum wir uns für MaxCDN als Provider unseres Content Delivery Networks entschieden haben.

5 Minuten WordPress CDN Installation

1. MaxCDN Account anlegen

Im ersten Schritt navigieren Sie zur Webseite von MaxCDN und klicken auf Get Started um in die Tarifübersicht zu gelangen.

Der günstigste Tarif „#!/bin/start“ mit einer monatlichen Bandbreite von 100GB kostet $ 9 pro Monat. Mit unserem Gutschein blogit erhalten Sie auf die erste Bestellung 25 Prozent Rabatt auf alle Tarife. Somit kostet der günstigste Tarif gerade einmal $ 6,75 pro Monat bzw. etwa 6 Euro. Entscheiden Sie sich gleich für einen Laufzeit von einem Jahr, so erhalten Sie derzeit noch zwei Freimonate, was die effektiven Kosten pro Monat auf etwa 5 Euro reduziert.

Den Gutschein können Sie direkt bei der Anmeldung für den jeweiligen Tarif angeben:

Bevor Sie allerdings das Anmeldeformular absenden, sollten Sie noch die Location Asia + Australia entfernen, welche standardmäßig für $ 15 im Monat hinzugefügt wird. Den endgültigen Preis können Sie dann auf der rechten Seite erkennen:

Hinweis: Bei der ursprünglichen Veröffentlichung des Artikels im November 2013 war der Gutschein mit dem Code blogit auch für wiederkehrende Monate und Jahre gültig. Mittlerweile gilt der Rabattgutschein nur noch für die Erstbestellung.

2. Account bei MaxCDN aktivieren

Unmittelbar nach der erfolgreichen Anmeldung in Schritt 1 wird Ihnen eine E-Mail mit einem Aktivierungslink des MaxCDN Accounts zugestellt. Diesen Aktivierungslink bestätigen Sie und loggen sich mit den festgelegten Daten (E-Mail-Adresse + Passwort) ein.

3. Pull-Zone für Ihre Webseite anlegen

Damit Ihre Dateien letztlich auch vom CDN an den Besucher Ihrer Webseite ausgeliefert werden, müssen Sie in MaxCDN eine sogenannte Pull-Zone anlegen. Diese ist speziell für die Auslieferung von CSS-Dateien, JavaScript-Dateien und Bildern gedacht. Dazu klicken Sie direkt nach dem Login auf den Button Create Pull Zone. In der nachfolgenden Maske tragen Sie alle Detailinformationen dazu ein.

  • Pull Zone Name: Das ist der Name Ihrer Pull Zone. Dieser hat keine Auswirkung auf die Funktionsweise, dient also nur zur Organisation von verschiedenen Zonen. Im Namen dürfen allerdings keine Leerzeichen enthalten sein.
  • Origin Server URL: Das ist die URL Ihrer Webseite. Diese wird vom CDN benötigt, da die Daten direkt von dieser URL auf die verschiedenen Server von MaxCDN repliziert und dort gecacht werden.
  • Label: Wie der Pull Zone Name dient dieses Feld ebenfalls nur zu Organisationszwecken. Sie können es bedenkenlos leer lassen.
  • Compression: Aktivieren Sie bitte den Haken bei Compression (ist im Standard bereits aktiviert), um die Daten an die Besucher komprimiert auszuliefern. Dadurch verringert sich die Download-Zeit der Dateien und Sie sparen Bandbreite.
  • Custom CDN Domain: Die Hinterlegung einer Custom CDN Domain ist optional, allerdings empfehlen wir, dass Sie hier bereits eine Domain hinterlegen. Was es mit dieser Domain auf sich hat, erfahren Sie im Abschnitt CNAME DNS Records anlegen.

Wenn Sie alle Daten eingetragen und überprüft haben, klicken Sie auf Create. Anschließend werden Sie zur Übersichtsseite weitergeleitet, welche Ihnen die angelegten Daten noch einmal anzeigt. Zusätzlich wird Ihnen auch die von MaxCDN generierte CDN-URL angezeigt, welche Sie später noch öfter benötigen werden.

5 Minuten WordPress CDN Installation mit MaxCDN - Pull Zone anlegen Details

4. CDN-URL in WordPress hinterlegen

Das CDN ist nun auf der Seite von MaxCDN vollständig eingerichtet. Ab sofort werden alle Dateien Ihrer Webseite auf die Server des Anbieters repliziert und dort gecacht. Damit Ihre Besucher nun auch die Daten vom CDN abrufen und nicht wie bisher von Ihrem eigentlichen Webserver, müssen Sie in WordPress noch die CDN-URL hinterlegen. Dies geschieht mit Hilfe eines der beiden WordPress Plugins: WP Super Cache oder W3 Total Cache.

Installation des CDN mit WP Super Cache

Um in WP Super Cache die CDN-URL zu hinterlegen, navigieren Sie zu Einstellungen/WP Super Cache in den Reiter CDN. Dort aktivieren Sie den Haken bei Aktiviere CDN Support und hinterlegen beim Eingabefeld zur Off-site URL die von MaxCDN generierte CDN-URL.

Zusätzlichen empfehlen wir die Aktivierung der Option Überspringt https URLs um „mixed content“ Fehler zu vermeiden am Ende der Einstellungsseite. Schließen Sie den Vorgang mit einem Klick auf Änderungen speichern ab. Ab sofort werden alle CSS-Dateien, JavaScript-Dateien und Bilder nicht mehr von Ihrem Webserver ausgeliefert, sondern über das CDN.

Installation des CDN mit W3 Total Cache

Für W3 Total Cache stellt MaxCDN direkt eine Anleitung bereit. Klicken Sie dazu auf der Webseite unter WordPress Setup in 3 Steps auf den Button Detailed Instructions.

5. Test der CDN Funktionalität

Bevor Sie nun versuchen die CDN Funktionalität zu testen, sollten Sie den Cache des jeweils benutzten Plugins und ebenso den Cache Ihres Browsers leeren. Rufen Sie nun die Webseite über ein Website Testtool wie beispielsweise webpagetest.org auf oder lassen sich die Anfragen mit der Netzwerk-Funktion im Firefox Add-On Firebug anzeigen. So können sie feststellen, dass alle CSS-Dateien, JavaScript-Dateien und Bilder direkt über das CDN ausgeliefert werden:

Im Prinzip war’s das! Ab nun wird der Großteil Ihrer Dateien nicht mehr direkt von Ihrem eigentlichen Server ausgeliefert, sondern vom Content Delivery Network.

Zusatzkonfiguration des Content Delivery Networks

CNAME DNS Records anlegen am Beispiel von Host Europe

Wie Sie im obigen Beispiel sehen können, ist nun die von MaxCDN generierte URL mit Ihrem Namen beim Monitoring über verschiedene Tools jederzeit zu sehen. Dies kann in vielen Fällen unerwünscht sein, weshalb Sie die lange und etwas kryptische URL durch eine von Ihnen definierte URL ersetzen können.

Dazu müssen Sie wie folgt vorgehen:

  1. Wenn Sie beim Anlegen der Zone unter Custom CDN Domain bereits eine eigene URL nach dem Format cdn.ihredomain.de eingetragen haben, dann brauchen Sie auf der Seite von MaxCDN nichts mehr unternehmen. Haben Sie dies jedoch nicht gemacht, müssen Sie sich in Ihren Account bei MaxCDN erneut einloggen und die bereits angelegte Pull Zone bearbeiten. In der speziellen Zonen-Übersicht finden Sie unter Settings und Custom Domain Settings die Möglichkeit, verschiedene Custom Domains nach Ihren Wünschen anzulegen.
  2. Auf der Seite Ihres Webproviders müssen Sie nun dafür sorgen, dass alle Anfragen an die gerade angelegte Custom Domain im Format cdn.ihredomain.de auf die CDN-URL ihredomain.ihrname.netdna-cdn.com weitergeleitet werden. Dazu legen Sie in den DNS-Einstellungen einen neuen DNS Record vom Typ CNAME an. Am Beispiel von Host Europe unter PLESK sieht dies wie folgt aus:Bitte achten Sie darauf, dass Sie keine neue Subdomain in PLESK anlegen. Machen Sie das nämlich, wird ein DNS Record vom Typ A angelegt und folglich kann kein DNS Record vom Type CNAME angelegt werden. Somit müssen Sie also nichts weiter tun, als in Ihren DNS-Einstellungen einen neuen DNS Record vom Type CNAME anzulegen, der von Ihrer Custom Domain auf die CDN-URL zeigt.
    Hinweis: Bitte achten Sie darauf, dass es unter Umständen bis zu 24 Stunden dauern kann, bis der von Ihnen angelegte DNS Record aktiv ist. Bei vielen Providern ist dieser allerdings bereits nach 15 Minuten funktionsfähig.
  3. URL in WordPress anpassen. Nachdem Sie nun den DNS Record angelegt haben, können Sie in WordPress in WP Super Cache bzw. W3 Total Cache die neue Custom URL im Format cdn.ihredomain.de eintragen. Anschließend löschen Sie bitte wieder die verschiedenen Caches. Fertig!

Cookies für CDN deaktivieren

Nach der Inbetriebnahme des CDN fällt bei Nutzung des YSlow-Tools unter Firefox auf, dass die CDN-Domain bei der Übertragung der Bilder immer noch Cookies mit sendet. Dies ist jedoch bei statischen Ressourcen in der Regel überhaupt nicht notwendig, weshalb Ihnen MaxCDN im Control Panel auch die Möglichkeit gibt, die Cookies für das CDN zu deaktivieren.

  1. Wechseln Sie im Control Panel von MaxCDN in den Reiter Pull Zones und klicken Sie dort auf den Button Manage der jeweiligen Zone.
  2. Klicken Sie auf den Reiter Settings und navigieren Sie zum Abschnitt Edge Settings.
  3. Im letzten Schritt muss die Option Strip All Cookies aktiviert werden.

Performance-Vergleich

Im Rahmen der WordPress Performance Guideline gibt es am Ende natürlich wieder einen Vergleich der Geschwindigkeit vor dem Einsatz des CDN und nachher.

Document Complete

VorherNachherVeränderung
ZeitRequestsBytesZeitRequestsBytesZeitRequests
Empty Cache1.574s23367 KB1.059s23384 KB-33 %0
Primed Cache0.697s873 KB0.509s512 KB-27 %-3

Erläuterung: Die hier gemessenen Daten stammen, wie bei allen vorherigen Tests auch, von webpagetest.org mit der Location Falkenstein (Deutschland) als Ausgangspunkt der Testreihe. Alle Tests wurden 9-mal hintereinander ausgeführt und der Median der Ergebnisse hier verwendet. Für die Beständigkeit der Messung wurden jegliche AdSense Anzeigen auf der Startseite deaktiviert.

Es zeigt sich auch in diesem Artikel wieder deutlich, dass obwohl die Performance der Seite durch die letzten Maßnahmen schon stark gesteigert werden konnte, es immer noch erhebliches Optimierungspotential gibt. Dieses Potential schöpft die Installation des CDN voll aus und beschleunigt den Aufruf der Startseite noch einmal um über 30 Prozent.

Fully Loaded

VorherNacherVeränderung
ZeitRequestsBytesZeitRequestsBytesZeitRequests
Empty Cache1.642s23525 KB1.134s23525 KB-31 %0
Primed Cache0.769s876 KB0.514s576 KB-33 %-3

Ladezeit außerhalb von Deutschland

Wird der Seitentest nicht von Deutschland durchgeführt, sondern von den USA (Los Angeles), so spielt das Content Delivery Network seine volle Stärke aus. Im Mittel von 9 Tests war der Aufruf von Blog IT-Solutions um knapp 50 Prozent schneller. Ohne CDN dauerte der Aufruf 3.558 Sekunden (Fully Loaded), mit CDN hingegen nur 1.792 Sekunden (Fully Loaded).

Google Pagespeed

VorherNachher
Google PageSpeed Mobil7878
Google PageSpeed Desktop8989

Erläuterung: Den Google Pagespeed scheinen die Änderungen durch die Nutzung eines CDN nicht zu beeinflussen. Das Ergebnis ist im Vergleich zum letzten Test in etwa gleich geblieben. Es hat sich allerdings herausgestellt, dass ein Vergleich immer mit etwas Unsicherheit behaftet ist, da die Google Pagespeed Ergebnisse von Test zu Test geringfügig variieren.

YSlow

VorherNachher
YSlow Punkte8388
YSlow GradeBB

YSlow hingegen honoriert den Einsatz eines Content Delivery Networks nachdem man die Ressourcen in Firefox manuell als CDN-Dateien deklariert hat. Im Standard kennt YSlow nämlich nur die Yahoo eigenen CDN-Server, zu welchen MaxCDN nicht zählt.

Fazit

Leider nicht kostenlos, aber dafür verdammt schnell. Damit ist nicht nur die benötigte Zeit bei der Installation eines CDN gemeint, sondern auch die gesteigerte Performance beim Aufruf einer Seite. So konnte durch die Installation des CDN von MaxCDN die Seitenaufrufzeit der Blog IT-Solutions WordPress Seite innerhalb von Deutschland um über 30 Prozent reduziert werden. Wird die Seite außerhalb Deutschlands aufgerufen, so steigt der Wert sogar auf 50 Prozent an. Gerne können Sie sich an dieser Stelle noch einmal an den einleitenden Artikel dieser Serie erinnern der detailliert aufzeigte, welchen positiven Einfluss die Geschwindigkeit einer Seite auf den Umsatz hat. Mit diesem Wissen im Hinterkopf kann man auch schnell überschlagen, dass sich ein CDN bei vielen Webseiten-Betreibern lohnt.

Im nächsten Artikel der Guideline behandeln wir das Thema Caching und damit verbunden die Expires Headers. Damit wird Ihre Webseite nicht nur bei wiederkehrenden Besuchern schneller geladen, sondern Sie sparen beim Einsatz eines CDN auch noch Bandbreite.

Veröffentlicht von Josef Seidl

Josef Seidl hat an der TU München und der Stanford University Wirtschaftsinformatik studiert, bevor er mit INNOSPOT sein eigenes Unternehmen gründete. Er ist begeistert von Technik, schätzt performante Webseiten und ist gerne in den Bergen unterwegs. Zu finden ist er auch bei LinkedIn und privat bei Twitter.