{"id":29322,"date":"2022-10-31T00:35:02","date_gmt":"2022-10-30T23:35:02","guid":{"rendered":"https:\/\/pi3g.com\/?p=29322"},"modified":"2022-10-31T00:35:08","modified_gmt":"2022-10-30T23:35:08","slug":"using-cloudflares-apo-to-cache-a-mixed-wordpress-and-application-website","status":"publish","type":"post","link":"https:\/\/pi3g.com\/de\/using-cloudflares-apo-to-cache-a-mixed-wordpress-and-application-website\/","title":{"rendered":"Verwendung von Cloudflare's APO f\u00fcr den Cache einer gemischten WordPress- und Anwendungs-Website"},"content":{"rendered":"

picockpit.com ist unsere Raspberry Pi Web OS Anwendung<\/a> - ein WordPress-Blog (f\u00fcr Content Marketing und Support), das in einem Unterverzeichnis eingerichtet ist, auf picockpit.com\/raspberry-pi\/<\/a><\/p>\n\n\n\n

Google Analytics hat mir gezeigt, dass der PiCockpit-Blog in wichtigen L\u00e4ndern, wie den USA, langsamer geladen wird. <\/p>\n\n\n\n

Hier ist ein Screenshot eines Leistungstests, bevor die Seite mit Cloudflare optimiert wurde:<\/p>\n\n\n\n

\"\"
Geschwindigkeit eines Blogposts auf picockpit.com in der Welt<\/figcaption><\/figure>\n\n\n\n

Wie Sie sehen k\u00f6nnen, funktioniert die Seite am besten in Deutschland (wo sich der Server befindet) und am schlechtesten in Sydney, das buchst\u00e4blich auf der anderen Seite des Globus liegt. (TTFB bedeutet Zeit bis zum ersten Byte). <\/p>\n\n\n\n

Google zeigt lokalisierte Suchergebnisse an, die Faktoren wie die Seitengeschwindigkeit enthalten, die von dem Land aus gesehen wird, in dem das Suchergebnis angezeigt wird. <\/p>\n\n\n\n

Um mehr Besucher zu bekommen, wollen wir die gesamte Seite beschleunigen.<\/p>\n\n\n\n

Warum Cloudflare f\u00fcr Beschleunigung?<\/h2>\n\n\n\n

Ein CDN ist ein n\u00fctzlicher Schritt in die richtige Richtung - es w\u00fcrde die Geschwindigkeit erh\u00f6hen, aber Cloudflare bietet einige zus\u00e4tzliche interessante Funktionen:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Cloudflare bietet viele Edge-Server auf der ganzen Welt und hat geringe Latenzzeiten.<\/p>\n\n\n\n

Cloudflare bietet nicht nur CDN-Dienste (Zwischenspeicherung Ihrer Inhalte), sondern fungiert auch als Web-Firewall und vieles mehr! <\/p>\n\n\n\n

Einrichten von Cloudflare f\u00fcr Ihre Website<\/h3>\n\n\n\n

Um Cloudflare f\u00fcr Ihre Website einzurichten, m\u00fcssen Sie Zugriff auf die Domain haben und in der Lage sein, ihre Nameserver zu \u00e4ndern. Sie m\u00fcssen die richtigen DNS-Eintr\u00e4ge f\u00fcr Ihre Website einrichten. Die genaue Vorgehensweise w\u00fcrde den Rahmen dieses Artikels sprengen.<\/p>\n\n\n\n

Wir bieten einen Beratungsdienst an und k\u00f6nnen diese Arbeit f\u00fcr Sie \u00fcbernehmen, wenn Sie daran interessiert sind. <\/a><\/p>\n\n\n\n

APO zur Beschleunigung von WordPress <\/h3>\n\n\n\n

Das Highlight f\u00fcr WordPress-Seiten ist ihre APO-Dienst<\/a>(automatische Plattform-Optimierungen) <\/p>\n\n\n\n

Um Cloudflare zu zitieren: \"Der Hauptunterscheidungsfaktor zwischen Cloudflare APO und anderen traditionellen Seiten-Caching- und CDN-L\u00f6sungen ist die F\u00e4higkeit, statisches HTML direkt bei Cloudflare zu cachen.\"<\/p>\n\n\n\n

Mit APO installieren Sie die Cloudflare WordPress-Plugin<\/a>die die Seite \u00fcberwacht und Aktualisierungen an Cloudflare weiterleitet. Cloudflare zwischenspeichert dann wiederum auch die HTML-Ausgabe Ihrer WordPress-Seite - was die Seite f\u00fcr Ihre Besucher erheblich beschleunigt. Auf diese Weise sieht Ihr Server nur Anfragen, die dynamisch verarbeitet werden m\u00fcssen. <\/p>\n\n\n\n

Es gibt ein Regelwerk rund um APO, das sicherstellt, dass Personen, die sich z. B. in Ihr WordPress-Backend einloggen, mit Ihrer aktuellen Seite interagieren. <\/p>\n\n\n\n

Es f\u00fchlt sich f\u00fcr mich ziemlich transparent an und ist ein sehr einfach zu bedienendes Plugin.<\/p>\n\n\n\n

Nach der Installation k\u00f6nnen Sie es unter Einstellungen\/Cloudflare konfigurieren<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Zun\u00e4chst m\u00fcssen Sie sich bei Cloudflare anmelden, indem Sie Ihre Cloudflare-Login-E-Mail-Adresse und einen API-Schl\u00fcssel angeben (generieren Sie hier den Cloudflare-API-Schl\u00fcssel<\/a>). Danach sehen Sie die folgende Schnittstelle:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Klicken Sie auf die Schaltfl\u00e4che \"\u00dcbernehmen\", klicken Sie auf den Schieberegler unter \"Automatische Plattformoptimierung\" (optional \"Cache nach Ger\u00e4tetyp\" einstellen) - das war's. <\/p>\n\n\n\n

Cloudflare sollte APO automatisch erkennen und aktivieren, sobald das Plugin installiert ist. Pr\u00fcfen Sie dies unter Geschwindigkeit\/Optimierung: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Gemischter Inhalt: Anwendungsseiten und WordPress-Seiten<\/h2>\n\n\n\n

picockpit.com ist etwas Besonderes, denn es handelt sich nicht nur um eine WordPress-Seite. Die Hauptanwendung auf picockpit.com verwendet Backend-API-Aufrufe, l\u00e4dt dynamische Seiten, etc. - wovon das Cloudflare APO-Plugin nat\u00fcrlich nichts wei\u00df. <\/p>\n\n\n\n

Das Zwischenspeichern dieser Seiten auf Cloudflare f\u00fchrt zu scheinbar bizarrem Verhalten - z. B. wird der Raspberry Pis eines anderen Benutzers geladen, oder Sie werden auf der Seite eingesperrt und k\u00f6nnen sich nicht abmelden usw. <\/p>\n\n\n\n

Was wir also wollen, ist eine M\u00f6glichkeit, APO f\u00fcr bestimmte Seiten zu deaktivieren.<\/p>\n\n\n\n

Deaktivierung von APO f\u00fcr bestimmte URLs auf Cloudflare<\/h2>\n\n\n\n

APO hat Integration von Seitenregeln <\/a>mit Cloudflare. Das bedeutet, dass bestimmte Seitenregeln die APO steuern k\u00f6nnen. <\/p>\n\n\n\n

Wichtiger Hinweis: Es gibt keinen Hinweis auf Cache-Regeln, die den APO steuern.<\/strong>. In meinem Experiment schienen die Cache-Regeln keine Wirkung zu haben!<\/p>\n\n\n\n

Daher richten wir Seitenregeln ein, um APO f\u00fcr Seiten zu deaktivieren, die nicht zwischengespeichert werden sollen.<\/p>\n\n\n\n

Navigieren Sie zu Regeln \/ Seitenregeln:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Klicken Sie auf \"Seitenregel erstellen\", um eine neue Regel hinzuzuf\u00fcgen. Ich habe die folgenden Regeln aufgestellt:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Mit Seitenregeln, nur die erste <\/strong>passende Regel angewendet wird. Daher ist meine erste Regel, dass alles, was sich im URL-Bereich des Blogs picockpit.com\/raspberry-pi befindet, standardm\u00e4\u00dfig zwischengespeichert wird.<\/p>\n\n\n\n

Das Sternchen (*) ist ein Sammelbegriff:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Danach habe ich eine Reihe von \"Cache Everything\"-Regeln f\u00fcr URLs, von denen ich wei\u00df, dass sie statisch sind, z. B. Bilder auf Picockpit und JavaScript-Dateien. Ich m\u00f6chte, dass diese auch vom Rand aus bedient werden, um die Benutzererfahrung zu beschleunigen. <\/p>\n\n\n\n

Schlie\u00dflich habe ich eine Auffangregel f\u00fcr alles andere auf picockpit.com:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Dies wird Bypass <\/strong>den Cache f\u00fcr diese Seiten, so dass sie dynamisch von Ihrem Server geladen werden k\u00f6nnen.<\/p>\n\n\n\n

Nebenbemerkung: WebSockets<\/h3>\n\n\n\n

Cloudflare unterst\u00fctzt WebSockets, auf die PiCockpit angewiesen ist (um MQTT-Datenverkehr vom JavaScript-Frontend zum Backend zu leiten). Cloudflare erkl\u00e4rt, dass sie sich mit den einzelnen Kunden in Verbindung setzen werden<\/a>wenn die Websocket-Nutzung den f\u00fcr jede Preisstufe angemessenen Wert \u00fcberschreitet. <\/p>\n\n\n\n