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

Es gibt ein paar Probleme mit Wolkenflare und wir beginnen damit, sie hier aufzulisten und dann darauf einzugehen, wie man sie repariert und einige erweiterte Optionen, die Sie wahrscheinlich aktivieren sollten. Aber lassen Sie uns zunächst eine Reihe von Gründen auflisten, warum wir Cloudflare lieben.

• 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.
• Erweiterte Browser-Caching-Einstellungen.
• Immer online und es speichert Versionen Ihrer Website auf Die Wayback-Maschine des Internetarchivs.
• Argo Intelligentes Routing, das nach 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 diesen.
• Zaraz als Alternative zu Google Tagmanager, wir haben es ausprobiert und obwohl es nicht so einfach zu bedienen ist, wenn Sie den Tag Manager für erweiterte Trigger gewohnt sind, kann er so ziemlich alles tun, was Sie brauchen, und ja, in unseren Tests gab es einen deutlichen Geschwindigkeitsschub. Denken Sie an Tag Manager serverseitig, ohne den Server oder die Kosten dafür zu benötigen. Wir haben einen kurzen Beitrag hinzugefügt zu wie benutzt man Zaraz hier.
• Seitenregeln.

Wir könnten weiter und weiter machen, es gibt einfach so viele Funktionen, dass wir sie nicht alle auflisten werden (Wir haben eine kurze Liste der empfohlenen Cloudflare-Einstellungen ganz am Ende des Beitrags hinzugefügt).

Also, wenn das so toll ist, warum verwenden dann so wenige Webflow-Benutzer Cloudflare, nun, hier kommen die Probleme ins Spiel. Wenn du dir das ansiehst die DNS-Setup-Anweisungen für Cloudflare auf Webflow, Sie werden eine Sache auf Anhieb bemerken, sie wollen, dass du den Cloudflare-Proxy deaktivierst (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's, Sie werden keine der Leistungsverbesserungen nutzen können.

Soweit wir das beurteilen können, hat das Problem „Proxy deaktivieren“ mit der Verlängerung des SSL-Zertifikats von Webflow zu tun. 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 also sein, dass die Dinge einen Monat lang in Ordnung sind, und dann bekommen alle und ihre Mutter SSL-Fehler. Dafür haben wir eine schnelle und einfache Lösung, auf die wir uns konzentrieren werden. Wie dem auch sei, mit unserer Problemumgehung hatten wir seit Jahren keine Probleme mehr.

Ausgabe zwei, das Webflow-CDN. Webflow verwendet AWS, um seine Inhalte zu hosten, aber wie Sie sich vorstellen können, werden sie nicht für jedes auf Webflow erstellte Projekt ein CDN bereitstellen. 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-files.com 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 sich die Inhalte, die Cloudflare zur Optimierung benötigt, auf Ihrer Domain befinden. Wenn wir ein Cloudflare-Konto für milkmoonstudio.com haben, aber jedes Bild und jede CSS-Datei in einem Ordner auf website-al.com liegt, kann Cloudflare nur Optimierungen und Caching auf Ihre HTML-Dateien anwenden und sonst nichts. Also, wieder keine Optimierung.

Lassen Sie 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

Bevor Sie zum Folgenden übergehen, verwendet diese Methode eine Cloudflare-App, um all Ihre Assets auf Cloudflare zwischenzuspeichern. Die aktuelle Version der Cloudflare-Apps ist derzeit veraltet. Cloudflare hat angekündigt, dass sie durch ein neues App Experience ersetzt wird. In der Zwischenzeit können Sie einen Cloudflare Worker verwenden, um dieselben Ergebnisse zu erzielen. Wir haben hier bereits einen Beitrag, in dem dieser Prozess detailliert beschrieben wird. Bitte beachte, dass es etwas technischer ist, als nur eine App hinzuzufügen. Wir haben einen Cloudflare Worker erstellt, um Ihre Bilder mit dem Cloudflare Image Resizer zu optimieren. Manche mögen sagen, dass das einfacher ist, und obwohl es noch fortgeschritten ist, können Sie Den vollständigen Beitrag finden Sie hier. Wir werden sagen, dass Sie möglicherweise weniger Probleme haben, wenn Rocket Loader mit der Reihenfolge herumspielt, in der Skripte geladen werden usw. Wie dem auch sei, folgen Sie vorerst dieser Anleitung zum Schritt der App-Setup und wechseln Sie dann für den Rest zum Beitrag Image Optimization Worker. Wir werden diesen Beitrag aktualisieren, sobald das neue Cloudflare Apps-Erlebnis fertig ist, sodass Sie den App-Weg gehen können, wenn Sie möchten.

Webflow Cloudflare DNS-Einstellungen

Du wirst aufgefordert, hier zwei Anweisungen zu befolgen, die 2 A-Einträge und den CNAME-Eintrag, den dir Webflow gibt, wenn du SSL in deinem Webflow-Hosting-Tab in deinen Projekteinstellungen aktiviert hast (die Dinge haben sich ein wenig geändert, seit wir das geschrieben haben, also gibt es jetzt auch einen TXT-Eintrag, den du wie in Cloudflare verwenden kannst), und die Anweisung, das Proxying auf Cloudflare auszuschalten (Deaktivierung des orangefarbenen Wolkensymbols)) gemäß den Anweisungen von Webflow. Wir werden Sie bitten, beide zu ignorieren.

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

Ignoriere diese!

Schritt 1: Anstatt die SSL-Anweisungen zu verwenden, schalten Sie SSL unten auf dem Hosting-Tab aus. Klicken Sie auf Speichern.

• Kopieren Sie die neuen A-Record-Adressen und die CNAME-Einstellungen:

Speichern Sie die Nicht-SSL-Einstellungen, aktivieren Sie dann erneut das SSL-Kontrollkästchen und speichern Sie. Sie werden sehen, dass die Einstellungen wieder auf die ursprünglichen SSL-Einstellungen zurückgesetzt werden. Machen Sie sich keine Sorgen, ignorieren Sie diese einfach.

(Sie könnten die Einstellungen ohne SSL belassen, Cloudflare verarbeitet das SSL-Zertifikat und leitet alles ordnungsgemäß um, aber eine Sache wird kaputt gehen, Ihre Datei sitemap.xml verwendet http 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 werden.

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

• Stellen Sie sicher, dass die Einträge entgegen den Anweisungen von Webflow Cloudflare Proxied aktiviert haben.
• Gehe in Cloudflare zum Tab SSL/TLS-Einstellungen und aktiviere Vollständig:

• Jetzt möchten wir die DNS-Einstellungen löschen, damit Ihre Webflow-Einstellungen sofort weitergegeben werden. 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

• Geben Sie auf jeder dieser Websites Ihre nackte Domain ein, löschen Sie den A-Eintrag und dann den CNAME-Eintrag. Wenn Sie eine www-Subdomain wie use verwenden, verwenden Sie auch die vollständige Domain, also www.milkmoonstudio.com, und löschen Sie auch die Einträge für diese Domain. Löschen Sie abschließend den TXT-Eintrag.
• Gehen Sie nach der großen Säuberung erneut zum Hosting-Tab von Webflow.

Oh NEIN! - So viele Probleme, wen interessiert das, ignoriere und veröffentliche die Seite.

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

Bum, alles gut.

Wir haben also Webflow über Cloudflare laufen lassen, als Proxy, aber oh nein, wir haben vergessen, dass Inhalte auf Ihrer Domain gespeichert werden müssen, damit Cloudflare Leistungsverbesserungen vornehmen kann. Im Moment läuft alles über website-files.com

Wenn du weitere Hilfe bei der Einrichtung von Leistungsverbesserungen, Seitenregeln usw. benötigst, schau dir bitte das How-To-Video oben in diesem Beitrag an, um detailliert zu sehen, was du anwenden kannst, oder gehe direkt zu YouTube.

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

Es gibt also zwei Möglichkeiten, dies anzugehen: 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 ihn 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, lassen jemanden das für Sie erledigen. Zum Glück hat das jemand getan, und dann hat er eine Cloudflare-App entwickelt, die du einfach auf Cloudflare installieren und kostenlos nutzen kannst. Sie heißt 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. ‍

• Gehen Sie zum Apps-Tab in Cloudflare und suchen Sie nach Cassette. Das ist kostenlos, solange Sie einen Bucket verwenden, was wir tun werden, damit es in Ordnung ist. Es ist dieser Typ:

• Wenden Sie die folgenden Einstellungen in der App an:

1. Erstellen Sie eine Subdomain auf Ihrer Domain, in die Cassette die Dateien von Webseite-Files.com platzieren soll (oder was auch immer Webflow für Ihre Dateien verwendet, überprüfen Sie einfach die Seite oder öffnen Sie ein Bild in einem neuen Tab, um die URL zu überprüfen), geben Sie es einfach hier ein, Cassette wird Sie um Erlaubnis bitten, dies zu erstellen, wenn Sie die Einstellungen anwenden. Stellen Sie sicher, dass die Subdomain nicht bereits existiert. Cassette muss dieses Bit verwalten.
2. Teilen Sie Cassette mit, wo Webflow die Dateien speichert.

Das war's, jedes Mal, wenn eine Seite auf Ihrer Website geladen wird, überprüft Cassette Webseite-Files.com und behalte diese Dateien, falls es neue auf der Subdomain findet. Der Vorbehalt dabei ist, dass es etwas dauern kann, aber jetzt, da sich die im Browser geladenen Dateien auf Ihrer Domain befinden, können Sie alle von Ihnen erstellten Cloudflare-Einstellungen und -Regeln auf die Dateien anwenden. (Um den Zeitvorbehalt zurückzuholen, falls Sie nach etwa einem Tag sehen, dass Cassette einige Dateien nicht zwischenspeichert und optimiert, was Sie mit dem überprüfen können Dr. Flare Chrome-Plugin, das liegt normalerweise daran, dass Webflow einen src-Bildsatz mit optimierten Bildgrößen für verschiedene Viewport-Breiten veröffentlicht. Manchmal fehlen bei Cassette 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. Mehr dazu weiter unten, alternativ löst die Worker-Skriptmethode dieses Problem, da der von uns erstellte Worker nach einzelnen Bildern und src-Bilddatensätzen sucht).

Wir werden nicht auf alle Leistungsverbesserungen und Seitenregeln eingehen, die Sie in Cloudflare erstellen können, machen Sie einfach Spaß. Eine Sache, die wir dir sagen, ist, dass, wenn du dich entscheidest, Regeln zu erstellen, die deine Website stark zwischenspeichern, eine Seitenregel für deine sitemap.xml Datei erstellen, die den Cache komplett umgeht, sodass, wenn du zum Beispiel einen neuen Blogbeitrag erstellst, immer die neueste Version der Sitemap für Google da ist und nicht irgendeine veraltete Sitemap-Datei von vor 3 Wochen, wenn du einige starke Caching-Einstellungen hast. Du solltest die Sitemap-Seitenregel über den anderen Seitenregeln haben, da sie stark zwischengespeichert werden, wenn die Regeln nach unten übergehen. Das Gleiche gilt, wenn du einen RSS-Feed aktiviert hast. Umgehe den Cache auf der Feed-URL. Vollständiges Caching findet nur statt, wenn Sie Seitenregeln in Cloudflare einrichten, die Optimierungen in den Regeln anwenden und Alles zwischenspeichern auswählen.

Wie gesagt, die Cassette App wird eine Weile brauchen, 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... wir haben eine Zeitmaschine gebaut und 3 Tage gewartet und wir haben einen Lighthouse-Test durchgeführt und sind in der Zeit zurückgekommen und haben dann die Testergebnisse hochgeladen:

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 faul sind zu beheben, nur um mit den Ergebnissen zu prahlen. Google-Suchkonsole wird dich lieben.

Wenn Sie Fragen haben, schreiben Sie sie bitte in die Kommentare. Weitere Anleitungen findest du in diesen Beiträgen, und wenn Sie Tag Manager verwenden und versuchen möchten, die Dinge ein bisschen zu beschleunigen, könnten Sie einen schau dir diesen Beitrag an.

Update — Cassette konnte die benötigte Subdomain nicht erstellen

Wenn du auf den oben genannten Fehler stößt, bei dem Cassette sagt, dass sie die Subdomain nicht erstellen kann, hast du Cassette eingerichtet, folge einfach diesen Schritten oder sieh dir die Video mit Anleitungen.

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

1. Wenn Sie den Fehler erhalten, ignorieren Sie ihn einfach und erstellen Sie die Subdomain manuell.
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. Gehen Sie zu DNS und fügen Sie den CNAME für die Subdomain hinzu, die Sie in den Kassetteneinstellungen hatten.
4. In unserem Fall ist der CNAME Assets.
5. Der Wert für den CNAME ist der Webflow-CDN-Domainname von oben, auf dem Webflow Ihre Inhalte hostet.
6. In unserem Fall ist der Wert assets-global.website-files/
7. Stellen Sie sicher, dass Sie nur den nackten Domainnamen verwenden.
8. Das Kassettenproblem sollte jetzt behoben sein, obwohl Sie die App nicht sehen können. Bitte schauen Sie sich das Video für eine visuelle Anleitung an.

Update — Cloudflare zwingt, fehlende Bilder zwischenzuspeichern

Ein letztes Update. Während der Verwendung Dr. Flare und als wir einige der Websites im Detail durchgesehen haben, ist uns aufgefallen, dass Bilder manchmal nicht auf Cloudflare zwischengespeichert werden und trotzdem in das externe Webflow-CDN gelangen. Nachdem wir den Code überprüft hatten, stellten wir fest, dass dies daran liegt, dass Webflow ansprechende Bilder für ihr src-Set generiert hat. In diesem Fall wurden Bilder für einige Breakpoints zwischengespeichert, andere gingen an das Webflow-CDN. Wenn Sie dies sehen und es umgehen möchten, können Sie die reaktionsschnelle Bildgenerierung für den Schuldigen einfach deaktivieren.

Alles was du tun musst ist:

1. Wählen Sie das Bild auf der Webflow-Leinwand aus
2. Typ Befehl + Schicht + O (auf Mac) oder Steuerung + Schicht + O (unter Windows)
3. Offen Bedienfeld „Einstellungen“ > Bild-Einstellungen
4. Deaktivieren Sie das Responsives Bild Ankreuzfeld

Der Vorbehalt dabei ist, dass Webflow keine responsiven Bilder mehr generiert. Sie können also die Bildgrößenänderung von Cloudflare 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 der Meinung sind, dass die nicht reagierende Version zu groß ist 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, Page Rules und Optimierungen wie Polish zufrieden sind.

Verwenden der Cloudflare-Bildgrößenänderung

Damit das funktioniert, musst du die Bildgrößenänderung in Cloudflare im Speed-Tab aktivieren. Bitte beachte, dass zusätzliche Kosten anfallen können. Je nachdem, was du gerade tust, kannst du die Größenänderung von Bildern in Origin ein- oder ausschalten. Wenn es aktiviert ist, kannst du die Größe der Bilder ändern und Dinge wie die WebP- und Avif-Konvertierung direkt vom Webflow-CDN aus durchführen. Lädt die URL hoch, ohne sie zuerst über Cloudflare ausführen zu müssen, indem du Cassette verwendest.

Für die Bildgrößenänderung kannst du einen Worker schreiben (schwieriger) oder einfach ein eingebettetes Bild in Webflow mit dem HTML-Embed-Element verwenden. 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 grobe responsive 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 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">
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>

Wie effektiv die letzte beim Erstellen von Avif-Dateien sein wird, hängt von Ihren Seitenregeln wie Caching-Einstellungen und Ihrer Regelreihenfolge ab. Wenn du also alles zwischengespeichert und an dieser Subdomain den letzten Schliff gegeben hast, wurde vielleicht schon ein WebP-Bild erstellt und dieses wird wahrscheinlich nicht Avif verwenden, aber du kannst experimentieren.

Entschuldigung für die schreckliche Formatierung oben und die Vereinfachung der Dinge. Der wichtigste Teil der Größenänderung ist, dass die URL-Struktur in der Einbettung mit der Domain beginnt, die Sie in Cloudflare haben, gefolgt von /cdn-cgi/image/ Ihren Formatierungs- und Optimierungsoptionen/ und dann der URL des Bildes. Spielen Sie einfach herum und denken Sie daran, dass dies nicht erforderlich ist, wenn Sie damit zufrieden sind, was Kassette und die polnische Option usw. für Sie tun.

Im Folgenden haben wir einige empfohlene Cloudflare-Einstellungen und -Regeln hinzugefügt. Bitte beachten Sie, dass dies stark von Ihrer Website abhängt 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
• Steigern Sie die Leistung Ihrer Website mit dem Zaraz Tag Manager von Cloudflare: Eine schrittweise Anleitung zur Implementierung von Zaraz und zum Hinzufügen von Google Analytics 4 in Webflow

Cloudflare-Empfehlungen

Geschwindigkeit > Optimierung

Polnisch: On

Verbessern Sie die Ladezeit von Bildern, indem Sie die auf der Domain gehosteten Bilder optimieren. 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.

Empfohlene Einstellung: Verlustbehaftet bei aktiviertem WebP, es sei denn, es gibt einen Qualitätsverlust. In diesem Fall sollte es bei aktiviertem WebP Verlustfrei sein. Bei WebP immer ein Häkchen setzen und bei höheren Tarifen mit AVIF kann das für größere Einsparungen genutzt werden.

Automatisches Verkleinern: Ein

Reduzieren Sie die Dateigröße des Quellcodes auf Ihrer Website.

Empfohlene Einstellung: Immer JavaScript, CSS und HTML angekreuzt.

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.

Beispiel für eine Seitenregel

• Polnisch: Lossy
• Auto Minify: HTML, CSS und 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)

‍