WP Rocket mit CloudFlare nutzen

WP Rocket ist komplett kompatibel und ergänzt sich mit Cloudflare.

Cloudflare bietet ebenfalls einen Minifizierungsprozess für CSS- und JavaScript-Dateien an, doch WP Rocket kann zusätzlich mehrere Dateien in kleinen Gruppen zusammenfassen, was der Performance zugute kommt. Dieses Feature ist bei Cloudflare nicht verfügbar.

Wir empfehlen dir, die Minifizierung sowohl bei Cloudflare, als auch bei WP Rocket zu aktivieren, um optimale Ergebnisse zu erzielen.

Hinweis: Wenn du Cloudflare mit WP Rocket nutzt, kannst und solltest du auf das offizielle WordPress-Plugin von Cloudflare verzichten. WP Rocket bietet mit seinen Einstellungen die gleiche Funktionalität; seit Version 2.7 ist sogar HTTPS-Rewriting möglich.

Cloudflare-Einstellungen in WP Rocket

Im CDN-Tab unter Einstellungen → WP Rocket siehst du die Option Cloudflare-Einstellungen anzeigen. Aktiviere diese, und ein Popover erscheint:

CDN-Einstellungen mit Popover

Bestätige, speichere die Seite, und wechsle in den neu erschienenen Cloudflare-Tab. Dort siehst du mehrere Optionen:

CloudFlare-Einstellungen in WP Rocket

  • E-Mail des Cloudflare-Kontos – Gib die E-Mail-Adresse ein, auf die dein Cloudflare-Konto registriert ist.
  • API-Schlüssel – Melde dich in deinem Cloudflare-Konto an und gehe zur Seite My Account. Dort findest du am Ende der Seite deinen API-Schlüssel:

    CloudFlare-Dashboard

    Kopiere den API-Schlüssel und füge ihn in das Feld in deinen Einstellugen bei WP Rocket ein.

    Du kannst auch deinen API-Schlüssel in deiner wp-config-Datei hinterlegen (seit WP Rocket 2.6.7). Dies kann besonders nützlich sein, wenn du verschiedene Websites mit demselben Cloudflare-Konto betreibst. Die Codezeile zum Hinterlegen deines Schlüssels sieht so aus (du musst natürlich deinen eigenen Schlüssel noch einfügen):

    define('WP_ROCKET_CF_API_KEY', 'deinen-API-Schlüssel-hierhin');<br>
    	
  • Domain – Gib deine Domain ein.
  • Entwicklungsmodus – Aktiviert/deaktiviert den Entwicklungsmodus von Cloudflare. Du solltest ihn aktivieren, wenn du gerade eine Menge Änderungen auf deiner Site durchführst, oder einem Problem auf der Spur bist. Cloudflare sagen dazu:
    “Development Mode temporarily allows you to temporarily suspend Cloudflare’s edge caching and minification features. Development mode is useful if you are making changes to cacheable content (like images, css, or JavaScript) and would like to see those changes right away.”
  • Aktiviere automatisch die mit für WP Rocket optimalen Cloudflare-Einstellungen – WP Rocket aktiviert automatisch ein vordefiniertes Set von Optionen in CloudFlare zur Optimierung der Performance deiner Website:
    • Setzen den Cache-Level auf „aggressive“
    • Wir aktivieren Cloudflares Minifizierung
    • Deaktivieren das Rocket Loader-Feature (nicht verwandt mit WP Rocket) für bessere Kompatibilität.
    • Setzt Browser Cache auf 1 Monat
  • Cache leeren – Leert den Cloudflare-Cache.

Probleme lösen

Die meisten Probleme mit Cloudflare verursacht das Rocket Loader -Feature. Solltest du Darstellungsprobleme im Zusammenhang mit Cloudflare bemerken, deaktiviere zuerst den Rocket Loader, leere den Cache und prüfe, ob das Problem damit gelöst ist.