WordPress und Cloudflare: Einstellungen & Erfahrungen

Geschrieben von am 21. Dez 2015 in Hosting, Kostenloses, Tipps & Tricks - 5 Kommentare

Vor einiger Zeit habe ich damit angefangen, einen Teil meiner Webseiten auf Cloudflare auf- oder umzurüsten. In diesem Artikel will ich zum einen über meine Erfahrungen berichten und für die, die es auch einrichten möchten, noch eine kleine Anleitung an die Hand geben.

Für die, die den Service nicht kennen, es handelt sich bei Cloudflare um ein Content Delivery Network (CDN). Vereinfacht ausgedrückt, ist ein CDN ein Servernetwork, welches vor den eigentlichen Webseiten-Server geschaltet wird. Es fungiert quasi als externer Webseiten-Cache. Der Hauptgrund für den Einsatz eines CDN ist meistens, die Webseiten schneller zu machen. CDNs können aber auch bei DDoS-Attacken helfen oder wenn der eigene Server kurzfristige Downtimes hat. Ein weiterer Pluspunkt ist, dass Cloudflare seit einiger Zeit die gecachten Webseiten im neuen HTTP/2-Protokoll ausliefert. Das bringt ebenfalls Geschwindigkeitsvorteile und Google scheint das neue Protokoll auch pushen zu wollen.

1. Schritt: Cloudflare einrichten

Ihr ruft cloudflare.com auf und registriert Euch dort. Danach wählt Ihr “Add Site”. Dort gebt Ihr die URL der Webseite ein, die Ihr mit Cloudflare verbinden möchtet.

cloudflare und wordpress_add website

Cloudflare startet dann einen Scan der DNS-Server. Das kann mehrere Minuten dauern. Als Ergebnis erhält man eine Übersicht über die DNS-Zonen. Eine orange Wolke bedeutet, dass hier ein Caching über Cloudflare eingestellt ist. Eine graue Wolke bedeutet, dass für diese Zone Cloudflare deaktivert ist, der Traffic also weiter über den eigenen Webserver laufen wird. Eigentlich muss man hier nichts weiter unternehmen. Es sei denn, man möchte explizit z.B. Subdomains ausgrenzen.

In meinem Beispiel-Scan wird sowohl die Version www.wplove.de als auch die ohne www. von Cloudflare gecached werden. Der Mailserver dagegen nicht.

cloudflare und wordpress-einrichten

Als nächstes muss man auswählen, welchen Service man buchen möchte. Ich habe für sämtliche Webseiten den “Free Website” gewählt. Ich denke, für die meisten ist das kostenlose Paket als Einstieg vollkommen ausreichend. Ein Upgrade auf einen kostenpflichtigen Plan (ab 20$ / Monat) ist natürlich jederzeit im laufenden Betrieb möglich.

2. Schritt: Nameserver einrichten

Am Ende des Einrichtungsvorgangs fordert einen Cloudflare auf, die Nameserver neu zu konfigurieren.

Dieser Punkt ist unabdingbar, d.h. wer seine DNS-Einstellungen nicht verändern kann, der hat keine Chance, Cloudflare zu nutzen. Insbesondere User, die Webseite und Hosting beim gleichen Anbieter haben, können hier Probleme bekommen. Besser ist es aus meiner Sicht, Webhosting und Domainverwaltung voneinander zu trennen. Denn neben anderen Vorteilen (guter Artikel dazu), ist es bei einem Registrar in der Regel absolut unproblematisch, die DNS-Einstellungen beliebig zu verändern.

cloudflare und wordpress-dns einstellungen anpassen

Nachdem die Cloudflare-Nameserver eingetragen wurden, kann es bis zu 24 Stunden dauern, bis alles reibungslos funktioniert.

3. Schritt: Kontrollieren, ob Webseite über Cloudflare ausgeliefert wird

Trotz des Status “Active” kann es sein, dass die Webseite immer noch über den “alten” Webserver ausgeliefert wird. Das passiert immer dann, wenn der Cache-Header “no-store, no-chache” ausliefert. In diesem Fall erhält Cloudflare durch den Header die Anweisung, dass die Webseite nicht im Cache abgelegt werden darf. Cloudflare muss dann jeden Aufruf wieder auf den Webserver durchrouten. Dadurch kann keine Speed-Optimierung erfolgen.

Kontrolliert werden kann der Cache-Header z.B. mit dem Webseiten-Tool https://redbot.org

wordpress und cloudflare_cache control

Wenn der Cache-Header dagegen “HIT” ausliefert, bedeutet das, dass die angeforderte Seite von Cloudflare ausgeliefert wurde. Hier gibt es eine Übersicht zu den Cache Antworten

cloudflare und wordpress-cache control

Wenn Euer Cache-Header “no-store, no-cache” ausliefert, gibt es trotzdem eine Lösung für dieses Problem. So könnt Ihr in den Cloudflare-Optionen eine Regel definieren, mit der ihr dafür sorgt, dass Cloudflare die Webseite trotzdem speichert und dann beschleunigt aus dem Cache ausliefert.

cloudflare-page rules definieren
Dafür unter dem Tab “Page Rules” zuerst das Pattern für Eure Webseite eintragen *euredomain.tld/* und dann folgende Regel erstellen:

  • Custom Caching: Cache everything
  • Sometimes cache headers are set on the server-side or by a CMS solution like WordPress. If you choose to Cache Everything, CloudFlare will respect these headers unless you choose to overwrite them.

  • Edge cache expire TTL: kann von 2 Stunden bis hin zu 1 Monat definiert werden. Ich habe hier 12 Stunden gewählt.

    To overwrite any default headers, choose a time from the drop-down menu. This is the refetch time for when CloudFlare checks the origin server for a new resource.

Alle anderen Einstellungen unter dieser Regel habe ich unangetastet gelassen.

Damit Euer Admin-Bereich nicht gecached wird, solltet Ihr noch eine weitere Regel erstellen

  • Pattern: *euredomain.tld/wp-*
  • Custom caching: Bypass cache
  • alles andere so lassen

Update: Hier ist mir später aufgefallen, dass es mit dem Ausschluss des Cachings für den Admin-Bereich nur funktioniert, wenn die Reihenfolge der beiden Regeln umgedreht wird, also die Ausnahme für den Admin-Bereich als erstes kommt. Kann aber zum Glück nachträglich per Drag & Drop problemlos verschoben werden 😉

weitere Cloudflare Einstellungen

Apropos Einstellungen. Hier bietet Cloudflare noch eine Menge Optionen. Die Page Rules hatten wir uns ja eben schon angeschaut. Unter der Option “Speed” gibt es noch die Möglichkeit, HTML, CSS und JavaScript zu minifyen. Letzteres bedeutet, dass der Code zusammengestaucht wird, indem Leerzeichen im Code eliminiert werden.

Sollte jeder mal ausprobieren, ob’s bei ihm nach der Aktivierung noch alles sauber funktioniert. Ich habe alle Minify-Optionen aktiviert und keine Probleme feststellen können.

cloudflare und wordpress-minify

Cloudflare Apps

Via Cloudflare können diverse freie und kostenpflichtige Apps hinzugebucht werden. Interessant ist z.B. “Smart Errors” mit der individuelle 404er Seiten erstellt werden können. Einfach mal unter dem Tab “Apps” stöbern und ausprobieren….

Fazit

Ich habe Cloudflare nun seit einiger Zeit auf mehreren WordPress-Blogs im Einsatz. Dabei nutze ich bisher ausschließlich die kostenlose Variante von Cloudflare. Sehr gut finde ich, dass das SetUp so unkompliziert funktioniert. Wer Zugriff auf seine DNS-Einstellungen hat, kann auch ohne tiefergehende Kenntnisse im Handumdrehen sein System auf Cloudflare umstellen.

Was die Performance betrifft, so sollte man keine Wunderdinge erwarten. Das Hauptproblem ist, dass Cloudflare sich die Webseiten ja auch erstmal in den Cache holen muss. Bei großen Webseiten kann es sein, dass das vom Client angeforderte Dokument (noch) nicht im Cache liegt und daher erstmal vom Webserver geholt werden muss. In diesem Fall ist kein Geschwindigkeitsgewinn zu erzielen. Häufig aufgerufene Dokumente wie z.B. die Startseite kommen aber in der Regel aus dem Cache und laden dann schon sehr flott.

Grundsätzlich sollte man darauf achten, dass die Webseite auch ohne CDN schnell lädt und das der Webserver gut konfiguriert ist. Ein CDN wie Cloudflare ist dann das iTüpfelchen, was nochmal einige viel aufgerufene Ressourcen beschleunigen kann und Last vom Webserver weghält.

Habt Ihr Cloudserver im Einsatz? Was habt Ihr für Erfahrungen damit gemacht? Freue mich über Eure Kommentare!

Bitte sozial teilen

Wenn dir dieser Beitrag gefallen hat, dann teile ihn doch bitte in den verschiedenen sozialen Netzwerken! Du würdest mir damit sehr helfen!

Über den Autoren

Mein Name ist Christian. Ich blogge bereits seit 5 Jahren - manchmal mehr, manchmal weniger erfolgreich. Weil ich in der Anfangszeit meiner Erfahrungen mit den von WordPress gebotenen Möglichkeiten unzufrieden war, habe ich mir einiges Wissen zu dieser tollen Software selbst beigebracht. Aus diesen Erfahrungen ist das Projekt wpLove.de geboren. Neben WordPress bringe ich mir aber auch das Thema SEO selbst etwas näher.

5 Kommentare zu "WordPress und Cloudflare: Einstellungen & Erfahrungen"

  1. John 12. März 2016 um 22:28 Uhr · Antworten

    Ich wollte mit der seite testen ob bei mir Cloudflare läuft aber bei mir steht weder HIT noch o-store, no-chache!

    Bei mir steht

    HTTP/1.1 200 OK
    Date: Sat, 12 Mar 2016 20:24:44 GMT
    Server: Apache
    X-Powered-By: PHP/5.4.33
    Link: ;
    rel=”https://api.w.org/”
    Vary: Accept-Encoding,User-Agent
    Content-Encoding: gzip
    Content-Length: 5384
    Content-Type: text/html; charset=UTF-8

    WordPress und Cloudflare: Einstellungen & Erfahrungen › wpLove.de

    Ist das jetzt aktiv oder wie?

    • Christian 15. März 2016 um 12:44 Uhr · Antworten

      Hi John, danke für Deinen Kommentar. Poste doch mal Deine URL, dann schaue ich mal drauf.

  2. Cyrill 18. August 2016 um 08:28 Uhr · Antworten

    Hallo

    Verstehe ich das richtig.
    Cloudflare Cached die css, javascript und einige Webseiten-Dateien.
    Wir haben einen grösseren Onlineshop und sind uns am überlegen diesen zum Test über Cloudflare umzuleiten.
    Wenn Cloudflare jedoch Cached und wir 2 Mal am Tag Preisänderungen haben und z.B. 12 Stunden Cache-Zeit bei Cloudflare eingestellt ist werden dann dem Kunden immer noch die alten Preise angezeigt?

    Viele Grüsse
    Cyrill

  3. Christian 21. August 2016 um 19:19 Uhr · Antworten

    Hi Cyrill, Du kannst in den Page Rules einstellen, wie häufig Cloudflare den Cache aktualisieren soll. In der kostenlosen Version ab 2 Stunden und in dem kostenpflichtigen Paket sogar jede 1 Stunde.

  4. Daniel 2. Februar 2018 um 11:29 Uhr · Antworten

    Hallo in die Runde,

    vielen vielen Dank für die tolle Beschreibung, das hat mich schon etwas weiter gebracht. Das Problem welches ich habe ist, das ich bei der UDAG meine Domains und mein Webspace als Hoster habe. Die bieten aktuell das ganze Thema SSL nicht an und ich brauch das zwingend!!!
    Die einzige Alternative scheint mir das hier zu sein, die einzige Nuss die ich noch knacken muss ist die Geschichte mit dem Namensserver. Da hab ich natürlich Angst was kaputt zu machen, ich werd einfach mal den Support anrufen ob die mir helfen können.

    Danke und beste Grüße

Kommentar hinterlassen

XHTML Du kannst diese Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>