Die idealen FlyingPress Einstellungen mit FlyingCDN und BunnyCDN

Bist du schon auf FlyingPress umgestiegen?

Ich habe es getan und einen großen Unterschied im Vergleich zu WP Rocket festgestellt (vor allem bei der tatsächlichen Ladezeit im Browser).

Am Anfang dieses Artikels habe ich diese Tabelle erstellt, die die Funktionen von FlyingPress vs. WP Rocket vs. SiteGround Optimizer vergleicht. Sie zeigt auch, warum FlyingCDN (das die Georeplikation von BunnyCDN + Bunny Optimizer nutzt) viel besser ist als RocketCDN, da es nur Dateien ohne zusätzliche Funktionen bereitstellt.

Wenn man sie miteinander vergleicht, ist es einfach zu sehen, warum so viele Leute zu FlyingPress wechseln. Da musst ich natürlich dieses Tutorial über die Konfiguration der FlyingPress Einstellungen schreiben.

Dies war die Empfehlung von WP Johnny. Ich hatte das Glück, dass er mir bei einigen Optimierungen helfen konnte, um die Geschwindigkeit/Kernvitalität des Webs zu verbessern. Der Wechsel zu FlyingPress war eine davon. Zunächst hat er es eingerichtet, dann habe ich mich durch die Einstellungen und die Dokumentation durchgewühlt und danach Anpassungen vorgenommen.

FlyingPress wurde von Gijo Varghese entwickelt, der die WP Speed Matters Facebook Gruppe betreibt und andere Plugins entwickelt hat, die in der Regel eine perfekte 5/5-Sterne-Bewertung haben. Während einige Leute durch den anfänglichen Preis von FlyingPress abgeschreckt werden, ist es tatsächlich billiger als WP Rocket, wenn man bedenkt, dass die Verlängerungen $42/Jahr (FlyingPress) und $49/Jahr (WP Rocket) für eine Website betragen – besonders seit WP Rocket keine Verlängerungsrabatte mehr anbietet. SG Optimizer wird von SiteGround hochgejubelt, ist aber instabil und hat nicht genügend Funktionen. Falls also keine guten Ergebnisse erzielt werden können, würde ich FlyingPress ausprobieren.

Du tust Gijo einen Gefallen, wenn du beim Wechsel Vorher/Nachher-Screenshots von den Berichten machst und diese an ihn schickst. Du könntest sie sogar in der FlyingPress Facebook-Gruppe posten. Ich bin sicher, dass er sich darüber freuen würde.

	SG Optimizer	WP Rocket	FlyingPress
Server-side caching	✓	x	x
Delay JavaScript	x	✓	✓
Remove unused CSS	x	Inline	Separate file
Critical CSS	x	✓	✓
Host fonts locally	x	x	✓
Font-display: swap	x	✓	✓
Preload links	x	✓	✓
Preload critical images	x	x	✓
Fetchpriority resource hint	x	x	✓
Lazy render HTML elements	x	x	✓
Lazy load background images	x	Inline	Helper class
Exclude above the fold images	By class	By URL	By number
Add missing image dimensions	x	✓	✓
YouTube iframe preview image	x	✓	✓
Self-host YouTube placeholder	x	x	✓
CDN (beyond Cloudflare)	SiteGround CDN	StackPath	BunnyCDN
CDN PoPs	14	60	93
CDN Tbps	N/A	65	80
Dynamic caching	Premium	x	Vary cache
CDN geo-replication	x	x	✓
CDN image optimization	✓	x	✓
CDN image resizing for mobile	x	x	✓
Documented APO compatibility	x	x	✓

1. Dashboard

Allgemeine Informationen, wie Links zu deinem FlyingPress Konto, zur Dokumentation, zur Facebook-Gruppe, zum Eröffnen eines Support-Tickets usw. zeigt die Anzahl der zwischengespeicherten Seiten mit der Option, den Cache zu löschen/vorzuladen.

• Dokumentation – FlyingPress hat eine hervorragende Dokumentation. Lade das Plugin von der FlyingPress-Website herunter und lade es dann hoch (der Schlüssel ist der Zip-Datei beigefügt und wird automatisch hinzugefügt).
• Facebook-Community – Die FlyingPress Facebook Gruppe ist speziell für das Plugin. Du kannst aber auch das FlyingPress Changelog einsehen. Gijo betreibt auch die WP Speed Matters Facebook Gruppe, in der es um alles geht, was mit Geschwindigkeit zu tun hat. Ich finde es toll, dass er sich so stark in der Community engagiert.
• Öffne ein Ticket – dies führt zu der Kontaktseite, wo man Unterstützung erhalten kann (der Support, den ich von Gijo erhalten habe, war bei weitem der beste, den ich je von einem anderen Cache-Plugin erhalten habe).

2. Cache

• Cache Pages: Ein – In der Dokumentation von Gijo wird empfohlen das Caching in FlyingPress zu deaktivieren, wenn APO verwendet wird. Brian Li von Kinsta erklärt jedoch, dass APO kein Ersatz für das Caching von Seiten ist und sagt, man solle es in den Cache-Plugins eingeschaltet lassen. Ich verwende APO und habe trotzdem Caching in FlyingPress eingeschaltet. Wenn du auf Cloudways bist, reinigt FlyingPress automatisch Varnish. Um sicherzustellen, dass der FlyingPress Cache funktioniert, öffne deine Website in einem Inkognito-Fenster und suche nach dem Response-Header von FlyingPress (x-flying-press-cache: HIT) auf der ersten Anfrage/HTML-Seite.
• Zusätzliche automatische Bereinigung: None in den meisten Fällen. FlyingPress erkennt bereits viele URLs und löscht die wichtigsten Seiten, wenn man Beiträge veröffentlicht/aktualisiert oder WooCommerce-Bestände aktualisiert. Wenn du andere Arten von dynamischen Inhalten hast, die nicht automatisch bereinigt werden, verwende die anderen Optionen.
• Cache-Lebensdauer: Never in den meisten Fällen. Außer wenn bestimmte Plugins kürzere Sicherheitstokens verwenden.
• Seiten vom Caching ausschließen: Wichtige eCommerce-Seiten, Admin-/Login-Seiten und einige andere werden automatisch vom Cache ausgeschlossen (siehe Liste). Aber man kann hier weitere hinzufügen.
• Ignore Query Strings: Wenn du Query Strings hast, die ignoriert und nicht gecacht werden sollen (z.B. Werbekampagnen), füge sie hier hinzu. FlyingPress hat eine Liste von Abfrage-Strings, die es standardmäßig ignoriert. Johnny hat auch einen detaillierten Leitfaden mit Beispielen, wann Abfrage-Strings ignoriert werden sollen.
• Optimieren für eingeloggte Benutzer: Aus – Wenn man diese Einstellung aktiviert, werden die Seiten nicht zwischengespeichert (dynamisch). Wenn diese Einstellung eingeschalten ist, optimiert FlyingPress die Seiten für eingeloggte Benutzer im laufenden Betrieb. Johnny sagt, dass dies den Admin beschleunigen kann, aber wahrscheinlich einige Probleme verursachen wird.

3. CSS

• CSS-Dateien verkleinern und optimieren: Ein – minimiert CSS sowie andere CSS Optimierungen wie das Umschreiben von Schrift- und Hintergrundbild-URLs in CSS-Dateien, damit sie vom CDN bereitgestellt werden können. Ob und wo man minifizieren sollte (Cache-Plugin vs. Cloudflare) ist knifflig. Wenn du APO verwendest, empfiehlt Cloudflare die Minifizierung in Cloudflare zu deaktivieren und dies über dein Cache-Plugin zu tun. Gijo empfiehlt, CSS/JS in Cloudflare zu minifizieren (nicht HTML) und dann die Minifizierungseinstellungen in FlyingPress zu deaktivieren (wenn du APO nicht verwendest). Ich empfehle, das Minifizieren von CSS/JS für große Websites mit vielen Seiten/CSS zu deaktivieren. Und dann ist da noch die Tatsache, dass das Minifizieren über das CDN angeblich schneller ist als das Cache-Plugin. Es gibt viele verschiedene Ratschläge. Deswegen empfehle ich, dass man einfach einen eigenen Test durchführen sollte. Ich verwende APO, also habe ich den Rat von Cloudflare befolgt, in FlyingPress zu minifizieren und es in Cloudflare zu deaktivieren.
• Generiere kritisches und verwendetes CSS: Ein – kritisches CSS kann Render-Blocking-Ressourcen beheben, indem es eine kritische CSS-Datei erstellt, die in den Head injiziert wird. Unused CSS entfernt unbenutzte CSS-Selektoren, und die neue Datei wird asynchron von einem externen Stylesheet geladen.
• Load Unused CSS: asynchron – ist die sicherste Option. Schaue die Dokumentation und teste deine Ergebnisse. Ich habe ursprünglich „remove“ ausprobiert, aber das hat meine Website kaputt gemacht. Also bin ich zu async zurückgekehrt.
• Force Include Selectors: Füge CSS-Selektoren hinzu, die zwangsweise in dein kritisches und verwendetes CSS aufgenommen werden. Gijo nannte das Beispiel des Cookie-Hinweises, und tatsächlich habe ich einen CSS-Selektor für den Cookie-Hinweis auf meiner Website. Falls du andere Selektoren erzwingen willst, füge sie hier hinzu.
• Lazy Render HTML Elements – ähnlich wie Lazy Loading Images, nur für CSS-Selektoren. Überprüfe deine Website in den Chrome-Entwicklungstools und kopiere dann die nicht kritischen CSS-Selektoren, die unterhalb der Falz geladen werden (springe zu 1:08 im Video). Man kann dies mit CSS-Selektoren wie Kommentare (#comments) und Fußzeile (#footer) tun und sie dann in FlyingPress einfügen. Überprüfe deine eigenen CSS-Selektoren, da sie für jede Website unterschiedlich sein können.

4. JavaScript

• JavaScript minimieren: Ein – im Grunde die gleichen Optimierungen wie bei CSS minify, nur für JS.
• Links vorladen: Aus – wenn Benutzer mit dem Mauszeiger über einen Link fahren, wird diese Seite vorgeladen, sodass die Seite fast sofort zu laden scheint, wenn der Benutzer sie tatsächlich anklickt. Das bedeutet auch, dass zu viele Seiten vorgeladen werden können, wenn der Benutzer mit dem Mauszeiger über viele Links fährt- was die CPU-Auslastung erhöhen kann (insbesondere auf gemeinsam genutzten Servern). Um auf Nummer sicher zu gehen, sollte man diese Option daher lieber ausschalten.
• JavaScript aufschieben: Aus – kann Rendering-Blocking-Fehler durch asynchrones Laden von JS beheben. Johnny empfiehlt jedoch, dies nicht zu aktivieren, da es die Ergebnisse auf Kosten einer langsameren Website verbessert.
• Skripte bei Benutzerinteraktion laden – siehe Liste unten mit häufig zu verzögerndem JavaScript. Die Dokumentation erklärt, wie man bestimmte Plugins (wp-content/plugins/xxx), Skripte eines Themes (wp-content/themes) usw. verzögern kann. Du kannst auch den Bericht „Auswirkungen des Codes von Drittanbietern reduzieren“ überprüfen (siehe Screenshot). Wenn es keine Benutzerinteraktion gibt, werden alle Skripte nach einem Timeout von 10 Sekunden geladen. Wenn du AdSense verzögerst, solltest du sicherstellen, dass dies keine Auswirkungen auf Daten und Einnahmen hat.

ga( '
ga('
google-analytics.com/analytics.js
analytics.js
gtagv4.js
analytics-minimal.js
/gtm.js
/gtag/js
gtag(
/gtm-
adsbygoogle.js
grecaptcha.execute
optimize.js
fbevents.js
fbq(
/busting/facebook-tracking/
disqus.com/embed.js
script.hotjar.com
wp-content/themes/script-name
wp-content/plugins/plugin-name

5. Schrift

• Google-Schriftarten optimieren: Ein – lädt Google-Schriftarten herunter, um sie lokal zu hosten, zu kombinieren und zu inlinen. Google Fonts, die von externen JavaScript-Dateien bereitgestellt werden, können nicht lokal gehostet werden.
• Fallback-Schriften anzeigen: Ein – adressiert die Option „Text bleibt während des Ladens von Webfont sichtbar“ in PageSpeed Insights, die CLS verbessert. Damit wird eine Fallback-Schriftart für externe Schriftarten festgelegt und FOIT (Flash of Invisible Text) verhindert, indem font-display: swap zu deinem CSS hinzugefügt wird. Dies kann jedoch auch zu FOUT (Blinken von ungestyltem Text) führen. Die Entscheidung für einen der beiden liegt bei dir.
• Schriftarten vorladen: Ein – Gijo empfiehlt, nur die, in der CSS-Datei erwähnten Schriftarten vorzuladen. Ebenso Schriftarten, welche oberhalb der Falz geladen werden. PSI sollte unter „preload key requests“ mitteilen, welche Schriftarten vorgeladen werden sollen. Falls du eine CDN-URL für die Bereitstellung von Schriftarten verwendest, stelle sicher, dass die Schriftartdatei mit der CDN-URL darin verwendet wird (sie sollte genau mit der in PageSpeed Insights gefundenen Schriftartdatei übereinstimmen).

5. Bilder

• Lazy Load Images: browser-nativ wird von den meisten großen Browsern (außer Safari) unterstützt und verwendet kein JavaScript. Ansonsten wird „mit JavaScript“ von allen wichtigen Browsern (einschließlich Safari) unterstützt. Aber JavaScript hat eine schlechtere Leistung. Ich habe „exclude above fold images from lazy load“ auf 3 gesetzt, da das Laden von Bildern im Viewport die LCP erhöht. Aber es hängt davon ab, wie viele Bilder sich normalerweise im Ansichtsfenster befinden. Gijo hat eine Anleitung zum Lazy-loading von Hintergrundbildern mit der CSS-Klasse „lazy-bg“.
• Responsive Bilder hinzufügen: Ein – kann nur mit einem FlyingCDN-Abonnement verwendet werden. Dies passt die Größe der Bilder an die Rendering-Größe an. Ähnlich wie Cloudflare’s Bildgrößenanpassung.
• Attribute für Breite und Höhe hinzufügen: Ein – verbessert CLS durch Hinzufügen von Breiten-/Höhenattributen zu Bildern. Dies sollte helfen, die Empfehlung „use explicit weight and height“ in PSI zu beheben.
• Kritische Bilder vorladen: Ein – FlyingPress versucht, im Viewport angezeigte Bilder zu erkennen, so dass diese Bilder automatisch vorgeladen und vom Lazy Load ausgeschlossen werden können.
• Emoji deaktivieren: Ein – entfernt einen kleinen JavaScript-Code in WordPress, der Emojis anzeigt.

7. IFrame

• Lazy Load iFrames: Ein – iFrames wie eingebettete Videos und Google Maps werden nur geladen, wenn sie sich in der Nähe des Ansichtsfensters befinden. Und werden ausgeschlossen, wenn sie sich im Ansichtsfenster befinden.
• Platzhalterbild für YouTube-iFrames verwenden: Ein – ersetzt YouTube iFrames durch ein Vorschaubild. Verbessert die Geschwindigkeit erheblich, wenn du Videos einbetten, da sie zusätzliches JavaScript und Anfragen von Drittanbietern laden. Der iFrame wird nur geladen, wenn der Play-Button angeklickt wird.
• YouTube-Platzhalter selbst hosten: Ein – eine tolle Einstellung! Selbst wenn du iframes durch Vorschaubilder ersetzt, wirst du Anfragen von Drittanbietern wie: i.ytimg.com sehen. Dies sollte sie eliminieren, indem der Platzhalter auf deinem Server gehostet wird, anstatt sie von dieser externen Domain zu beziehen. Das bedeutet auch, dass YouTube-Thumbnails jetzt gecached und von deinem CDN bereitgestellt werden können.

8. CDN

FlyingCDN nutzt BunnyCDN mit Georeplikation und Bunny Optimizer für $0,03/GB.

Normalerweise beträgt der Preis von BunnyCDN $0.01/GB – $0.06/GB je nach Region, die Georeplikation kostet $0.045/GB für alle 5 replizierten Regionen und Bunny Optimizer (für die Bildoptimierung) kostet $9.50/Monat. Eine Pauschale von $0,03/GB ist ein solider Deal den Gijo ausgehandelt hat.

BunnyCDN (wird von FlyingCDN verwendet) – durchweg leistungsstarkes CDN auf cdnperf.com mit 93 PoPs und 80 Tbps+. Im Vergleich zu RocketCDN/StackPath erhältst du 23 PoPs mehr und es ist 15 Tbps schneller.

Georeplikation – kopiert deine Dateien in die Speicherzonen von BunnyCDN. Die Dateien werden aus der nächstgelegenen Zone abgerufen und Anfragen treffen nicht auf den Ursprung. Verbessert das Verhältnis zwischen Cache und Treffer und reduziert die Latenz.

Bunny Optimizer – ein von BunnyCDN angebotener Bildoptimierungsdienst, der Komprimierung, WebP und Größenänderung von Bildern umfasst, um kleinere Versionen für mobile Geräte bereitzustellen.

BunnyCDN + Cloudflare – Gijo empfiehlt die Kombination BunnyCDN + Cloudflare für eine bessere Cache-/Trefferrate, Traffic-Routing und Georeplikation. Dies ist auch das, was ich auf meiner Website verwende.

Gijo hat eine Anleitung für die Einrichtung von FlyingCDN oder du kannst meiner folgen:

Schritt 1: Zahle Geld auf dein FlyingCDN-Konto ein.

Schritt 2: Richte eine benutzerdefinierte CDN-URL ein, indem du einen CNAME-Eintrag zu deinem DNS hinzufügst.

Schritt 3: Füge deine CDN URL zu FlyingPress hinzu und wähle die Dateitypen aus, die bereitgestellt werden sollen (z. B. alle Dateien).

Schritt 4: Überprüfe deinen Quellcode und stelle sicher, dass die richtigen Dateien (z. B. CSS/JS/Schriftarten) von FlyingCDN ausgeliefert werden. Du kannst auch versuchen die Dateien zu löschen oder einige Zeit zu warten, bis sie aktualisiert werden.

Empfohlene Cloudflare Einstellungen – wenn du Cloudflare verwendest, empfiehlt Gijo’s, deine Website auf Proxy umzustellen, die Browser-Cache-TTL auf 1 Jahr zu setzen. Oder bestehende Header zu respektieren, wenn du Cloudflare zum Cachen von Seiten verwendest. Nur CSS + JS zu minifizieren (nicht HTML) und Rocket Loader zu deaktivieren.

9. Datenbank

Ich habe wöchentliche Datenbankbereinigungen geplant (ich weiß, keine gute Idee, aber ich bin faul).

Ich lösche keine automatischen Entwürfe oder Überarbeitungen von Beiträgen, weil ich, zumindest ein paar Backups, von Beiträgen aufbewahren möchte. Aber ich begrenze die Anzahl der Überarbeitungen von Beiträgen auf 5 mit Perfmatters (oder mache es einfach mit einer Codezeile).

Wie ich es bei jedem Cache-Plugin empfehle, installiere ich WP-Optimize alle paar Jahre mal, um meine Datenbank gründlich zu reinigen. Wenn du häufig Plugins installierst/löschst, hinterlässt das Unmengen an Daten in deiner Datenbank. Du kannst wahrscheinlich alle Tabellen löschen, auf denen „Entfernen“ steht. Achte auch auf Plugin-Funktionen/Module, die die Datenbank aufblähen (z. B. alles, was deine Website scannt oder Daten bereitstellt).

10. Cloudflare APO

FlyingPress ist vollständig kompatibel mit Cloudflare APO. Ich habe eine ausführliche Anleitung zur Einrichtung von Cloudflare APO mit dem Cloudflare-Plugin geschrieben. Cloudflare hat auch eine eigene APO Instruction.

Der erste Schritt besteht darin, deine Ergebnisse/TTFB in KeyCDN zu benchmarken und FlyingPress zu deaktivieren (dies wird von Cloudflare empfohlen). Du reaktivierst FlyingPress, nachdem du bestätigt hast, dass APO funktioniert. Brian Li von Kinsta empfiehlt, das Caching im Cache-Plugin aktiviert zu lassen, wenn du APO verwendest.

Als Nächstes musst du deinen Traffic über Cloudflare proxen, um APO nutzen zu können. Stelle deine Website in den DNS-Einstellungen von Cloudflare einfach auf Proxy (nicht nur DNS) um. Sobald du APO gekauft hast ($5/mo), installiere das Plugin von Cloudflare, erstelle ein API-Token in Cloudflare und füge es dem Plugin hinzu.

Verwende schließlich uptrends.com, um sicherzustellen, dass APO funktioniert, indem du deine Website im Format https://www. testest. Beziehe dich auf den unten stehenden Screenshot. Sobald es funktioniert, reaktiviere FlyingPress. Gijo hat auch einige empfohlene Cloudflare Einstellungen aufgeführt, falls du Seiten mit Cloudflare cachst.

Das Plugin von Cloudflare verfügt über eine Einstellung zur „Anwendung der empfohlenen Cloudflare-Einstellungen für WordPress“. Aber ich würde dies nur tun, wenn du mit der Konfiguration deiner Cloudflare-Einstellungen nicht vertraut bist.

11. FlyingPress vs. SG Optimizer vs. WP Rocket

WP Rocket muss eine bessere Arbeit bei der Optimierung für das reale Browsing Erlebnis leisten. Es verwendet bei CSS die langsame Inline-Methode, Lazy-Loading Hintergrundbilder ist relativ kompliziert und RocketCDN ist nicht schnell genug. Siteground Optimizer hat nur eingeschränkte Funktionen und ist unzuverlässig. Perfmatters kann helfen, sich um Optimierungen zu kümmern. Wenn das allerdings der Fall ist, solltest du gleich FlyingPress verwenden.

Man weiß es nicht, bis man es weiß: flying-press.com

Joe Speedmaster

Du rockst Gijo! Mach weiter so und danke für den Aufbau der großartigen Community/Plugins.

Liebe Grüße,
Joe