Verwenden Sie Webflow mit Cloudflare, um Ihr Webflow-Projekt zwischenzuspeichern und zu beschleunigen

Wichtiges Update

Der alte Ansatz unten ist veraltet. Der Proxy, das Zwischenspeichern und Optimieren Ihrer Bilder und andere Ressourcen wie CSS und JS Sie finden direkt in diesem Beitrag: Optimize Webflow with Cloudflare: Images, Assets and Caching im Jahr 2026.

Ursprünglicher Beitrag

Es gibt ein paar Probleme mit Wolkenflare and we begin that, they are to listen here and then approach, how man they repaired and some extended options, that they should be activate. But you let us first up a range of reasons, why we love Cloudflare.

• Stark verbesserte Sicherheitsoptionen.
• CNAME-Flattening, was bedeutet, dass Ihr Webflow-Projekt milkmoonstudio.com und nicht www.milkmoonstudio.com sein kann
• Tolles Caching in den Rechenzentren und im Edge-Netzwerk von Cloudflare, wir machen keine Witze, sie haben ein riesiges Netzwerk. 80% der Proxy-Sites verwenden Cloudflare, das sind 20% der Websites im Internet.
• Extended Browser Caching settings.
• Immer online und es speichert Versionen Ihrer Website Die Wayback-Maschine des Internetarchivs.
• Argo Intelligentes Routing, das nach dem Netzwerkknoten sucht, die möglicherweise ausgefallen sind, und optimiert das Routing des Netzwerkverkehrs, wodurch die Geschwindigkeit erhöht wird.
• Tolle Geschwindigkeitsoptimierung durch Minimierung, Komprimierung, Bildoptimierung usw..
• Bot-Schutz.
• Das Cloudflare-CDN mit 310 Städten in mehr als 120 Ländern, darunter China. Ich wiederhole nur das.
• Zaraz als Alternative zu Google Tagmanager, we have es ausprobiert und obwohl es nicht so einfach zu bedienen ist, if you are used the Tag Manager for extended trigger, it can it so very just do everything what you need, and yes, in our tests has a clear speed schub. They think an Tag Manager server site, without the server or the costs to need. We have a short post added to wie benutzt man Zaraz hier.
• Rules de page.

Wir könnten weiter und weiter machen, es gibt einfach so viele Funktionen, dass wir nicht alle auflisten (We have a short list of the recommended cloudflare-settings, complete on end of the beitrags).

Also, wenn das toll ist, warum dann so wenige Webflow-Benutzer Cloudflare verwenden, nun, hier kommen die Probleme ins Spiel. Wenn du das ansiehst the DNS setup instructions for Cloudflare on Webflow, Sie werden eine Sache auf Anhieb bemerken, Sie möchten, dass Sie den Cloudflare-Proxy deaktivieren (orange Wolke).

Das bedeutet, dass Cloudflare nur dein DNS verwaltet, genau wie Godaddy oder wer auch immer. Nicht großartig, Cloudflare hat das schnellste DNS auf dem Markt, aber das war, Sie werden die Leistungsverbesserungen nicht nutzen können.

When we can assessment, has to turn the problem „proxy disable“ with the extension of Webflow SSL certificate. Wenn Cloudflare den Inhalt als Proxy weiterleitet, stellt der Nutzer keine Verbindung zu ihrer ursprünglichen Website in Webflow her und der SSL-Verlängerungsmechanismus von Webflow funktioniert nicht mehr. Es kann auch sein, dass die Dinge einen Monat lang in Ordnung sind, und dann bekommen alle und ihre Mutter SSL-Fehler. There we have a fast and simple solution, we are focus on us. Wie sie auch sind, mit unserer Problemumgehung hatten wir seit Jahren keine Probleme mehr.

Ausgabe zwei, das Webflow-CDN. Webflow used AWS, to host its content, but how you can present, they are not provide a CDN for each on Webflow created project. Also teilt sich jeder einen Eimer. Wenn du deine Website inspizierst, wirst du feststellen, dass alles, was wichtig ist, von deinem CSS bis hin zu deinen Bildern und Videos, auf website-filesites oder assets.wesite-filesites (es gibt ein paar Domains, die herumschwirren) und nicht auf deiner Domain liegt, d. h. unsere Inhalte befinden sich nicht auf milkmoonstudio.com. Nicht wirklich ein Problem für den täglichen Gebrauch, aber wenn Sie Cloudflare verwenden, müssen Sie die Inhalte, die Cloudflare zur Optimierung benötigt, auf Ihrer Domain befinden. When we have an cloudflare-account for milkmoonstudio.com, but every image and each css file in a folder on website-al.com, Cloudflare can only optimizations and caching on your html files and other nothing. Also, wieder keine Optimierung.

Lass uns darüber sprechen, wie diese Probleme aus der Sicht eines Webflow-Designers und nicht eines Full-Stack-Entwicklers gelöst werden können.

Wichtiges Update

Before you overgo to following, used this method a Cloudflare-app to save all your assets on Cloudflare. The current version of the Cloudflare-apps is currently obsolete. Cloudflare hat angekündigt, dass sie durch ein neues App Experience ersetzt werden. In der Zwischenzeit können Sie einen Cloudflare Worker verwenden, um dieselben Ergebnisse zu erzielen. We have already an post, in this process is detailed described. Bitte beachte, dass es etwas Technisches ist, als nur eine App hinzuzufügen. We have created an Cloudflare Worker to optimize your images with the Cloudflare Image Resizer. Manche mögen sagen, dass das einfacher ist, und obwohl es noch fortgeschritten ist, können sie Den vollständigen Beitrag finden Sie hier. We are say that you may have less problems, when Rocket Loader with the order, are loaded in the scripts usw. Wie dem auch sei, follow this primary instructions to step of the app setup and then you for the rest to post image optimization worker. We are update this post, when the new Cloudflare Apps-experience is finished, so you can go the app way, if you want.

Webflow Cloudflare DNS-Einstellungen

You are required, two instructions to continue, the 2 A-entries and the CNAME-entry, the your Webflow is available, if you have ssl in your Webflow-Hosting-Tab in your project settings (the dingen have an little changed, since we have that, also there is now, there also is now also an txt-entry, you can use in Cloudflare), and the instructions, the proxying on Cloudflare switch (Deaktivierung des orangefarbenen Wolkensymbols)) gemäß den Anweisungen von Webflow. We are please, both to ignore.

Wenn Sie SSL einschalten, erhalten Sie Anweisungen, die ungefähr so aussehen:

Webflow-DNS-Einstellungen

Ignorier this!

Schritt 1: After use SSL instructions, switch SSL below on the Hosting tab. Clicken Sie auf Speichern.

Deaktiviere SSL

• Copy the new A-Record address and the CNAME-settings:

Save the Webflow-DNS settings without SSL

Save the non-SSL settings, activate you then again the SSL control box and save you. Sie werden sehen, dass die Einstellungen wieder auf die ursprüngliche SSL-Einstellungen zurückgesetzt werden. Take you not worry, ignore they easy.

(Sie könnten die Einstellungen ohne SSL verwenden, Cloudflare verarbeitet das SSL-Zertifikat und leitet alles ordnungsgemäß, aber eine Sache wird kaputt gehen, Ihre Datei verwendet sitemap.xml statt https, was Cloudflare immer noch korrekt umleitet, aber die Google Search Console wird sich beschweren).

Schalten Sie SSL also erneut ein, damit die Sitemap funktioniert und Sie keine Probleme haben.

• Gehe zu Cloudflare und füge die Nicht-SSL-DNS-Einstellungen hinzu. Es sollte ungefähr so aussehen:

Add Webflow-DNS settings to Cloudflare

• Setze sicher, dass die Einträge gegen die Anweisungen von Webflow Cloudflare Proxied aktiviert haben.
• Go in Cloudflare to tab SSL/TLS settings and activated complete:

Set SSL in Cloudflare on Full

• We want now delete the DNS settings, that your web flow settings are immediately. Gehen Sie zunächst zu https://1.1.1.1/purge-cache/, dann und nur für den Fall:https://cachecheck.opendns.com/ & https://developers.google.com/speed/public-dns/cache
• Give a your back domain on each this websites, delete the A entry and then the CNAME-entry. If you use a www-Subdomain we use, use also the complete domain, also www.milkmoonstudio.com, and delete you also the entries for this domain. Delete the txt-entry abschließend.
• Go to the great cleaning to the hosting tab from Webflow.

Ignoriere den Webflow-DNS-Fehler

Oh NEIN! - So viele Probleme, wenn Sie daran interessiert sind, ignoriere und veröffentlichte die Seite.

• Gehe zu deiner Live-Seite und überprüfe die SSL-Einstellungen, wenn du auf das Vorhängeschloss klickst:

Check the SSL certificate

Bum, alles gut.

We have also running Webflow via Cloudflare, as Proxy, but oh no, we have forget that content are stored on your domain must be stored, that cloudflare performance improvements can perform. Im Moment läuft alles über website-files.com

If you necessary more help by the facility of performance improvements, page rules etc., check you please show the how to video above in this post, to detailed to see how you can can, or gehe direkt zu YouTube.

Problem zwei: Lassen Sie die Webflow-CDN-Assets (Bilder usw.) über Ihre Domainnamen in Cloudflare laufen, sodass Sie alle raffinierten Cloudflare-Leistungsverbesserungen nutzen können

Es gibt also zwei Möglichkeiten, das betrifft: Wenn Sie wissen, was Sie tun, können Sie einen Cloudflare Worker schreiben, der das CDN von Webflow überwacht, den Inhalt abruft, ihn auf Cloudflare speichert und dann poliert und so weiter. Milk Moon Studio ist ein kleines Webflow-Studio und wie viele in der Webflow-Community konzentrieren wir uns gerne auf Design und haben uns für Webflow entschieden, weil es keinen Code oder zumindest einen Low-Code-Charakter hat, also entscheiden wir uns für Option zwei, jemanden lassen das für Sie erledigen. Zum Glück hat jemand das gemacht, und dann hat er eine Cloudflare-App entwickelt, die du einfach auf Cloudflare installieren und kostenlos nutzen kannst. She heisst Kassette von Network Chimp. Bitte beachten Sie, dass das aktuelle App-Erlebnis derzeit veraltet ist und durch ein neues App-Erlebnis ersetzt wird. In der Zwischenzeit können Sie auch unsere nutzen Cloudflare-Worker-Skript um ähnliche Ergebnisse zu erzielen. ‍

• Go to Apps-Tab in Cloudflare and search you after Cassette. This is free, while you use a Bucket, what we are, it is in order. It is this type:

Add the cassette app

• Apply the following settings in the app to:

Kassette in Cloudflare einrichten

1. Create a subdomain on your domain, in the cassette place the files of website-Files.com (or was also immer Webflow for your files used, check the page or open a image in a new tab, to check the url to review), give it just here, cassette you will please to allow, this to create, if you apply the settings. Setze sicher, dass die Subdomain nicht bereits existiert. Cassette must manage this bit.
2. Share the cassette with, wo Webflow die Dateien speichert.

Das war's, jedes Mal, wenn eine Seite auf Ihrer Website geladen wird, überprüft Cassette Webseite-Files.com and hold this files, if it find new on the subdomain. The reservation is there is that it can longer, but now, there are located files on your domain in the browser, you can use all of them created Cloudflare settings and -rules on the files. (Um den Zeitvorbehalt zurückzuziehen, falls Sie nach etwa einem Tag sehen, dass die Kassette einige Dateien nicht zwischenspeichert und optimiert hat, was Sie überprüfen können Doktor Flare Chrome-Plugin, das normalerweise daran liegt, dass Webflow einen SRC-Bildsatz mit optimierten Bildgrößen für verschiedene Viewport-Breites veröffentlicht. Manchmal fehlt bei der Kassette ein oder zwei Bilder im SRC-Set. Sie können dies in Webflow ausschalten oder etwas wie Cloudflare Image Resizing Embeds verwenden, um dies zu umgehen. More further below, alternative solution the Worker script method this problem, as the by us created Worker by individual images and src-image data sets).

We are not to all performance improvements and page rules, you can create in Cloudflare, make you easy fun. Eine Sache, die wir dir sagen, ist, dass, wenn du dich entscheidest, Regeln zu erstellen, deine Website stark zwischenspeichern, eine Seitenregel für deine sitemap.xml Datei erstellen, der Cache vollständig umgeht, also, wenn du zum Beispiel einen neuen Blogbeitrag erstellst, immer die neueste Version der Sitemap für Google da ist und nicht irgendeine Sitemap-Datei vor 3 Wochen geändert hat, wenn du einige starke Caching-Einstellungen hast. Du solltest die Sitemap-Seitenregel über die anderen Seitenregeln haben, da sie stark zwischengespeichert werden, wenn die Regeln nach unten übergehen. Das Gleiche gilt, wenn du einen RSS-Feed aktiviert hast. Change the cache on the feed url. Vollständiges Caching findet nur statt, wenn Sie Seitenregeln in Cloudflare einrichten, die Optimierungen in den Regeln anwenden und alles zwischenspeichern.

Wie gesagt, die Cassette App wird eine Weile benötigen, um alles auf deiner neuen Subdomain zwischenzuspeichern und es könnte hier und da eine Datei fehlen. Wir denken, du könntest die Dinge beschleunigen und alle Seiten ein paar Mal neu laden, wenn du willst (Wir haben diesen Beitrag am Ende der Seite aktualisiert, um sicherzustellen, dass die fehlenden Bilder auf Cloudflare zwischengespeichert werden. Wir warten einfach ein paar Tage und führen einen Lighthouse-Test durch, um die Geschwindigkeit der Website zu überprüfen.

Okay, 2 Sekunden später... we have an time machine built and 3 days always and we have an lighthouse test, and are back back in the time and have been loaded the test results:

Google Pagespeed-Ergebnisse nach der Kassetteneinrichtung

Sieht wirklich gut aus, warum 98 Prozent, nun, wir finden es ziemlich gut, aber ja, wir haben nachgesehen und es gibt einen falsch dimensionierten Bildfehler in Lighthouse, den wir zu beheben sind, nur um mit den Ergebnissen zu prahlen. Google-Suchkonsole werde dich lieben.

If you have questions, writing you please in the comments. Weitere Anleitungen findest du in diesen Beiträgen, and if you want to use and try to try, the dinge to faster, you could you can schau dir diesen Beitrag an.

Update — Kassette konnte die benötigte Subdomain nicht erstellen

Wenn du auf den oben genannten Fehler stößt, sagt die Kassette, dass sie die Subdomain nicht erstellen können, hast du die Kassette eingerichtet, folge einfach diesen Schritten oder sieh dir Video with instructions.

‍ Dieses Problem tritt jedoch nicht weiter auf, also belassen wir es hier nur zu Referenzzwecken.

1. If you receive the error, ignore you easy and create the subdomain manual.
2. Cassette fügt den Arbeiter immer noch hinzu. Sie werden den Worker nicht sehen und möglicherweise sehen Sie nicht einmal, dass die Cassetten-App installiert ist.
3. Gehe zu DNS und füge den CNAME für die Subdomain hinzu, die du in den Kassetteneinstellungen hattet.
4. In our fall is the CNAME assets.
5. The value for the CNAME is the webflow-CDN domain name from above, on the Webflow your content hosted.
6. In unserem Fall ist der Wert assets-global.website-dateien/
7. Stellen Sie sicher, dass Sie nur die nackten Domainnamen verwenden.
8. Das Kassettenproblem sollte jetzt behoben sein, obwohl Sie die App nicht sehen können. Bitte schau dir das Video für eine visuelle Anleitung an.

Aktualisieren — Cloudflare zwingt, fehlende Bilder zwischenzuspeichern

Ein letztes Update. When the use Doktor Flare and as we have seen some of the websites in detail, us is seen that images sometimes not are zwischenstored on Cloudflare and going still in the external WebFlow-CDN. Nachdem wir den Code überprüft hatten, stellen wir fest, dass dies daran liegt, dass Webflow ansprechende Bilder für ihr SRC-Set generiert hat. In this case were images for some breakpoints zwischenstored, other going to the Webflow-CDN. If they see and it want to moving, you can disable the reaktionsschnelle image generation for the schuldigen.

Alles was du tun musst ist:

1. Select the image on the Webflow-Leinwand
2. Typ Befehl + Schicht + O (on Mac) or Control + Schicht + O (unter Windows)
3. Offen Bedienfeld „Einstellungen“ > Bild-Einstellungen
4. Deactivate the Responsives Bild Ankreuzfeld

Schalte responsive Bilder in Webflow aus

Der Vorbehalt ist, dass Webflow keine responsiven Bilder mehr generiert. Sie könnten auch Cloudflares Image Resizing verwenden, um dies im Handumdrehen zu tun, oder eine Desktop- und Mobilversion der Assets auf einer Seite erstellen, wenn Cloudflare und Cassette die Bilder nicht zwischenspeichern und Sie eine wirklich kleine Version auf dem Handy haben möchten und die Meinung ist, dass die reagierende Version nicht zu groß oder schlecht getestet wird Google PageSpeed. Machen Sie sich keine Gedanken über die Bildgrößenänderung von Cloudflare, wenn Sie mit den Angeboten von Cassette, Seitenregeln und Optimierungen wie Polnisch zufrieden sind.

Use the Cloudflare image size change

This works, you must activate the image size change in Cloudflare on Speed-Tab. Bitte beachte, dass zusätzliche Kosten anfallen können. Je nachdem, was du gerade vertraust, kannst du die Größenänderung von Bildern in Origin ein- oder ausschalten. If it activated, you can change the size of the images and thing like the WebP and Avif convert directly from WebFlow-CDN. Lädt die URL hoch, ohne dass sie zuerst über Cloudflare ausführen müssen, wenn du die Kassette verwendest.

For the image size change can use an worker (difficult) or just use a embedded image in Webflow with the html embedded element. Du wirst die Bilder weiterhin im Designer im eingebetteten Element sehen und es bietet eine Reihe von Formatierungs- und Optimierungsoptionen für jedes Bild. Die URL-Struktur, die Sie verwenden müssen, sieht ungefähr so aus

‍

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

Mehr dazu und zu den Optionen hier und hier für ansprechende Bildformatierung.

Eine sehr schnelle Bildeinbettung für unser Hero-Bild könnte etwa so aussehen, wenn wir die Größenänderung von Origin aktiviert haben und unsere Webflow-Upload-URL vom 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">
Den Stift ansehen <a href="https://codepen.io/milkmoonstudio/pen/XWBopPm">
</a><a href="https://codepen.io/milkmoonstudio">Beispiel für die Größenänderung von Cloudflare-Bildern — Webflow Asset Manager-URL von Jakes van Eeden (@milkmoonstudio)</a>
auf <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">
Den Stift ansehen <a href="https://codepen.io/milkmoonstudio/pen/OJwrpMd">
</a><a href="https://codepen.io/milkmoonstudio">Beispiel für die Größenänderung von Cloudflare-Bildern — Webflow-CDN von Jakes van Eeden (@milkmoonstudio)</a>
auf <a href="https://codepen.io">CodePen</a>.
</iframe>

Oder so, wenn wir das CDN über die erstellte Subdomain Cassette 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">
Den Stift ansehen <a href="https://codepen.io/milkmoonstudio/pen/eYjbvvB">
</a><a href="https://codepen.io/milkmoonstudio">Beispiel für die Größenänderung von Cloudflare-Bildern — Kassetten-CDN auf Assets von Jakes van Eeden (@milkmoonstudio)</a>
auf <a href="https://codepen.io">CodePen</a>.
</iframe>

How efficient the last when create of avif files, depends by your page rules like cache settings and their rule order. Wenn du also alles zwischengespeichert hast und der letzte Schliff an dieser Subdomain gegeben wurde, vielleicht wurde schon ein WebP-Image erstellt und dieses wird wahrscheinlich nicht Aif verwenden, aber du kannst experimentieren.

Entschuldigung für die schreckliche Formatierung oben und die Vereinfachung der Dinge. The important part of size change is that the url structure in the integration with the domain, the they have in Cloudflare, following from /cdn-cgi/image/ Ihren Formatierungs- und Optimierungsoptionen/ and then the URL of the image. Play you easy think around and they also that not required is, if you are satisfied it, was cassette and polish option etc. to you.

Im Folgenden haben wir einige empfohlene Cloudflare-Einstellungen und -Regeln hinzugefügt. Bitte beachte, dass dies stark von Ihrer Website stammt und getestet werden sollte.

Weitere Beiträge zu Cloudflare finden Sie unter:

• Bringen Sie Ihr Webflow-Projekt mit Cloudflare auf den neuesten Stand: Ein tiefer Einblick in unser Bildoptimierungsskript
• Ave the performance your website with the Zaraz Tag Manager of Cloudflare: A schrittweise guide to implementation by Zaraz and to add of Google Analytics 4 to Webflow

Cloudflare-Recommendations

Geschwindigkeit > Optimierung

Polnisch: On

Improve the charge time of images, when you optimize the on the domain hosted images. Wenn WebP aktiviert ist, können Bildformate wie PNG und JPG in WebP konvertiert werden, wenn die Bildgröße gespeichert wird und Cloudflare die Unterstützung für WebP im Client-Browser erkennt.

Recommended setting: Loss behaftet by activated WebP, it is there is an quality loss. In this case should be enabled WebP loss free. Setze immer ein Häkchen bei WebP und bei höheren Tarifen mit AVIF kann das für größere Einsparungen genutzt werden.

Automatisches Verkleinern: Ein

Reduzier the file size of the quellcode on your website.

Recommended setting: Immer wieder verwendet JavaScript, CSS und HTML.

Brotli: Nein

Cloudflare wendet die Brotli-Komprimierung an, um die Ladezeiten Ihrer Besucher zu verkürzen. Cloudflare wählt die Brotli-Komprimierung als bevorzugte Methode zur Inhaltskodierung aus, wenn der Client mehrere Komprimierungsmethoden unterstützt. Wenn der Client nicht angibt, dass die Brotli-Komprimierung unterstützt wird, wird die GZIP-Komprimierung angewendet.

Empfohlene Einstellung: Immer an.

Frühe Hinweise: On

Cloudflares Edge speichert und sendet 103 Early Hints-Antworten mit Link-Headern von Ihren HTML-Seiten. Early Hints ermöglicht es Browsern, verknüpfte Inhalte vorab zu laden, bevor sie eine endgültige Antwort mit 200 OK oder eine andere endgültige Antwort vom Ursprung erhalten.

Empfohlene Einstellung: Immer an.

Verbesserte HTTP/2-Priorisierung: An

Optimiert die Reihenfolge der Ressourcenbereitstellung. Bei HTTP/2 folgt Cloudflare standardmäßig der vom Browser angeforderten Reihenfolge. Diese Reihenfolge variiert von Browser zu Browser, was zu einem erheblichen Leistungsunterschied führt. Wenn die erweiterte HTTP/2-Priorisierung aktiviert ist, werden die Ressourcen in der optimalen Reihenfolge bereitgestellt, um das schnellste Erlebnis in allen Browsern zu gewährleisten.

Empfohlene Einstellung: Immer an.

TCP-Turbo: Ein

Reduzieren Sie die Latenz und erhöhen Sie den Durchsatz mit individuell abgestimmten TCP-Optimierungen.

Empfohlene Einstellung: Sollte standardmäßig aktiviert sein, kann bei älteren Konten deaktiviert sein.

Mirage: Ein

Mirage passt das Laden von Bildern an die Netzwerkverbindung und den Gerätetyp an. Geräte mit kleinen Bildschirmen empfangen kleinere Bilder, und langsamere Verbindungen empfangen Bilder mit niedrigerer Auflösung. Ersetzt Bilder durch Platzhalterbilder mit niedriger Auflösung, die dieselben Abmessungen wie das Original haben (einschließlich Bilder von Drittanbietern). Sobald die Seite vollständig gerendert ist, werden Bilder mit voller Auflösung im Lazy-Loading-Modus geladen (wobei die Bilder im Browser-Ansichtsfenster priorisiert werden). Dieser Vorgang ermöglicht das schnelle Rendern von Seiten und minimiert den Reflow im Browser. Kombiniert mehrere einzelne Netzwerkanfragen für Bilder zu einer einzigen Anfrage. Bilder müssen zwar progressives Laden unterstützen, aber diese Einstellung ist ideal für Märkte mit Geräten der unteren Preisklasse und langsamen Mobilfunkverbindungen.

Empfohlene Einstellung: Immer an.

Raketenlader: AN

Abgesehen von der Bildoptimierung kann Rocket die größten Geschwindigkeitsgewinne bieten, aber die Website muss mit eingeschaltetem Rocket Loader getestet werden. Rocket Loader verbessert die Malzeiten für Seiten, die Javascript enthalten. Besucher werden ein besseres Erlebnis haben, wenn sie sehen, dass Inhalte schneller geladen werden, und Geschwindigkeit ist auch ein Faktor bei einigen Suchrankings. Rocket Loader verbessert die Ladezeiten, indem es Ihre Javascripts, einschließlich Skripten von Drittanbietern, asynchron lädt, sodass diese das Rendern des Inhalts Ihrer Seiten nicht blockieren. Probleme können auftreten, wenn Skripte früher benötigt werden und die Website daher getestet werden muss. Wenn es Probleme mit Rocket Loader gibt, kann man Seitenregeln oder Hinzufügen verwenden data-cfasync="falsch“ zu einem Script um das Script für Rocket Loader auszuschließen: <!-- fs-richtext-ignore --><Drehbuch data-cfasync="falsch“ src=“ /javascript.js „></script>

Empfohlene Einstellung: Immer aktiviert, es sei denn, es verursacht Probleme auf der Website. Versuche Problemskripte auszuschließen mit: data-cfasync="falsch“ oder Seitenregeln.

Automatische signierte Börsen (SXGs): An

Verbessern Sie die Leistung Ihrer Website, indem Sie zwischenspeicherbare Ressourcen auf den Signed Exchanges von Google verfügbar machen.

Empfohlene Einstellung: Immer an.

Prefetch-URLs: Ein

An, wenn Sie Enterprise haben.

Caching > Konfiguration

Caching-Ebene: Abfragezeichenfolge ignorieren

Legt fest, wie viel von den statischen Inhalten Ihrer Website Cloudflare zwischenspeichern soll. Die Abfragezeichenfolge ignorieren liefert dieselben Ressourcen unabhängig von der Abfragezeichenfolge. Die beste Option, um zu verhindern, dass die Site unterschiedliche Cache-Ressourcen für alle Abfragezeichenfolgen erstellt, die hinzugefügt werden könnten.‍

Empfohlene Einstellung: Ignoriere die Abfragezeichenfolge.

Es ist wichtig zu beachten, dass Cloudflare HTML-Inhalte nicht automatisch zwischenspeichert. Dies ist nur möglich, indem Seitenregeln erstellt werden. Seitenregeln bieten erstaunliche Anpassungsmöglichkeiten und Optionen, aber wir können diesbezüglich Empfehlungen aussprechen, da Browser Cache TTL und Edge Cache TTL von den Managern der Website festgelegt werden müssten. Eine statische „Über uns“ -Seite kann zum Beispiel sowohl im Browser als auch auf dem Edge sehr lange Cache-Zeiten haben, aber ein Blog-Feed wäre kürzer, abhängig von der Häufigkeit neuer Beiträge, und müsste über anderen Platzhalterregeln stehen, wenn der Regelsatz nach unten wechselt.

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

Legt fest, wie lange Cloudflare den Browser eines Besuchers anweist, Dateien zwischenzuspeichern. Kurze Zeiten wie ein Tag sind standardmäßig in Ordnung, da in den Seitenregeln strengere Caching-Regeln festgelegt sind, die dies außer Kraft setzen. Die Seitenregeln sollten, wie oben erwähnt, nach Aktualisierungshäufigkeit festgelegt und in Gruppen gruppiert werden. Platzhalter machen dies einfach. Achten Sie auf die Browser-TTL. Edge-Cache-TTL kann gelöscht werden, indem Sie den Cache in Cloudflare leeren. Browser-Cache-TTL bedeutet jedoch, dass der Seiteninhalt für diesen Zeitraum im Browser des Benutzers verbleibt und nach dem Zwischenspeichern nicht mehr gelöscht werden kann.

Empfohlene Einstellung: Ein Tag, um auf Nummer sicher zu gehen und dann in den Seitenregeln individuell zu gestalten.

Crawler-Tipps: An

Cloudflare benachrichtigt Suchmaschinen, wenn Änderungen auf der Website vorgenommen werden.

Immer online: An

Wenn die Origin Serves ausfallen, hält Cloudflare die Site mit Kopien von der Wayback Machine am Leben. Cloudflare bestimmt die Aktualisierungshäufigkeit auf der Wayback Machine.

Caching > Mehrstufiger Cache

Argo: Ein

Argo ist ein Dienst, der optimierte Routen über das Cloudflare-Netzwerk verwendet, um Ihren Nutzern schneller, zuverlässiger und sicherer Antworten zu liefern. Es fallen Nutzungskosten an.

Empfohlene Einstellung: Auf.

Caching > Mehrstufiger Cache

Tiered Cache: Kompliziert

Erhöhen Sie die Lebensdauer des Caches, indem Sie automatisch alle zwischenspeicherbaren Dateien in den persistenten Objektspeicher-Buckets von Cloudflare speichern.

Wenn ein Cache fehlt, überprüft Cloudflare zuerst diese Speicher-Buckets, bevor es zu Ihrem Ursprung geht. Die Nutzungskosten fallen auch hier an und funktionieren in Verbindung mit Argo. Es sollte also nur aktiviert werden, wenn Argo aktiviert ist.

Empfohlene Einstellung: An, wenn auf Enterprise, kann bei niedrigeren Tarifen schwer vollständig zu löschen sein. Enterprise kann den Cache vollständig leeren.

Netzwerk

HTTP/2: Ein

Beschleunigt Ihre Website mit HTTP/2

Empfohlene Einstellung: Auf.

HTTP/3 (mit QUIC): Ein

Beschleunigt HTTP-Anfragen mithilfe von QUIC, das im Vergleich zu TCP und TLS Verschlüsselungs- und Leistungsverbesserungen bietet.

Empfohlene Einstellung: Auf.

Wiederaufnahme der 0-RTT-Verbindung: EIN

Verbessert die Leistung für Kunden, die zuvor eine Verbindung zu Ihrer Website hergestellt haben. Bei der Wiederaufnahme der 0-RTT-Verbindung kann die erste Anfrage des Clients gesendet werden, bevor die TLS- oder QUIC-Verbindung vollständig hergestellt ist.

Empfohlene Einstellung: Auf.

gRPC: Ein

Erlauben Sie gRPC-Verbindungen zu Ihrem Ursprungsserver.

Empfohlene Einstellung: Auf. Wenn es nicht benötigt wird, hat es so oder so keinen Einfluss.

WebSockets: Ein

Erlauben Sie WebSockets-Verbindungen zu Ihrem Ursprungsserver. WebSockets sind offene Verbindungen, die zwischen dem Client und dem Ursprungsserver aufrechterhalten werden. Innerhalb einer WebSockets-Verbindung können der Client und der Ursprung Daten hin und her übertragen, ohne dass die Sitzungen erneut eingerichtet werden müssen

Empfohlene Einstellung: Auf.

Zwiebel-Routing

Onion Routing ermöglicht das Weiterleiten des Datenverkehrs von legitimen Benutzern im Tor-Netzwerk über die Onion-Dienste von Cloudflare und nicht über Exit-Knoten.

Empfohlene Einstellung: On, verbessert die Geschwindigkeit für Benutzer auf Tor.

Beispiel für die Reihenfolge der Seitenregeln

Die Seitenregeln sollten Folgendes enthalten: Die Edge-Cache-TTL und die Browser-Cache-TTL bestimmen, wie lange Inhalte auf dem Cloudflare Edge und im Browser des Benutzers gespeichert werden. Diese beiden sollten davon abhängen, wie oft der Inhalt einer Seite aktualisiert wird. Nehmen wir an, der größte Teil der Website ändert sich nie wirklich. Aber der Blog wird oft aktualisiert. Die Blog-Feed-Seite sollte dann eine kürzere Edge- und Browser-TTL haben und für den Rest kann eine Catchall-Platzhalterregel mit längeren Edge- und Browser-TTL-Caches verwendet werden. Seitenregeln kaskadieren nach unten. Wenn also die generische Regel für die Website, auf der sich der Inhalt nicht ändert, oft einen Platzhalter wie diesen enthält www.milkmoonstudio.com/und lange Cache-Lebenszeiten, in meinem Fall sollte es unter den Regeln mit kürzeren Cache-Lebenszeiten liegen www.milkmoonstudio.com/blog/. Der Blog ist dann die erste Regel und der Rest der Site die nächste Regel im Set. Der Platzhalter der zweiten Regel speichert den Blog ebenfalls im Cache, aber weil es eine andere Regel gibt, die sich auf die Blogseiten auswirkt, und diese befindet sich über der www.milkmoonstudio.com/ Seitenregel, sie überschreibt sie.

Page Rule Example

• Polish: Lossy
• Auto Minify: HTML, CSS and JS
• Raketenlader: AN
• Mirage: Ein
• Cache-Level: Alles zwischenspeichern (um auch HTML-Inhalte zwischenzuspeichern).
• Automatische HTTPS-Umschreibungen: Ein
• Opportunistische Verschlüsselung: Ein
• Browser Cache TTL: 1 Tag (Nehmen wir an, das ist für einen Blog-Feed, in dem es oft neue Inhalte gibt, wäre für statische Seiten länger)
• Edge Cache TTL: 1 Tag (Nehmen wir an, das ist für einen Blog-Feed, in dem es oft neue Inhalte gibt, wäre für statische Seiten länger)

‍