Die beste CloudFlare-Konfiguration zum Bestehen der Core Web Vitals

Optimierung der Core Web Vitals mit Cloudflare: Was zu aktivieren und was zu vermeiden ist

Cloudflare bietet eine breite Palette von Einstellungen, die sich sowohl positiv als auch negativ auf die Core Web Vitals auswirken können. Während einige Einstellungen die Leistung verbessern, führen andere zu Verzögerungen oder stören das Rendern der Seite. Lassen Sie uns die häufigsten Cloudflare-Optionen aufschlüsseln und unter welchen Bedingungen Sie sie aktivieren sollten!

Häufige Fragen zur Einrichtung von CloudFlare: Ich überprüfe oft CloudFlare-Setups für Kunden. Während ich Bücher über die Einrichtung eines CDN wie CloudFlare schreiben könnte, drehen sich die meisten Fragen um ein einfaches 'Sollte ich diese Einstellung aktivieren?'. Dieser Artikel beantwortet diese Fragen mit den entsprechenden Überlegungen für die häufigsten CloudFlare-Einstellungen in Bezug auf die Core Web Vitals.

Free vs. Pro: Lohnt sich ein Upgrade?

Geschwindigkeit > Optimierung

Polish 

Polish optimiert Bilder, die auf Ihrer CloudFlare-Domain gehostet werden, indem es sie komprimiert und die Bilder von ihren Metadaten befreit und sie optional in WebP-Bilder umwandelt. 

Kleinere Bildgrößen verbessern normalerweise den Largest Contentful Paint, indem sie die Ressourcenladezeit des Bildes verbessern. Da LCP jedoch von mehreren Faktoren beeinflusst wird, die nicht die Ressourcenladezeit von Bildern sind, erwarten Sie keine drastischen Verbesserungen!

Empfehlung: Aktivieren und wählen Sie 'Lossy Webp' für beste Ergebnisse.

Mirage

Mirage optimiert Bilder basierend auf Netzwerkbedingungen. Während diese Idee edel ist, ist die Implementierung 'langsam durch Design'. Um die Bilder für alle Netzwerkbedingungen zu optimieren, müssen die Bilder auf der Seite blockiert werden, bis die Netzwerkverbindungsgeschwindigkeit gemessen wurde.  Dieses Blockieren von Bildern kann Layoutverschiebungen und ironischerweise einen niedrigeren Largest Contentful Paint Score verursachen.

Empfehlung: Unter keinen Umständen aktivieren!

Speed Brain

Speed Brain verwendet die Speculation Rules API, um die Time to First Byte zu beschleunigen, indem zukünftige Navigationen vorab abgerufen werden. Während Speculation Rules extrem effektiv sind, um alle Core Web Vitals einschließlich des Largest Contentful Paint zu verbessern, empfehle ich nicht, diese CloudFlare-Funktion zu aktivieren, da das 'Selbstkonfigurieren' der Speculation Rules super einfach und weitaus effektiver ist als CloudFlares 'Einheitslösung', selbst mit ihrer RUM-Integration! 

Empfehlung: Deaktivieren und Speculation Rules manuell konfigurieren

CloudFlare Fonts

CloudFlare Fonts automatisiert das Selbst-Hosting von Schriftarten. Dies ist eine großartige Idee, da das Selbst-Hosting wichtiger Ressourcen neue, externe Verbindungen eliminiert, die standardmäßig langsamer sind als das Wiederverwenden der bereits offenen Verbindung zu Ihrer CloudFlare-Proxy-Site.

Es ist effektiver, sich 15 Minuten Zeit zu nehmen und Schriftartdateien manuell als selbst gehostet zu konfigurieren. Leider gibt es viele CMS-Systeme, die dies nicht zulassen. In diesem Fall ist das Aktivieren von CloudFlare Fonts eine völlig legitime Option.

Empfehlung: Standardmäßig deaktivieren; nur aktivieren, wenn manuelles Selbst-Hosting keine Option ist.

Early Hints

Early Hints beschleunigen die Bereitstellung kritischer Ressourcen (wie Styles, Schriftarten oder Bilder), indem sie darauf hinweisen, bevor der eigentliche HTML-Inhalt an den Browser gesendet wird. Um einen Ressourcenhinweis über CloudFlare zu senden, liest CloudFlare Ihren Antwort-Header und extrahiert Ressourcenhinweise daraus. 

Wenn Sie sich wohl damit fühlen, Ressourcenhinweise in HTML-Antwort-Headern zu senden, empfehle ich dringend, diese Funktion zu aktivieren. Seien Sie sich jedoch bewusst, dass Ressourcenhinweise für Ihr Entwicklerteam möglicherweise viel versteckter sind als Ressourcenhinweise im Head der Seite. Wenn sie falsch konfiguriert sind, können sie Dinge verlangsamen, anstatt sie zu beschleunigen. Verwenden Sie sie also mit Vorsicht.

Empfehlung: Nur aktivieren, wenn Sie Ressourcenhinweis-Header korrekt senden.

Rocket Loader™

Rocket Loader 'verzögert' alle JavaScripts auf einer Webseite, indem er sie vorübergehend zurückhält und sie dann einige Augenblicke später wieder in die Seite einfügt.  Dies ist ein böser (oder netter, je nach Sichtweise) Trick, der viele Überprüfungen und Hacks erfordert, um sicherzustellen, dass er auf allen Browsern ordnungsgemäß funktioniert. Auch dieser Trick verbirgt die Skripte vor dem Preload-Scanner, einem Mechanismus, der entwickelt wurde, um das Laden kritischer Ressourcen zu beschleunigen.

Aus den oben genannten Gründen bin ich offensichtlich kein Fan davon, Rocket Loader blind zu aktivieren. Skripte sollten basierend auf ihrer Wichtigkeit geplant werden. Kritische Skripte müssen früh geladen und ausgeführt werden, während nicht wesentliche Skripte warten können, bis der Browser im Leerlauf ist.

CloudFlares Rocket Loader tut das. Er hält die Skripte zurück und fügt sie zu einem bestimmten Zeitpunkt ein, ohne Rücksicht auf ihre Wichtigkeit. Rocket Loader priorisiert nur andere Ressourcen wie das LCP-Element, Schriftarten und Styles gegenüber Skripten. Wenn Ihr CMS kein Zurückstellen von Skripten oder feinkörnigeres Skript-Timing zulässt, könnte Rocket Loader Ihre beste Option sein.

Empfehlung: Deaktivieren und Skripte manuell planen. Nur aktivieren, wenn Sie keine andere Möglichkeit haben, die Skriptausführung zu verzögern oder zu steuern.

Automatic Platform Optimization für WordPress

CloudFlares APO speichert ganze Seiten auf seinen Edge-Servern zwischen, eine Technik, die als Full-Page-Edge-Caching bekannt ist. Wenn es richtig implementiert ist, verbessert es die Time to First Byte (und anschließend den LCP und FCP) für eine bestimmte Art von Besucher! 

Es gibt jedoch einen Haken. Full-Page-Edge-Caching muss oft automatisch umgangen werden. Zum Beispiel, wenn sich ein Benutzer anmeldet oder Artikel in seinen Warenkorb legt, wird APO automatisch deaktiviert, da der Seiteninhalt personalisiert wird. Zu diesem Zeitpunkt ist das Bereitstellen einer generischen zwischengespeicherten Seite keine Option mehr. Da APO für alle Arten von Websites funktionieren muss, wird der Cache viel häufiger umgangen als für Ihre Website erforderlich. Aus diesem Grund ist die manuelle Cache-Konfiguration fast immer effektiver als CloudFlares APO

Empfehlung: Aktivieren Sie APO oder, noch besser, konfigurieren Sie Ihre eigenen Full-Page-Edge-Caching-Regeln für eine bessere Kontrolle darüber, wann das Caching umgangen wird.

HTTP/2 & HTTP/2 to Origin & Enhanced HTTP/2 Prioritization

Das Aktivieren von HTTP/2, HTTP/2 to Origin & Enhanced HTTP/2 Prioritization ist ein Kinderspiel.  HTTP/2 ist eine enorme Verbesserung gegenüber dem älteren HTTP/1.1-Protokoll. HTTP/2 macht viele Dinge, aber am wichtigsten ist, dass es den alten Treppeneffekt beseitigt, indem mehrere Dateien parallel über dieselbe Verbindung gesendet werden können. HTTP/2 gibt es seit 10 Jahren und wird von Browsern und Servern weitgehend unterstützt!

Empfehlung: aktivieren

HTTP/3 (mit QUIC)

HTTP/3 mit QUIC ist aufgrund von Verbesserungen beim Verbindungsaufbau und der Latenz noch schneller als HTTP/2. Im Grunde genommen ermöglicht HTTP/3 das unabhängige Senden mehrerer Streams, selbst wenn einer verzögert ist. QUIC kombiniert Transport- und Verschlüsselungs-Handshakes, was die Verbindungszeit reduziert. Dies führt zu bis zu 10% schnelleren TTFB-Zeiten!

Empfehlung: aktivieren

0-RTT Connection Resumption

0-RTT Connection Resumption beschleunigt sichere Verbindungen, indem der anfängliche Handshake übersprungen wird, wenn ein Benutzer eine Website erneut besucht. Es verwendet zuvor gespeicherte Verschlüsselungsschlüssel, sodass Daten sofort gesendet werden können, was die Latenz reduziert und die Seitenladezeiten verbessert. 

Empfehlung: aktivieren

Automatic Signed Exchanges (SXGs)

Signed Exchanges (SXG) ermöglichen es der Google-Suche, Ihren Inhalt vorab abzurufen, während die Privatsphäre des Benutzers gewahrt bleibt. Das bedeutet, dass Ergebnisse, die in der Google-Suche angezeigt werden, einige Schlüsselressourcen (wie HTML, JavaScript, CSS, Bilder oder Schriftarten) auf datenschutzfreundliche Weise vorab abrufen können. Automatic Signed Exchanges verbessern Ihren Largest Contentful Paint und Time to First Byte!

Empfehlung: aktivieren

Scrape Shield

Scrape Shield schützt den Inhalt auf Ihrer Website. Während dies wie eine gute Idee erscheinen mag, bin ich entschieden dagegen, irgendwelche Scrape Shield-Optionen zu aktivieren. Scrape Shield funktioniert, indem JavaScript in Ihre Seite injiziert wird, um den zuvor verschleierten Inhalt zu dekodieren. Dieser Kompromiss bei der Geschwindigkeit gegenüber dem Verbergen von Inhalten ergibt für mich keinen Sinn. Echte Spammer lassen sich nicht täuschen, während echte Benutzer zusätzliche Skripte erhalten, die die Seite verlangsamen.

Empfehlung: E-Mail-Adressverschleierung deaktivieren und Hotlink-Schutz deaktivieren

Caching > Konfiguration

Cache leeren (Purge Cache)

Das Leeren des Caches macht alle von CloudFlare zwischengespeicherten Dateien ungültig, einschließlich Stylesheets, JavaScript, Bilder und sogar ganze Seitencaches. Und obwohl Purge Cache technisch gesehen keine Einstellung ist, muss ich vor dem Löschen des Caches warnen. Das Löschen des Caches macht Ihre Website langsamer, bis der Cache neu aufgebaut wurde!

Empfehlung: Vermeiden Sie es wenn möglich, den gesamten Cache zu leeren. Leeren Sie nur betroffene Dateien!

Caching-Level

Das Cache-Level bestimmt, wie CloudFlare Query-Strings behandelt (Ich weiß: 'Was ist in einem Namen!'). Sie werden sich diese Einstellung genau ansehen wollen. 

Die 'schnellste' Option ist 'Query-String ignorieren'. Dies lieferte dieselbe Ressource unabhängig vom Query-String. Dies ist nur eine gute Option, wenn Sie zu 100% sicher sind, dass Query-Strings auf Ihrer Website nicht verwendet werden. In diesem Fall werden von anderen hinzugefügte Query-Strings ignoriert.

'Standard' liefert für jeden unterschiedlichen Query-String eine andere zwischengespeicherte Datei. Dies ist die Standardeinstellung für CloudFlare, aber in Kombination mit Full-Page-Edge-Caching und Tracking-Parametern wie utm-Parametern kann diese Einstellung zu Cache-Inkohärenz und einer niedrigeren Cache-Hit-Ratio führen!

Empfehlung: Query-String wann immer möglich ignorieren oder Standard, vermeiden Sie die Option 'Kein Query-String' wenn möglich.

Browser Cache TTL

Die Browser Cache TTL teilt dem Browser mit, wie lange er statische Ressourcen zwischenspeichern kann. Zwischengespeicherte Ressourcen können direkt aus dem Browser bereitgestellt werden und sind viel schneller verfügbar als entfernte Netzwerkressourcen. Das bedeutet, dass eine kurze Browser Cache TTL den Browser-Cache häufig ungültig machen würde, was die Cache-Hit-Ratio senkt. Also, es sei denn, Ihre statischen Dateien ändern sich häufig, setzen Sie diese Einstellung auf Maximum. 

Empfehlung: Auf 1 Jahr setzen, wenn möglich

Entwicklungsmodus

Der Entwicklungsmodus umgeht das gesamte CloudFlare-Caching, während er aktiviert ist. Es könnte verlockend für Sie sein, den Entwicklungsmodus während der Entwicklung zu aktivieren. Bitte aktivieren Sie den Entwicklungsmodus nicht, da er auch das Caching für alle anderen Besucher deaktiviert. Richten Sie stattdessen eine Entwicklungsdomain ein, auf der Sie entwickeln können, oder schließen Sie sich selbst vom CloudFlare-Caching aus, indem Sie Cache-Regeln einrichten.

Empfehlung: nicht aktivieren!

Caching > Tiered Cache

Tiered Cache reduziert die Anzahl der Anfragen an Ihren Ursprungsserver und erhöht die Cache-Hit-Ratio, indem CloudFlare angewiesen wird, zuerst auf seinen eigenen Servern nach nicht zwischengespeicherten Dateien zu suchen. Dies reduziert die Last auf Ihrem Back-End-Server noch weiter und gibt zusätzliche Ressourcen frei.

Empfehlung: Smart Cache Topology aktivieren