Webflow mit Cloudflare nutzen: Caching und mehr Tempo für dein Webflow-Projekt

Update, Oktober 2026: Seit ich diesen Beitrag geschrieben habe, hat sich einiges getan. Den neueren Ansatz findest du in Kostenlose Webflow-Bildoptimierung mit Cloudflare (2026): unser Open-Source-O2O-Worker. Der Rest dieses Beitrags bleibt als Dokumentation stehen, wie wir es damals gemacht haben.

Originalbeitrag

Mit Cloudflare gibt es ein paar Stolpersteine. Wir listen sie zuerst auf, zeigen dann, wie du sie behebst, und gehen auf einige weiterführende Optionen ein, die du wahrscheinlich aktivieren solltest. Aber zuerst legen wir los mit einer Reihe von Gründen, warum wir Cloudflare lieben.

• Stark verbesserte Sicherheitsoptionen.
• CNAME Flattening, sodass dein Webflow-Projekt unter milkmoonstudio.com laufen kann und nicht unter www.milkmoonstudio.com
• Hervorragendes Caching in den Rechenzentren und im Edge-Netzwerk von Cloudflare. Wir übertreiben nicht, das Netzwerk ist riesig. 80 % der Websites, die einen Proxy nutzen, setzen auf Cloudflare, und das sind 20 % aller Websites im Internet.
• Erweiterte Browser-Caching-Einstellungen.
• Always Online, das Versionen deiner Website in der Wayback Machine des Internet Archive speichert.
• Argo Smart Routing, das Netzwerkknoten aufspürt, die ausgefallen sein könnten, und den Netzwerkverkehr optimal umleitet, was zusätzlich Tempo bringt.
• Hervorragende Geschwindigkeitsoptimierung durch Minifizierung, Komprimierung, Bildoptimierung und vieles mehr.
• Bot-Schutz.
• Das Cloudflare-CDN mit 310 Städten in mehr als 120 Ländern, einschließlich China. Wir sagen es noch einmal, weil es so wichtig ist.
• Zaraz als Alternative zum Google Tag Manager. Wir haben es ausprobiert. Für komplexe Trigger ist es weniger komfortabel, wenn du den Tag Manager gewohnt bist, aber es kann so ziemlich alles, was du brauchst, und in unseren Tests gab es einen klaren Geschwindigkeitsschub. Stell dir Tag Manager Server-Side vor, ohne dass du einen Server oder die Kosten dafür brauchst. Wir haben einen kurzen Beitrag dazu geschrieben, wie du Zaraz mit Google Analytics 4 auf Webflow einsetzt.
• Page Rules.

Wir könnten ewig so weitermachen, es gibt so viele Funktionen, dass wir nicht alle aufzählen wollen (am Ende des Beitrags haben wir eine kurze Liste empfohlener Cloudflare-Einstellungen ergänzt). 

Wenn das alles so großartig ist, warum nutzen dann so wenige Webflow-Nutzer Cloudflare? Genau hier liegen die Probleme. Wirf einen Blick auf die DNS-Einrichtungsanleitung für Cloudflare auf Webflow, dann fällt dir sofort etwas auf: Sie wollen, dass du den Cloudflare Proxy (orange Wolke) deaktivierst. 

Das bedeutet, dass Cloudflare nur dein DNS verwaltet, genau wie GoDaddy oder irgendein anderer Anbieter. Nicht ideal. Cloudflare hat zwar das schnellste DNS überhaupt, aber das war es dann auch, denn von den Performance-Verbesserungen kannst du nichts nutzen. 

Soweit wir das beurteilen können, hat das Problem mit dem deaktivierten Proxy mit der Verlängerung des SSL-Zertifikats von Webflow zu tun. Wenn Cloudflare den Inhalt über einen Proxy ausliefert, verbindet sich der Nutzer nicht mit deiner Ursprungsseite bei Webflow, und der Verlängerungsmechanismus für das SSL-Zertifikat von Webflow funktioniert nicht mehr. Einen Monat lang läuft vielleicht alles gut, und dann bekommt plötzlich jeder SSL-Fehler zu sehen. Dafür haben wir eine schnelle und einfache Lösung, auf die wir noch kommen. Mit unserem Workaround hatten wir jedenfalls seit Jahren keine Probleme mehr.

Problem Nummer zwei: das Webflow-CDN. Webflow hostet seine Inhalte bei AWS, aber wie du dir denken kannst, richten sie nicht für jedes Webflow-Projekt ein eigenes CDN ein. Alle teilen sich also einen Bucket. Wenn du deine Website inspizierst, siehst du, dass alles Wichtige, von deinem CSS bis zu deinen Bildern und Videos, auf website-files.com oder assets.website-files.com liegt (es sind ein paar Domains im Umlauf) und nicht auf deiner Domain, d. h. unsere Assets liegen nicht auf milkmoonstudio.com. Im Alltag ist das kein großes Problem, aber wenn du Cloudflare nutzt, müssen die Inhalte, die Cloudflare optimieren soll, auf deiner Domain liegen. Wenn wir einen Cloudflare-Account für milkmoonstudio.com haben, aber jedes Bild und jede CSS-Datei in einem Ordner auf website-files.com liegt, kann Cloudflare Optimierungen und Caching nur auf deine HTML-Dateien anwenden und auf nichts sonst. Also wieder keine Optimierung.

Schauen wir uns an, wie du diese Probleme aus Sicht eines Webflow-Designers löst und nicht aus der eines Full-Stack-Entwicklers.

Wichtiges Update

Bevor du dich in die folgenden Schritte stürzt: Diese Methode nutzt eine Cloudflare App, um alle deine Assets auf Cloudflare zu cachen. Die aktuelle Version von Cloudflare Apps wird eingestellt. Cloudflare hat angekündigt, dass eine neue App-Erfahrung sie ersetzen wird. Bis dahin kannst du einen Cloudflare Worker verwenden, um dasselbe Ergebnis zu erreichen, und wir haben bereits einen Beitrag, der diesen Vorgang beschreibt. Bitte beachte, dass es etwas technischer ist, als einfach eine App hinzuzufügen.  Wir haben einen Cloudflare Worker erstellt, der deine Bilder mit dem Cloudflare Image Resizer optimiert. Manche würden sagen, das ist einfacher, und auch wenn es immer noch fortgeschritten ist, kannst du den vollständigen Beitrag hier finden. Vermutlich hast du damit weniger Probleme, falls du dich damit herumschlägst, dass Rocket Loader die Ladereihenfolge von Skripten durcheinanderbringt und Ähnliches. Folge dieser Anleitung jedenfalls vorerst bis zum Schritt App-Einrichtung und wechsle dann für den Rest zum Beitrag über den Bildoptimierungs-Worker. Wir aktualisieren diesen Beitrag, sobald die neue Cloudflare-Apps-Erfahrung bereit ist, damit du auch den App-Weg gehen kannst, wenn du möchtest.

DNS-Einstellungen für Webflow und Cloudflare

(Ein Hinweis aus dem Jahr 2026: Webflow hat sein Hosting inzwischen auf Cloudflare umgestellt und unterstützt die orange Wolke jetzt offiziell über Orange-to-Orange, kurz O2O, mit proxied CNAME-Einträgen, die auf cdn.webflow.com zeigen. Überspring diese DNS-Schritte bei einer Website heute also und folge stattdessen unserem Cloudflare-Guide 2026.)

Hier bekommst du zwei Sätze von Anweisungen: die 2 A-Records und den CNAME-Record, die Webflow dir gibt, sobald du SSL im Hosting-Tab deiner Projekteinstellungen aktiviert hast (seit wir das geschrieben haben, hat sich einiges geändert, sodass es jetzt auch einen TXT-Record gibt, den du unverändert in Cloudflare verwenden kannst), und die Anweisung, das Proxying in Cloudflare abzuschalten (das Symbol der orangen Wolke zu deaktivieren), so wie es in den Webflow-Anleitungen steht. Wir bitten dich, beides zu ignorieren.

Wenn du SSL aktivierst, bekommst du Anweisungen, die ungefähr so aussehen:

Webflow-DNS-Einstellungen

Ignoriere diese! 

Schritt 1: Nutze nicht die SSL-Anweisungen, sondern schalte SSL unten im Hosting-Tab aus. Klicke auf Save.

SSL deaktivieren

• Kopiere die neuen A-Record-Adressen und die CNAME-Einstellungen:

Die Webflow-DNS-Einstellungen ohne SSL speichern

Speichere die Einstellungen ohne SSL, schalte dann das SSL-Häkchen wieder ein und speichere. Du siehst, wie die Einstellungen wieder auf die ursprünglichen SSL-Einstellungen zurückspringen. Keine Sorge, ignoriere sie einfach. 

(Du könntest die Einstellungen ohne SSL auch aktiv lassen. Cloudflare kümmert sich um das SSL-Zertifikat und leitet alles korrekt um, aber eines geht dann kaputt: Deine sitemap.xml-Datei verwendet http statt https. Cloudflare leitet das zwar weiterhin korrekt um, aber die Google Search Console wird sich beschweren.) 

Schalte SSL also wieder ein, damit die Sitemap funktioniert, dann bekommst du keine Probleme.

• Geh zu Cloudflare und füge die DNS-Einstellungen ohne SSL hinzu. Das sollte ungefähr so aussehen:

Webflow-DNS-Einstellungen zu Cloudflare hinzufügen

• Achte darauf, dass bei den Einträgen Proxied eingeschaltet ist, entgegen den Cloudflare-Anweisungen von Webflow.
• Öffne den Tab SSL/TLS in Cloudflare und schalte Full ein:

SSL in Cloudflare auf Full stellen

• Jetzt wollen wir die DNS-Einstellungen leeren (purge), damit sich deine Webflow-Einstellungen sofort verbreiten. Geh zuerst auf https://1.1.1.1/purge-cache/, dann sicherheitshalber auf https://cachecheck.opendns.com/ & https://developers.google.com/speed/public-dns/cache (wir haben einen ganzen Beitrag dazu, wie du deinen DNS-Cache für Webflow leerst, schau ihn dir also an, wenn dir das neu ist).
• Gib auf jeder dieser Seiten deine Domain ohne Subdomain ein, leere den A-Record und dann den CNAME-Record. Wenn du wie wir eine www-Subdomain verwendest, nimm zusätzlich die vollständige Domain (also www.milkmoonstudio.com) und leere auch dafür die Einträge. Leere zum Schluss den TXT-Record.
• Öffne nach dem großen Leeren wieder den Hosting-Tab von Webflow.

Ignoriere die Webflow-DNS-Fehler

Oh NEIN! So viele Probleme. Wen kümmert es, ignoriere sie und veröffentliche die Website.

• Geh auf deine Live-Website und prüfe die SSL-Einstellungen, indem du auf das Schlosssymbol klickst:

Das SSL-Zertifikat prüfen

Bäm, alles bestens.

Damit läuft Webflow jetzt über Cloudflare, mit Proxy. Aber oh nein, wir haben vergessen, dass die Inhalte auf deiner Domain liegen müssen, damit Cloudflare Performance-Verbesserungen anwenden kann. Im Moment kommt alles über website-files.com.

Wenn du mehr Hilfe bei der Einrichtung von Performance-Verbesserungen, Page Rules usw. möchtest, sieh dir das Anleitungsvideo am Anfang dieses Beitrags an, um zu sehen, was du alles anwenden kannst, oder geh direkt zu YouTube.

Problem zwei: Die Assets des Webflow-CDN (Bilder usw.) über deine Domain in Cloudflare ausliefern, damit du alle praktischen Cloudflare-Performance-Verbesserungen nutzen kannst

Dafür gibt es zwei Wege. Wenn du dich auskennst, kannst du einen Cloudflare Worker schreiben, der das Webflow-CDN beobachtet, die Inhalte holt, sie auf Cloudflare speichert und sie dann aufpoliert und so weiter. Milk Moon Studio ist ein kleines Webflow-Studio und konzentriert sich, wie viele in der Webflow-Community, lieber auf Design. Wir haben uns für Webflow wegen seines No-Code-, oder zumindest Low-Code-Ansatzes entschieden. Deshalb nehmen wir Option zwei: sich das von jemand anderem abnehmen lassen. Zum Glück hat das jemand getan und daraus eine Cloudflare App gebaut, die du einfach in Cloudflare installieren und kostenlos nutzen kannst. Sie heißt Cassette von Network Chimp. Bitte beachte, dass die aktuelle App-Erfahrung gerade eingestellt wird und durch eine neue App-Erfahrung ersetzt werden soll. Bis dahin kannst du auch unser Cloudflare-Worker-Skript nutzen, um ähnliche Ergebnisse zu erzielen.‍

• Öffne in Cloudflare den Tab Apps und suche nach Cassette. Sie ist kostenlos, solange du einen Bucket verwendest, und genau das tun wir, also passt das. Es ist diese hier:

Die Cassette App hinzufügen

• Wende in der App die folgenden Einstellungen an:

Cassette in Cloudflare einrichten

1. Lege auf deiner Domain eine Subdomain an, in die Cassette die Dateien von Website-Files.com legen soll (oder von dem, was Webflow für deine Dateien verwendet; inspiziere einfach die Seite oder öffne ein Bild in einem neuen Tab, um die URL zu prüfen). Tippe sie hier einfach ein, und Cassette fragt um Erlaubnis, sie anzulegen, wenn du die Einstellungen anwendest. Achte darauf, dass die Subdomain noch nicht existiert. Cassette muss diesen Teil verwalten.
2. Sag Cassette, wo Webflow die Dateien speichert.

Das war es schon. Jedes Mal, wenn eine Seite deiner Website geladen wird, prüft Cassette website-files.com und behält neue Dateien, falls es welche findet, auf der Subdomain. Der Haken dabei: Es kann etwas dauern. Da die Dateien, die der Browser lädt, jetzt aber auf deiner Domain liegen, kannst du alle Cloudflare-Einstellungen und -Regeln, die du erstellst, auf diese Dateien anwenden. (Zurück zum Haken mit der Zeit: Wenn du nach etwa einem Tag siehst, dass Cassette einige Dateien nicht cacht und optimiert, was du mit dem Chrome-Plugin Dr.Flare prüfen kannst, liegt das meist daran, dass Webflow ein src-Bildset mit optimierten Bildgrößen für verschiedene Viewport-Breiten veröffentlicht. Manchmal übersieht Cassette ein oder zwei Bilder im src-Set. Du kannst das in Webflow ausschalten oder etwas wie Cloudflare-Image-Resizing-Embeds nutzen, um es zu umgehen. Mehr dazu weiter unten. Alternativ löst die Worker-Skript-Methode das Problem, denn der von uns erstellte Worker erkennt sowohl einzelne Bilder als auch src-Bildsets.)

Wir gehen hier nicht auf alle Performance-Verbesserungen und Page Rules ein, die du in Cloudflare erstellen kannst. Probier dich aus. Eines möchten wir aber sagen: Wenn du Regeln erstellst, die deine Website stark cachen, lege eine Page Rule für deine sitemap.xml-Datei an, die den Cache komplett umgeht. So ist, wenn du zum Beispiel einen neuen Blogbeitrag veröffentlichst, immer die aktuelle Version der Sitemap für Google da und nicht eine veraltete Sitemap von vor 3 Wochen, falls du starke Caching-Einstellungen hast. Die Sitemap-Regel muss über den anderen Page Rules mit starkem Caching stehen, da die Regeln von oben nach unten abgearbeitet werden. Dasselbe gilt, wenn du einen RSS-Feed aktiviert hast: Umgehe den Cache für die Feed-URL. Volles Caching passiert nur, wenn du Page Rules in Cloudflare einrichtest, die Optimierungen in den Regeln anwendest und Cache Everything auswählst. (Cloudflare hat Page Rules inzwischen zugunsten von Cache Rules eingestellt, daher würdest du diese heute als Cache Rules aufbauen. Achtung: Eine Cache Rule mit Eligible for cache schaltet Cache Everything standardmäßig ein.)

Wie gesagt, die Cassette App braucht eine Weile, um alles auf deiner neuen Subdomain zu cachen, und übersieht hier und da vielleicht eine Datei. Du könntest die Sache beschleunigen und alle Seiten mehrmals neu laden, wenn du magst (wir haben diesen Beitrag am Ende der Seite ergänzt, damit du sicherstellen kannst, dass übersehene Bilder auf Cloudflare gecacht werden). Wir warten einfach ein paar Tage und führen dann einen Lighthouse-Test durch, um die Geschwindigkeit der Website zu prüfen.

Okay, 2 Sekunden später ... wir haben eine Zeitmaschine gebaut und 3 Tage gewartet, einen Lighthouse-Test durchgeführt, sind zurückgereist und haben die Testergebnisse hochgeladen:

Google-PageSpeed-Werte nach der Cassette-Einrichtung

Sieht richtig gut aus. Warum 98 Prozent? Nun, wir finden das ziemlich gut, aber ja, Lighthouse zeigt einen Fehler wegen falsch dimensionierter Bilder, den wir zu faul waren zu beheben, nur um mit den Ergebnissen anzugeben. Die Google Search Console wird dich lieben.

Wenn du Fragen hast, schreib sie gern in die Kommentare. Weitere Anleitungen findest du in diesen Beiträgen, und wenn du den Tag Manager nutzt und noch etwas mehr Tempo herausholen willst, wirf einen Blick auf unseren Beitrag über verzögerte Trigger im Tag Manager. Und wenn du einen Kunden (oder deinen Chef) davon überzeugen musst, dass sich der Aufwand lohnt, haben wir darüber geschrieben, wie die Ladegeschwindigkeit den Geschäftserfolg antreibt.

Update: Cassette kann die erforderliche Subdomain nicht anlegen

Wenn der oben erwähnte Fehler auftritt, bei dem Cassette meldet, dass es die in Cassette festgelegte Subdomain nicht anlegen kann, befolge einfach diese Schritte oder sieh dir das Anleitungsvideo an.

‍Dieses Problem tritt allerdings nicht mehr auf, wir lassen es nur als Referenz hier stehen.

1. Wenn der Fehler auftritt, ignoriere ihn einfach und lege die Subdomain manuell an.
2. Cassette fügt den Worker trotzdem hinzu. Du siehst den Worker nicht und vielleicht nicht einmal die installierte Cassette App.
3. Geh zu DNS und füge den CNAME für die Subdomain hinzu, die du in den Cassette-Einstellungen hattest.
4. In unserem Fall lautet der CNAME assets.
5. Der Wert des CNAME ist der Domainname des Webflow-CDN von oben, wo Webflow deine Inhalte hostet.
6. In unserem Fall lautet der Wert assets-global.website-files.com
7. Achte darauf, nur den reinen Domainnamen zu verwenden.
8. Das Cassette-Problem sollte jetzt behoben sein, auch wenn du die App nicht siehst. Eine visuelle Anleitung findest du im Video.

Update: Cloudflare zwingen, übersehene Bilder zu cachen

Ein letztes Update. Beim Arbeiten mit Dr.Flare und beim genauen Durchgehen einiger Websites ist uns aufgefallen, dass Bilder manchmal nicht auf Cloudflare gecacht werden und weiterhin vom externen Webflow-CDN kommen. Nach der Prüfung des Codes haben wir festgestellt, dass Webflow dafür verantwortlich ist, weil es responsive Bilder für sein src-Set erzeugt. In diesem Fall wurden Bilder für manche Breakpoints gecacht und andere kamen vom Webflow-CDN. Wenn du das siehst und umgehen willst, kannst du die Erzeugung responsiver Bilder für das betroffene Bild einfach deaktivieren.

Dazu musst du nur Folgendes tun:

1. Wähle das Bild auf dem Webflow-Canvas aus
2. Drücke Command + Shift + O (auf dem Mac) oder Control + Shift + O (unter Windows)
3. Öffne das Settings panel > Image settings
4. Entferne das Häkchen bei Responsive image (Webflow hat das inzwischen geändert: Du setzt jetzt stattdessen in den Image settings das Häkchen bei Disable responsiveness)

Responsive Bilder in Webflow ausschalten

Der Haken dabei: Webflow erzeugt dann keine responsiven Bilder mehr. Du könntest also Cloudflare Image Resizing nutzen, um das spontan zu erledigen, oder für eine Seite eine Desktop- und eine Mobilversion der Assets erstellen, falls Cloudflare und Cassette die Bilder nicht cachen und du auf dem Handy ein wirklich kleines Bild willst oder die nicht responsive Version dir zu groß ist oder bei Google PageSpeed schlecht abschneidet. Mach dir über Cloudflare Image Resizing keine Gedanken, wenn dir reicht, was Cassette, Page Rules und Optimierungen wie Polish bieten.

Cloudflare Image Resizing nutzen

Damit das funktioniert, musst du Image Resizing im Tab Speed in Cloudflare aktivieren (Cloudflare hat es inzwischen in Image Transformations umbenannt, und du findest es jetzt im Dashboard unter Images). Bitte beachte, dass zusätzliche Kosten anfallen können. Je nach Vorhaben kannst du Image Resizing von Origin ein- oder ausschalten. Ist es eingeschaltet, kannst du Bilder direkt über die Upload-URL des Webflow-CDN in der Größe ändern und Dinge wie WebP- und AVIF-Konvertierung anwenden, ohne sie vorher mit Cassette über Cloudflare laufen zu lassen.

Für Image Resizing kannst du einen Worker schreiben (schwieriger) oder einfach ein eingebettetes Bild in Webflow mit dem HTML-Embed-Element verwenden. Du siehst die Bilder im Designer weiterhin im eingebetteten Element, und es erlaubt zahlreiche Format- und Optimierungsoptionen für jedes Bild. Die URL-Struktur, die du verwenden musst, sieht ungefähr so aus:

‍

<!-- fs-richtext-ignore -->https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>

Mehr dazu und zu den Optionen findest du in Cloudflares Dokumentation zum URL-Format und in ihrem Guide zu responsiven Bildern für die Formatierung responsiver Bilder.

Ein sehr grobes Embed für ein responsives Bild könnte für unser Titelbild ungefähr so aussehen, wenn wir Resize from Origin eingeschaltet haben und unsere Webflow-Upload-URL aus dem Asset Manager verwenden:

<iframe height="300" style="width: 100%;" scrolling="no" title="Cloudflare Image Resizing Example - Webflow Asset Manager URL" src="https://codepen.io/milkmoonstudio/embed/XWBopPm?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/XWBopPm">
Cloudflare Image Resizing Example - Webflow Asset Manager URL</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

Oder so, wenn ich unsere Webflow-CDN-URL verwende:

<iframe height="300" style="width: 100%;" scrolling="no" title="Cloudflare Image Resizing Example - Webflow CDN " src="https://codepen.io/milkmoonstudio/embed/OJwrpMd?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/OJwrpMd">
Cloudflare Image Resizing Example - Webflow CDN </a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

Oder so, wenn wir das CDN über die von Cassette angelegte Subdomain verwenden:

‍<iframe height="300" style="width: 100%;" scrolling="no" title="Cloudflare Image Resizing Example - Cassette CDN on Assets" src="https://codepen.io/milkmoonstudio/embed/eYjbvvB?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/eYjbvvB">
Cloudflare Image Resizing Example - Cassette CDN on Assets</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

Wie effektiv das letzte Beispiel beim Erzeugen von AVIF-Dateien ist, hängt von deinen Page Rules, den Caching-Einstellungen und der Reihenfolge der Regeln ab. Wenn du also Cache Everything und Polish für diese Subdomain aktiviert hast, wurde vielleicht schon ein WebP-Bild erzeugt und es wird wahrscheinlich kein AVIF verwendet, aber du kannst experimentieren.

Entschuldige die schreckliche Formatierung oben und die starke Vereinfachung. Das Wichtigste beim Resizing ist, dass die URL-Struktur im Embed mit der Domain beginnt, die du in Cloudflare hast, gefolgt von /cdn-cgi/image/, dann deinen Format- und Optimierungsoptionen, dann einem / und schließlich der URL des Bildes. Probier einfach herum und denk daran, dass du das nicht brauchst, wenn du mit dem zufrieden bist, was Cassette und die Option Polish usw. für dich tun.

Unten haben wir einige empfohlene Cloudflare-Einstellungen und -Regeln ergänzt. Bitte beachte, dass das stark von deiner Website abhängt und getestet werden sollte.

Weitere Beiträge zu Cloudflare findest du hier:

• Kostenlose Webflow-Bildoptimierung mit Cloudflare (2026): unser Open-Source-O2O-Worker (der aktuelle Weg, all das umzusetzen)
• Supercharge dein Webflow-Projekt mit Cloudflare: unser Worker-Skript zur Bildoptimierung
• Mehr Website-Performance mit dem Cloudflare-Tag-Manager Zaraz: Schritt für Schritt Zaraz einrichten und Google Analytics 4 auf Webflow hinzufügen

Cloudflare-Empfehlungen

(Ein Hinweis aus dem Jahr 2026: Cloudflare hat einige dieser Einstellungen inzwischen eingestellt, seit wir diese Liste geschrieben haben. Auto Minify wurde im August 2024 eingestellt, Mirage im September 2025, und Page Rules wurden zugunsten von Cache Rules eingestellt. Der Rest ist so, wie wir ihn geschrieben haben.)

Speed > Optimisation

Polish: On

Verbessere die Ladezeit von Bildern, indem du auf der Domain gehostete Bilder optimierst. Mit aktiviertem WebP kann Cloudflare Bildformate wie PNG und JPG in WebP umwandeln, wenn dadurch Bildgröße gespart wird und Cloudflare erkennt, dass der Browser des Nutzers WebP unterstützt.

Empfohlene Einstellung: Lossy mit aktiviertem WebP, es sei denn, die Qualität leidet, dann Lossless mit aktiviertem WebP. WebP immer anhaken, und bei höheren Tarifen mit AVIF kann AVIF für noch größere Einsparungen angewendet werden.

Auto Minify: On

Verringere die Dateigröße des Quellcodes deiner Website.

Empfohlene Einstellung: Immer JavaScript, CSS und HTML angehakt.

Brotli: On

Cloudflare wendet Brotli-Komprimierung an, um die Ladezeiten für deine Besucher zu verkürzen. Cloudflare wählt Brotli als bevorzugte Inhaltskodierung, wenn der Client mehrere Komprimierungsmethoden unterstützt. Wenn der Client nicht angibt, dass er Brotli unterstützt, wird gzip-Komprimierung angewendet.

Empfohlene Einstellung: Immer an.

(Ein Hinweis aus dem Jahr 2026: Es gibt keinen Ein-/Aus-Schalter für Brotli mehr. Cloudflare wählt die Komprimierung jetzt nach Tarif, mit Zstandard bei Free, Brotli bei Pro und Business und Gzip bei Enterprise, und du änderst sie mit Compression Rules.)

Early Hints: On

Der Edge von Cloudflare cacht und sendet 103-Early-Hints-Antworten mit Link-Headern deiner HTML-Seiten. Early Hints erlaubt es Browsern, verlinkte Assets vorab zu laden, bevor sie eine Antwort mit 200 OK oder eine andere finale Antwort vom Ursprungsserver sehen.

Empfohlene Einstellung: Immer an.

Enhanced HTTP/2 Prioritization: On

Optimiert die Reihenfolge der Ressourcenauslieferung. Bei HTTP/2 folgt Cloudflare standardmäßig der vom Browser angefragten Reihenfolge. Diese Reihenfolge unterscheidet sich von Browser zu Browser, was zu deutlichen Leistungsunterschieden führt. Mit aktivierter Enhanced HTTP/2 Prioritization werden Ressourcen in der optimalen Reihenfolge ausgeliefert, für das schnellste Erlebnis in allen Browsern.

Empfohlene Einstellung: Immer an.

TCP Turbo: On

Verringere die Latenz und erhöhe den Durchsatz mit individuell abgestimmten TCP-Optimierungen.

Empfohlene Einstellung: Sollte standardmäßig an sein, bei älteren Accounts eventuell aus.

Mirage: On

Mirage passt das Laden von Bildern an die Netzwerkverbindung und den Gerätetyp an. Geräte mit kleinen Bildschirmen erhalten kleinere Bilder, und langsamere Verbindungen erhalten Bilder mit geringerer Auflösung. Ersetzt Bilder durch niedrig aufgelöste Platzhalterbilder mit denselben Abmessungen wie das Original (einschließlich Bildern von Drittanbietern). Sobald die Seite vollständig gerendert ist, werden die Bilder in voller Auflösung per Lazy Loading nachgeladen (Bilder im Sichtfeld des Browsers haben Vorrang). So werden Seiten schnell gerendert, und Reflows im Browser werden minimiert. Fasst mehrere einzelne Netzwerkanfragen für Bilder zu einer einzigen zusammen. Die Bilder müssen progressives Laden unterstützen, aber diese Einstellung ist ideal in Märkten mit Geräten der unteren Preisklasse und langsamen mobilen Verbindungen.

Empfohlene Einstellung: Immer an.

Rocket Loader: On

Neben der Bildoptimierung kann Rocket Loader die größten Geschwindigkeitsgewinne bringen, aber die Website muss mit eingeschaltetem Rocket Loader getestet werden. Rocket Loader verbessert die Paint-Zeiten für Seiten mit JavaScript. Besucher erleben, wie Inhalte schneller laden, und Geschwindigkeit ist auch bei manchen Suchrankings ein Faktor. Rocket Loader verbessert die Paint-Zeiten, indem er dein JavaScript, einschließlich Skripten von Drittanbietern, asynchron lädt, sodass es das Rendern der Inhalte deiner Seiten nicht blockiert. Probleme können auftreten, wenn Skripte früher gebraucht werden, daher muss die Website getestet werden. Wenn es Probleme mit Rocket Loader gibt, kannst du Page Rules verwenden oder data-cfasync="false" zu einem Skript hinzufügen, um das Skript von Rocket Loader auszuschließen: <!-- fs-richtext-ignore --><script data-cfasync="false" src="/javascript.js"></script>

Empfohlene Einstellung: Immer an, außer es verursacht Probleme auf der Website. Versuche, problematische Skripte mit data-cfasync="false" oder Page Rules auszuschließen.

Automatic Signed Exchanges (SXGs): On

Verbessere die Performance deiner Website, indem du cachebare Ressourcen über Google Signed Exchanges bereitstellst.

Empfohlene Einstellung: Immer an.

Prefetch URLs: On

An, wenn du Enterprise hast.

Caching > Configuration

Caching Level: Ignore Query String

Legt fest, wie viel des statischen Inhalts deiner Website Cloudflare cachen soll. Ignore Query String liefert dieselben Ressourcen unabhängig vom Query String aus. Die beste Option, damit die Website nicht für jeden Query String, der angehängt werden könnte, eigene Cache-Ressourcen erzeugt.‍

Empfohlene Einstellung: Ignore Query String.

Wichtig: Cloudflare cacht HTML-Inhalte nicht automatisch. Das geht nur über Page Rules (heute Cache Rules). Page Rules bieten hervorragende Anpassungsmöglichkeiten und Optionen, aber wir können hier keine Empfehlung aussprechen, denn Browser Cache TTL und Edge Cache TTL müssen von den Verantwortlichen der Website festgelegt werden. Eine statische Über-uns-Seite kann zum Beispiel sehr lange Cache-Zeiten sowohl im Browser als auch am Edge haben, ein Blog-Feed dagegen kürzere, je nachdem, wie oft neue Beiträge erscheinen, und er müsste über anderen Wildcard-Regeln stehen, da das Regelwerk von oben nach unten abgearbeitet wird.

Browser Cache TTL: nicht länger als einen Tag.

Legt fest, wie lange Cloudflare den Browser eines Besuchers anweist, Dateien zu cachen. Kurze Zeiten wie ein Tag sind als Standard in Ordnung, mit strengeren Caching-Regeln in den Page Rules, die dies überschreiben. Die Page Rules sollten nach Aktualisierungshäufigkeit festgelegt und in Gruppen zusammengefasst werden, wie oben erwähnt. Wildcards machen das einfach. Achte auf die Browser TTL. Die Edge Cache TTL lässt sich durch das Leeren des Caches in Cloudflare zurücksetzen, aber die Browser Cache TTL bedeutet, dass der Seiteninhalt für diesen Zeitraum im Browser des Nutzers bleibt und nach dem Cachen nicht mehr gelöscht werden kann.

Empfohlene Einstellung: Ein Tag, um auf der sicheren Seite zu sein, und dann in den Page Rules individuell anpassen.

Crawler Hints: On

Cloudflare benachrichtigt Suchmaschinen, wenn sich etwas auf der Website ändert.

Always Online: On

Wenn der Ursprungsserver ausfällt, hält Cloudflare die Website mit Kopien aus der Wayback Machine am Leben. Cloudflare bestimmt die Aktualisierungshäufigkeit in der Wayback Machine.

Caching > Tiered Cache

Argo: On

Argo ist ein Dienst, der optimierte Routen durch das Cloudflare-Netzwerk nutzt, um Antworten schneller, zuverlässiger und sicherer an deine Nutzer auszuliefern. Es fallen Nutzungskosten an.

Empfohlene Einstellung: On.

Caching > Tiered Cache

Cache Reserve: es ist kompliziert

Verlängere die Cache-Laufzeiten, indem alle cachebaren Dateien automatisch in den persistenten Objektspeicher-Buckets von Cloudflare abgelegt werden.

Bei einem Cache-Miss prüft Cloudflare zuerst diese Speicher-Buckets, bevor es zu deinem Ursprungsserver geht. Auch hier fallen Nutzungskosten an, und es funktioniert zusammen mit Argo, sollte also nur eingeschaltet werden, wenn Argo aktiviert ist.

(Ein Hinweis aus dem Jahr 2026: Laut der Cloudflare-Dokumentation ist Cache Reserve inzwischen für die Verwendung mit Tiered Cache gedacht, nicht mit Argo, ignoriere also den Argo-Teil oben. Es hat heute außerdem eine eigene Seite unter Caching.)

Empfohlene Einstellung: On bei Enterprise, in niedrigeren Tarifen kann es schwer sein, es vollständig zu leeren. Enterprise kann den Cache vollständig leeren.

Network

HTTP/2: On

Beschleunigt deine Website mit HTTP/2.

Empfohlene Einstellung: On.

HTTP/3 (mit QUIC): On

Beschleunigt HTTP-Anfragen mit QUIC, das im Vergleich zu TCP und TLS Verschlüsselung und Leistungsverbesserungen bietet.

Empfohlene Einstellung: On.

0-RTT Connection Resumption: On

Verbessert die Leistung für Clients, die sich schon einmal mit deiner Website verbunden haben. 0-RTT Connection Resumption erlaubt es, die erste Anfrage des Clients zu senden, bevor die TLS- oder QUIC-Verbindung vollständig aufgebaut ist.

Empfohlene Einstellung: On.

gRPC: On

Erlaubt gRPC-Verbindungen zu deinem Ursprungsserver.

Empfohlene Einstellung: On. Wenn du es nicht brauchst, hat es so oder so keine Auswirkungen.

WebSockets: On

Erlaubt WebSockets-Verbindungen zu deinem Ursprungsserver. WebSockets sind offene Verbindungen, die zwischen dem Client und dem Ursprungsserver aufrechterhalten werden. Innerhalb einer WebSockets-Verbindung können Client und Ursprungsserver Daten hin- und herschicken, ohne Sitzungen neu aufbauen zu müssen.

Empfohlene Einstellung: On.

Onion Routing

Onion Routing ermöglicht es, den Datenverkehr legitimer Nutzer im Tor-Netzwerk über die Onion-Dienste von Cloudflare statt über Exit-Nodes zu leiten.

Empfohlene Einstellung: On, verbessert die Geschwindigkeit für Nutzer im Tor-Netzwerk.

Beispiel für die Reihenfolge der Page Rules

Page Rules sollten Folgendes enthalten: Die Edge Cache TTL und die Browser Cache TTL bestimmen, wie lange Inhalte am Cloudflare Edge und im Browser des Nutzers gespeichert werden. Beide sollten sich danach richten, wie oft sich der Inhalt einer Seite ändert. Nehmen wir an, der größte Teil der Website ändert sich nie, aber der Blog wird oft aktualisiert. Dann sollte die Blog-Feed-Seite eine kürzere Edge- und Browser-TTL bekommen, und der Rest kann eine Catch-all-Wildcard-Regel mit längeren Edge- und Browser-TTL-Caches haben. Page Rules werden von oben nach unten abgearbeitet. Wenn also die generische Regel für die Website, deren Inhalt sich nicht oft ändert, eine Wildcard wie www.milkmoonstudio.com/ hat und lange Cache-Laufzeiten, sollte sie unter Regeln mit kürzeren Cache-Laufzeiten stehen, in meinem Fall www.milkmoonstudio.com/blog/. Der Blog ist dann die erste Regel und der Rest der Website die nächste Regel im Set. Die Wildcard der zweiten Regel cacht auch den Blog, aber weil es eine andere Regel für die Blogseiten gibt und sie über der Page Rule für www.milkmoonstudio.com/  steht, überschreibt sie diese.

Beispiel für eine Page Rule

• Polish: Lossy
• Auto Minify: HTML, CSS und JS
• Rocket Loader: On
• Mirage: On
• Cache Level: Cache Everything (um auch HTML-Inhalte zu cachen).
• Automatic HTTPS Rewrites: On
• Opportunistic Encryption: On
• Browser Cache TTL: 1 Tag (Nehmen wir an, das gilt für einen Blog-Feed mit häufig neuen Inhalten, bei statischen Seiten wäre es länger)
• Edge Cache TTL: 1 Tag (Nehmen wir an, das gilt für einen Blog-Feed mit häufig neuen Inhalten, bei statischen Seiten wäre es länger)

‍