Optimieren Sie Webflow mit Cloudflare: Bilder, Assets und Caching im Jahr 2026

Webflow verwendet AWS und eine Zeit lang Fastly. Es ist zwar ausreichend, aber wir haben festgestellt, dass Cloudflare uns bei großen Projekten, insbesondere solchen, die viele Images erfordern, deutliche Geschwindigkeitssteigerungen, eine bessere Verfügbarkeit und eine Vielzahl von Optimierungsoptionen sowie Mitarbeitern zur Verfügung gestellt hat. Aber im Gegensatz zu einigen anderen Plattformen war es nicht einfach, Ihr DNS auf Cloudflare umzustellen. Webflow und Cloudflare passten nicht gut zusammen, wenn es darum geht, Ihre Website als Proxy zu betreiben und sie über Cloudflare zu optimieren.

In den alten Tagen haben wir hat sich einen Hack ausgedacht, um die SSL-Einstellung und die Nicht-SSL-Verbindungsdetails zu verwenden zusammen mit der Kassetten-App zum Zwischenspeichern und Optimieren von Bildern. Schließlich wurden Apps aus Cloudflare entfernt und mit viel Versuch und Irrtum können wir uns eine ausdenken eigener Mitarbeiter zum Proxy und Zwischenspeichern von Bildern von Webflow auf Cloudflare.

Nun, gute Neuigkeiten. Das hat sich geändert.

Webflow ist zu Cloudflare migriert, und eine Zeit lang waren wir in der Schwebe.

Die gute Nachricht ist, dass wir aufgrund ihres Umzugs nach Cloudflare jetzt Orange-to-Orange (O2O) funktioniert nativ. Keine hackigen Workarounds mehr, keine Cassette-Apps mehr, keine komplizierten Subdomains mehr für Ihre Assets. Wenn Sie unseren vorherigen Beitrag zum Cachen von Webflow mit Cloudflare gelesen haben, können Sie im Grunde das meiste davon aus dem Fenster werfen (nun, behalten Sie die Teile, warum Sie das überhaupt tun möchten).

Was ist also die aktuelle Situation, wenn es um Caching und Proxying über Cloudflare geht. Nun, da Webflow O2O unterstützt, ist die orange Cloud in Ihren DNS-Einstellungen aktiviert. Sie wird vollständig von Webflow unterstützt und Sie müssen sich keine Sorgen mehr um SSL usw. machen. Das bedeutet auch, dass Sie jetzt die umfangreiche Palette an Sicherheitstools und Workern, die Cloudflare anbietet, problemlos nutzen können.

ABER, und das ist der große Vorbehalt, all Ihre Assets, von Bildern bis CSS, befinden sich immer noch auf einer Webflow-CDN-Domain, und da sie sich nicht auf IHRER DOMAIN befindet, haben Sie immer noch keine Kontrolle darüber, es sei denn...

In diesem Beitrag führen wir Sie durch die Einrichtung eines Cloudflare-Workers, der Ihre Webflow-Website so transformiert, dass praktisch alle Assets per Proxy weitergeleitet und zwischengespeichert werden. Wir sprechen von automatischer Bildoptimierung, Asset-Proxying und Edge-Caching, die alle von Ihrer eigenen Domain aus bereitgestellt werden. Klingt lustig, oder? In der Vergangenheit haben wir uns nur auf Bilder konzentriert, jetzt gehen wir noch einen Schritt weiter, gehen mehr an und machen sie einfacher zu verwenden als je zuvor.

Nur zur Erinnerung, das ist fortgeschrittenes Zeug. Wir haben das Skript intuitiver gemacht, aber bitte achten Sie auf die Einrichtung. Bitte lesen Sie es sorgfältig, ein Video wird zu einem späteren Zeitpunkt erscheinen. Lass uns eintauchen!

Unten finden Sie die Schnellstartanleitung. Um mehr über die Skriptdetails zu erfahren, klicken Sie bitte besuche den MD auf Github hier da das viel detaillierter geht.

Was wir versuchen zu erreichen

Hier ist der Deal. Webflow hostet alle Ihre Assets auf ihren CDN-Domains (cdn.prod.website-files/, assets.website-files/usw.). Dadurch ergeben sich einige Einschränkungen:

• Keine Bildoptimierung — Bilder werden unverändert bereitgestellt, keine automatische AVIF- oder WebP-Konvertierung. Sie tun das in Webflow und nichts passiert im Handumdrehen.
• CORS-Einschränkungen — Cross-Origin-Anfragen können manchmal fehlschlagen
• Kein einheitliches Caching — Ihr Vermögen ist auf verschiedene Domains verteilt
• Kopfschmerzen in den sozialen Medien — OG-Bilder sind nicht für das Teilen optimiert

Unser Cloudflare Worker versucht, viele dieser Probleme zu lösen, indem er den HTML-Code Ihrer Website abfängt und all diese Webflow-CDN-URLs neu schreibt, um sie durch Ihre Domain zu leiten.

Sobald es eingerichtet ist, erhalten Sie:

• Automatische Formatkonvertierung — AVIF für moderne Browser, WebP für andere oder was auch immer Sie bevorzugen
• Optimierung der Qualität — Konfigurierbare Komprimierung (wir verwenden standardmäßig 85%, sieht gut aus)
• Edge-Caching — Alle Assets werden in den über 300 globalen Rechenzentren von Cloudflare zwischengespeichert (bitte denken Sie daran, dass es kein Cache-Priming gibt)
• CORS-freie Lieferung — Alles wird von Ihrer Domain aus bedient
• Optimierung sozialer Medien — OG- und Twitter-Bilder wurden aus Kompatibilitätsgründen in JPEG konvertiert (bitte denken Sie daran, dass Cloudflre in avif konvertieren kann, aber nicht zurück)

Und hier ist der beste Teil. Sobald das alles läuft, können Sie auch die anderen Funktionen von Cloudflare hinzufügen. Seitenregeln, Caching-Regeln, WAF, Bot-Schutz, das funktioniert. Es ist jetzt deine Zone, tobe dich aus.

Aber es sind nicht nur Bilder.

Der Worker verwendet auch Proxys und Caches all Ihre CSS-, JavaScript- und Schriftdateien über Ihre Domain (oder versucht es). Ihre WOFF2s, Ihre TTFs, Ihre minimierten JS-Bundles — all das wird aus dem CDN von Webflow abgerufen, am Rand von Cloudflare zwischengespeichert und von Ihrer Domain aus mit den richtigen Cache-Headern bereitgestellt. AVIF-Bilder? Sie sind bereits optimiert, sodass der Worker die Transformation überspringt und sie einfach direkt als Proxy weiterleitet. Favicons erhalten ebenfalls die vollständige Bildbehandlung. Im Grunde genommen, wenn Webflow es von ihrem CDN aus bereitstellt, schnappen wir es uns und machen es zu Ihrem.

Also haben wir das Spiel aufgepeppt. Im Folgenden finden Sie allgemeine Anweisungen. Das Video zeigt nur, wie es läuft, aber sobald ich Zeit habe, werde ich eine vollständige Anleitung aufnehmen. Im Moment kannst du der schriftlichen Anleitung folgen.

Teil 1: Deine Domain mit Cloudflare und Webflow einrichten

Es gibt zwei Möglichkeiten, Ihre von Cloudflare verwaltete Domain mit Webflow zu verbinden:

1. Standard-Setup — Cloudflare verarbeitet nur DNS, Webflow bedient alles (Proxy AUS)
2. O2O einrichten — Der Traffic durchläuft zuerst Ihre Cloudflare-Zone, dann Webflow (Proxy AN)

Wir wollen O2O, weil wir dadurch Workers, Caching-Regeln, WAF und all die anderen Cloudflare-Goodies verwenden können. Aber lassen Sie uns beide behandeln, damit Sie den Unterschied kennen.

Voraussetzungen

Ihre Webflow-Site muss sich auf der Infrastruktur von Cloudflare befinden. Websites, die nach dem 21. April 2025 erstellt wurden, sind bereits da. Bei älteren Websites überprüfe deine Workspace-Einstellungen → Domain-Updates, um zu sehen, ob du zuerst migrieren musst.

Standard-DNS-Setup (kein O2O)

Wenn Sie nur möchten, dass Cloudflare Ihr DNS ohne Proxy verwaltet (das sagen Ihnen die Standardanweisungen von Webflow):

Für deine Root-Domain (@):

• Typ: EIN
• Nome: @
• Wert: 198,202,211,1
• Proxystatus: Nur DNS (graue Wolke)

Für www:

• Typ: CNAME
• Nome: www
• Ziel: cdn.webflow.com
• Proxystatus: Nur DNS (graue Wolke)

Das funktioniert gut, aber Sie erhalten keine Cloudflare-Funktionen, die über DNS hinausgehen. Der Verkehr geht direkt zu Webflow.

O2O Setup (Was wir wollen)

Um Orange-to-Orange zu aktivieren und die Funktionen von Cloudflare tatsächlich zu nutzen, benötigen Sie CNAME-Einträge als Proxy:

Für deine Root-Domain (@):

• Typ: CNAME
• Nome: @
• Ziel: cdn.webflow.com
• Proxystatus: Proxy (orange Wolke AN)

Für www:

• Typ: CNAME
• Nome: www
• Ziel: cdn.webflow.com
• Proxystatus: Proxy (orange Wolke AN)

Wichtig: Löschen Sie alle vorhandenen A-Datensätze, die auf 198,202,211,1. Du kannst nicht beides haben. Für O2O sind es CNAME-Einträge mit aktiviertem Proxy.

Wenn Sie andere Subdomains haben (wie blog.yourdomain.com), fügen Sie auch für jeden einen Proxy-CNAME hinzu.

SSL/TLS-Einstellungen

Gehe zu SSL/TLS in Ihrem Cloudflare-Dashboard und stellen Sie den Verschlüsselungsmodus auf Voll (streng).

Fügen Sie die Domain in Webflow hinzu

Drüben in Webflow:

1. Gehe zu Projekteinstellungen → Hosting → Produktion
2. Füge deine Domain hinzu (sowohl root als auch www)
3. Veröffentlichen Sie Ihre Website

Über die Warnung „Update erforderlich“

Hier ist die Sache. Sobald die orangefarbene Wolke an ist, kann Webflow Ihre DNS-Einträge nicht mehr sehen. Es wird sich also beschweren oder könnte sich beschweren. In deinen Veröffentlichungseinstellungen wird „Update erforderlich“ oder „Update steht aus“ angezeigt.

Ignoriere es.

Dies ist ein erwartetes Verhalten. Die Überprüfung von Webflow kann den Proxy nicht durchschauen. Wenn deine Website korrekt geladen wird, ist alles in Ordnung. Sie können normal weiterveröffentlichen. Ich hatte den Warnstab dabei, und in manchen Fällen verschwindet er.

Schritt 5: Stellen Sie sicher, dass es funktioniert

Besuchen Sie Ihre Website. Wenn es geladen wird, bist du goldrichtig. Du kannst auch:

• Benutzen SSL-Labore um Ihr SSL-Zertifikat zu testen
• Benutzen whatsmydns.net um zu bestätigen, dass Ihre Domain in Cloudflare-IPs aufgelöst wird
• Überprüfen Sie die Antwort-Header für cf-ray (zeigt an, dass Cloudflare in der Kette ist)

Richtig, O2O ist sortiert. Kommen wir jetzt zum lustigen Teil.

Teil 2: Aktivierung der erforderlichen Cloudflare-Funktionen

Bevor wir den Worker bereitstellen, müssen wir einige Dinge in Cloudflare aktivieren und sicherstellen, dass die richtigen Abonnements aktiv sind.

Bildtransformationen aktivieren

Dies ist die magische Sauce, mit der Cloudflare Ihre Bilder im Handumdrehen konvertieren und optimieren kann.

1. Gehe zu Cloudflare-Dashboard → Deine Zone
2. Navigiere zu Bilder → Transformationen
3. Klicken Sie Bildtransformationen aktivieren

Ohne das ist der /cdn-cgi/bild/ URLs funktionieren nicht und deine Bilder werden nur 404. Nicht ideal.

Kosten: Mit dem kostenlosen Kontingent erhalten Sie 5.000 Transformationen pro Monat. Bezahlt werden 9$ pro Monat für 50.000 Transformationen, danach 0,50$ pro 1.000. Für die meisten Webflow-Websites reicht das kostenlose Kontingent für den Anfang aus.

Zulässige Ursprünge hinzufügen

Immer noch dabei Bilder → Transformationen, klicken Sie auf Quellen und füge diese Ursprünge hinzu:

Herkunft:
‍

• ‍cdn.prod.website-files/
• assets.website-files/
• assets-global.website-files/G
• ‍uploads-ssl.webflow.com
• cdn.webflow.com
• ‍www.yourdomain.com Kritisch!

Letzteres ist entscheidend und leicht zu übersehen. Die Transformations-URLs verweisen auf Ihre eigene Domain als Quelle (weil wir eine Proxyweiterleitung durchführen /img-original/), sodass Cloudflare die Erlaubnis benötigt, von sich selbst abzurufen. Meta, wir wissen.

Mitarbeiter aktivieren

In deiner Zone müssen Workers aktiviert sein.

1. Gehe zu Mitarbeiter und Seiten im Cloudflare-Dashboard
2. Wenn Sie Workers noch nicht verwendet haben, werden Sie aufgefordert, eine Subdomain einzurichten

Kosten: Mit dem kostenlosen Kontingent erhalten Sie 100.000 Anfragen pro Tag. Das ist eine Menge. Bezahlt werden 5$ pro Monat für 10 Millionen Anfragen, falls Sie mehr benötigen.

Teil 3: Den Worker erstellen

Nun zum eigentlichen Worker. Hier passiert die Magie.

Schritt 1: Neuen Worker erstellen

1. Gehe zu Mitarbeiter und Seiten
2. Klicken Sie Anwendung erstellen → Worker erstellen
3. Gib ihm einen Namen (so etwas wie Webflow-Optimierer oder Seiten-Cache)
4. Du wirst eine Hello World-Vorlage sehen — lösche das alles

Schritt 2: Fügen Sie den Worker-Code ein

Wir haben ein vollständiges Worker-Skript, das alles erledigt. Es sind ungefähr 600 JavaScript-Zeilen, die:

• Fängt HTML-Antworten von Webflow ab
• Schreibt alle Bild-URLs um, um Cloudflare Image Resizing zu verwenden
• Verwendet AVIF-Bilder direkt als Proxy (sie sind bereits optimal)
• Proxys und Caches für CSS, JS und Fonts
• Verarbeitet OG/Twitter-Bilder für das Teilen in sozialen Netzwerken
• Fügt die richtigen CORS-Header hinzu
• Speichert alles, was sich am Rand befindet

Fügen Sie das vollständige Worker-Skript ein (Sie können es von unserem GitHub oder der Seite hier abrufen).

Schritt 3: Speichern und Bereitstellen

Treffer Speichern und bereitstellen. Der Worker ist jetzt live, aber er macht noch nichts, weil wir ihm nicht gesagt haben, wohin er rennen soll.

Teil 4: Umgebungsvariablen

Der Worker verwendet Umgebungsvariablen, sodass Sie ihn konfigurieren können, ohne Code bearbeiten zu müssen. Gehe zu deinem Worker → Einstellungen → Variablen.

Erforderliche Variable

Variabel: DOMÄNE

Wert: Deine Domain (ohne https://) also in unserem Fall www.milkmoonstudio.com

Dies teilt dem Worker mit, welche Domain in den umgeschriebenen URLs verwendet werden soll. Wenn nicht vorhanden, überprüft der Code die aktuelle Domain und verwendet diese als Fallback.

Optionale Variablen (bei sinnvollen Standardwerten haben alle Variablen Standard-Fallbacks)

Variabel: BILDFORMAT

Wert: auto“, webp“, oder Avif

‍

Variable: IMAGE_QUALITY

Wert: 85 (Qualität 1-100, 85 ist eine gute Balance)

‍

Variabel: OG_BILDFORMAT

Wert: jpeg (Format für das Teilen von Bildern in sozialen Netzwerken)

‍

Variable: OG_IMAGE_QUALITY

Wert: 80 (Qualität (für OG-Bilder)

‍

Variabel: EDGE_CACHE_TTL

Wert: 31536000 (Edge-Cache-Dauer (in Sekunden) (Standard: 1 Jahr)

‍

Variabel: BROWSER_CACHE_TTL

Wert: 604.800 (Dauer des Browser-Cache in Sekunden, Standard: 1 Woche)

‍

Variabel: CATCH_ALL_EXTERNAL

Wert: falsch (Verarbeiten Sie auch Nicht-Webflow-CDN-Bilder, eine sehr experimentelle Funktion und erfordert Bildtransformationen (um beliebige Domänen zu verwenden)

‍

Empfehlungen:

• Behalten BILDFORMAT als Auto — es dient AVIF für Browser, die es unterstützen, WebP für andere
• BILDQUALITÄT bei 85 sieht es für die meisten Bilder gut aus. Sinken Sie auf 70-75, wenn Sie wirklich versuchen, Bytes zu komprimieren
• Behalten OG_BILDFORMAT als jpeg — einige soziale Plattformen verarbeiten AVIF/WebP für Vorschauen immer noch nicht

Teil 5: Einrichten der Worker-Route

Hier ist ein wichtiger Punkt, der die Leute verwirrt. Der Worker muss auf deinem laufen benutzerdefinierte Domain, nicht der *.workers.dev Subdomain. Die Cache-API funktioniert nicht auf workers.dev, was kein Caching bedeutet, was den ganzen Punkt zunichte macht.

Fügen Sie die Route hinzu

1. Gehe in deinem Worker zu Trigger → Strecken
2. Klicken Sie Route hinzufügen
3. Konfigurieren Sie:
   • Reiseroute: *deinedomain.com/*
   • Zone: Wähle deine Zone
4. Klicken Sie Route hinzufügen

Das * fängt am Anfang beide www.yourdomain.com und yourdomain.com. Das /* fängt am Ende alle Pfade ein.

Wenn du nur verwendest www, du kannst genauer sein: www.yourdomain.com/*

Teil 6: Wie das alles funktioniert

Richtig, lassen Sie uns darüber sprechen, was tatsächlich unter der Haube passiert. Dieser Teil ist für Neugierige (und für den Fall, dass unweigerlich etwas schief geht und Sie es debuggen müssen).

Der Anforderungsablauf

Wenn jemand deine Seite besucht:

1. Anfrage trifft zu | Cloudflare — Deine Zone zuerst (O2O)
2. Arbeiter fängt ab — Prüft, ob es sich um eine HTML-Anfrage handelt
3. Ruft von Webflow ab — Ruft den HTML-Code ab (am Rand zwischengespeichert)
4. Transformiert URLs — Schreibt alle Webflow-CDN-URLs um
5. Gibt transformiertes HTML zurück — Der Browser empfängt die geänderte Seite

Wenn der Browser dann ein Bild anfordert:

1. Treffer anfragen /cdn-cgi/image/format =auto, quality=85/ https://yourdomain.com/img-original/...
2. Cloudflare-Bildgrößenänderung — Analysiert die Transformations-URL
3. Ruft die Quelle ab — Holt das Original von deinem /img-original/ Endpunkt
4. Stellvertreter der Arbeitnehmer — /img-original/ ruft von Webflow CDN ab
5. Transformationen — Konvertiert in AVIF/WebP, wendet Qualität an
6. Caches — Sowohl das Original als auch das transformierte am Rand zwischengespeichert
7. kehrt zurück — Optimiertes Bild, das an den Browser gesendet wird

URL-Struktur

Lassen Sie uns aufschlüsseln, wie eine transformierte URL aussieht:

Original (im Webflow):

https://cdn.prod.website-files.com/63565c108c96756a59b92502/image.jpg

Transformiert (in deinem HTML):

https://yourdomain.com/cdn-cgi/image/format=auto,quality=85/https://yourdomain.com/img-original/https%3A%2F%2Fcdn.prod.website-files.com%2F63565c108c96756a59b92502%2Fimage.jpg

Das aufschlüsseln:

• https://yourdomain.com/cdn-cgi/image/ — Cloudflares Endpunkt zur Größenänderung von Bildern
• Format=Auto, Qualität=85/ — Die Transformationsparameter
• https://yourdomain.com/img-original/ — Unser Proxy-Endpunkt
• https://%3A%2F%2FCDN.prod... — Die URL-kodierte Originalbild-URL

Was wird transformiert oder proxiert

• ‍PNG, JPG, WebP, GIF: Optimiert über Cloudflare Image Resizing/cdn-cgi/bild/ → /img-original/
• ‍SVG: Bereinigt (Skripte entfernt), Format beibehalten/cdn-cgi/bild/ → /img-original/
• ‍AVIF: Nur per Proxy (bereits optimal)/img-cache/CSS, JSProxy und zwischengespeichert/asset-Cache/
• ‍Schriften: (woff, woff2, ttf, otf, eot) Proxy und zwischengespeichert/asset-cache/ (sehr experimentell)
• ‍Favicons: Optimiert als Bilder/cdn-cgi/bild/ → /img-original/
• ‍OG/Twitter Bilder: In JPEG konvertiert/cdn-cgi/bild/ → /img-original/

Teil 7: Testen Sie Ihr Setup

Zeit, dafür zu sorgen, dass alles richtig funktioniert.

Grundlegende Prüfungen

1. Seitenquelle anzeigen

• Besuchen Sie Ihre Website
• Rechtsklick → Seitenquelle anzeigen
• Suche nach /cdn-cgi/bild/ — sollte in Bild-URLs erscheinen
• Suche nach /asset-Cache/ — sollte in CSS- und JS-URLs erscheinen

Wenn Sie diese sehen, läuft der Worker und transformiert Ihr HTML.

2. Überprüfen Sie die Registerkarte Netzwerk

• Öffnen Sie DevTools (F12 oder Cmd+Option+I)
• Gehen Sie zur Registerkarte Netzwerk
• Laden Sie Ihre Seite neu
• Nach „Img“ filtern
• Überprüfe, ob die Bild-URLs von deiner Domain stammen, nicht vom CDN von Webflow

3. Überprüfen Sie die Cache-Header Klicken Sie auf ein Bild auf der Registerkarte Netzwerk und überprüfen Sie die Response-Header:

• X-Cache: TREFFER = Wird aus dem Cache von Cloudflare bedient (gut!)
• X-Cache: FEHLSCHLAG = Erste Anfrage, jetzt zwischengespeichert (auch in Ordnung)
• Inhaltstyp: image/avif oder Bild/Webp = Formatkonvertierung funktioniert

4. Testen Sie das Teilen in sozialen Netzwerken

• Verwenden Sie den Sharing-Debugger von Facebook
• Verwende den Kartenvalidator von Twitter
• Prüfen Sie, ob OG-Bilder ohne Fehler geladen werden

DrFlare-Erweiterung verwenden

Der einfachste Weg, Ihr Setup zu testen, ist die DrFlare-Erweiterung für Chrome. Starten Sie es von DevTools aus und aktualisieren Sie die Seite. Sie sehen detaillierte Statistiken und können den Mauszeiger über die Bilder bewegen, um sie vor Ort zu analysieren. Es wurde benachteiligt, aber wieder zum Leben erweckt als DrFlare Reloaded, hol es dir hier.
‍

Bitte denken Sie daran, den Browser zu aktualisieren, sobald Sie Dr. Flare geöffnet haben.

Teil 8: Problembehandlung

Dinge gehen schief. Hier erfahren Sie, wie Sie die häufigsten Probleme beheben können.

Bilder Return 404

Symptome: Bilder werden nicht geladen, 404-Fehler in der Konsole.

Checkliste:

• ✅ Bildtransformationen in Cloudflare aktiviert?
• ✅ Deine Domain wurde zu Allowed Origins hinzugefügt?
• ✅ Worker-Route aktiv und korrekt?
• ✅ DOMÄNE Umgebungsvariable richtig gesetzt?

Überprüfen Sie die Worker-Logs: Cloudflare-Dashboard → Workers → Your Worker → Logs

Assets werden immer noch von Webflow CDN geladen

Symptome: CSS/JS-URLs wurden nicht transformiert.

Checkliste:

• ✅ Worker wurde auf einer benutzerdefinierten Domain-Route bereitgestellt (nicht *.workers.dev)?
• ✅ Richtiges Routenmuster? (z. B. *deinedomain.com/*)
• Browser-Cache leeren und neu laden (Strg/Cmd + Shift + R)

Seitenquelle anzeigen — wenn URLs nicht transformiert werden, läuft der Worker nicht auf dieser Route.

OG-Bilder funktionieren nicht in sozialen Medien

Symptome: Soziale Vorschauen zeigen kaputte Bilder.

Prüfen Sie:

• Verwenden Sie die Facebook/Twitter-Validatoren, um den tatsächlichen Fehler zu sehen
• Verifizieren OG_BILDFORMAT ist eingestellt auf jpeg
• Überprüfe, ob das Meta-Tag in der Seitenquelle transformiert wurde

Webflow zeigt „Update erforderlich“ für Domain

Das wird erwartet! Wenn der Cloudflare-Proxy aktiviert ist, kann Webflow Ihre DNS-Einträge nicht sehen. Wenn Ihre Website korrekt geladen wird, ignorieren Sie diese Warnung.

525 Handshake-Fehler

Dies bedeutet normalerweise, dass etwas mit Ihrem SSL-Setup nicht stimmt:

• Prüfen Sie, ob der SSL/TLS-Modus auf eingestellt ist Voll (streng) bei Cloudflare
• Stellen Sie sicher, dass Sie keine widersprüchlichen SSL-Einstellungen haben

Teil 9: Kosten

Reden wir über Geld. Wie viel wird dich das kosten?

Cloudflare-Mitarbeiter

• Kostenloses Kontingent: 100.000 Anfragen/Tag
• Bezahlt: 5$ pro Monat für 10 Millionen Anfragen

Bildtransformationen

• Kostenloses Kontingent: 5.000 Transformationen/Monat
• Bezahlt: 9$ pro Monat für 50.000 Transformationen, dann 0,50$ pro 1.000

Für eine typische Webflow-Site

Die Caching-Strategie minimiert die Kosten erheblich:

• HTML am Edge zwischengespeichert → weniger Quellanfragen
• Originalbilder zwischengespeichert → Die Transformation erfolgt nur einmal pro Bild
• Transformierte Bilder zwischengespeichert → bei wiederholten Besuchen von Edge bereitgestellt
• 1-Jahres-TTL → Bilder bleiben im Cache, bis du sie löschst
• Denken Sie daran, dass Cache- und Seitenregeln eine komplexere Cache-Strategie ermöglichen. Beispielsweise können Blogseiten zwischengespeichert werden weniger aggressiv als eine Homepage, weil Beiträge regelmäßiger aktualisiert werden, während statische Seiten oft fast unbegrenzt zwischengespeichert werden können.

Den Cache leeren

Wenn Sie Ihre Caching-Strategie eingerichtet haben, denken Sie daran, dass Änderungen möglicherweise nicht sofort übernommen werden. Wenn Sie den Edge-Cache für eine Seite oder ein Asset auf eine Woche festlegen, wird die gecachte Version erst nach Ablauf dieser Woche am Edge gelöscht.

Um den Cache im Cloudflare-Dashboard zu löschen, gehen Sie zu Caching → Configuration und verwenden Sie entweder Custom Purge (um genauer zu sein, was Sie löschen) oder Purge Everything (wodurch der gesamte Cache gelöscht wird).

Wenn Sie fertig sind, denken Sie daran, den Browser-Cache zu leeren oder im Inkognito-Modus zu testen.

Benutzerdefiniert bietet die folgenden Optionen. Dies ermöglicht gezielte Löschvorgänge.

Cache mit einem Webhook im Webflow-Einstellungsbereich leeren

Es ist auch möglich, das Gerät zu löschen, wenn Sie in Webflow auf Veröffentlichen klicken, indem Sie Ihren Webeflow-Einstellungen einen Webhook hinzufügen.

Webflow → Webhook zum Löschen des Cloudflare-Caches

Hier ist der kurze Überblick:

Der Fluss

1. Webflow löst einen Webhook aus wenn Sie Ihre Website veröffentlichen
2. Etwas empfängt diesen Webhook und ruft die API von Cloudflare auf, um den Cache zu leeren

Der Haken: Cloudflare hat keinen direkten „Empfangswebhook“ -Endpunkt, daher benötigen Sie einen Mittelsmann (Cloudflare Worker, Zapier, Make oder eine einfache serverlose Funktion).

Schritte zur Einrichtung

1. Im Webflow

• Gehe zu Seiteneinstellungen → Integrationen → Webhooks
• Fügen Sie einen Webhook mit Triggertyp hinzu: Website veröffentlichen
• Verweisen Sie auf Ihre Vermittler-URL (Worker, Zapier usw.)

2. In Cloudflare

• Schnapp dir dein Zonen-ID (von der Übersichtsseite Ihrer Domain)
• Erstellen Sie eine API-Token mit Zone.Cache löschen Genehmigung

3. Der Mittelsmann (Beispiel Cloudflare Worker)

Ihr Worker empfängt den Webflow-Webhook und erreicht den Purge-Endpunkt von Cloudflare:

POSTEN SIE https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache

Mit Korpus: {"purge_everything“: wahr}

Dokumente

• Webflow-Webhooks: https://developers.webflow.com/data/docs/working-with-webhooks
• Cloudflare-API zum Löschen des Cache: https://developers.cloudflare.com/api/resources/cache/methods/purge/‍
  ‍

Teil 10: Einschränkungen

Nichts ist perfekt. Folgendes sollten Sie wissen:

Bekannte Einschränkungen

• ‍Cache Reserve nicht verfügbar: Webflow verwendet O2O-Proxying, das Cache Reserve umgeht. Assets werden nur am Edge zwischengespeichert.
• ‍JSON-LD nicht transformiert: URLs für strukturierte Daten werden nicht geändert. Suchmaschinen verarbeiten die ursprünglichen URLs einwandfrei.‍
• Regex-basierte Transformation: Mehrfache Übergänge über HTML. Zulässig für typische Seiten (<200 KB).

Was funktioniert nicht

• Daten-URLs (Daten:Bild/...): Inline, nichts zum Proxy
• Blob-URLs (Klecks:...): Vom Browser generiert, kann kein Proxy verwendet werden
• Relative URLs: Bereits auf deiner Domain
• Nicht-Webflow-CDN-Assets: Es sei denn catch_all_external=Wahr

Dynamischer Inhalt

Der Worker transformiert HTML nur bei der ersten Antwort. Bilder, die nach dem Laden der Seite per JavaScript hinzugefügt wurden, werden möglicherweise nicht transformiert, es sei denn, sie befinden sich auch im ursprünglichen HTML-Code. Wenn Sie viel clientseitiges Rendern durchführen, denken Sie daran.

Anweisungen zum Rollback

Wenn etwas furchtbar schief geht (wahrscheinlich nicht, aber nur für den Fall):

Schnellabschaltung (Keep Worker)

1. Gehe zu Worker → Trigger → Strecken
2. Löschen Sie die Route
3. Die Website wird sofort direkt von Webflow aus bereitgestellt
4. Schalten Sie den Entwicklermodus ein, um den Cache zu umgehen

Vollständige Entfernung

1. Löschen Sie die Worker-Route
2. Löschen Sie den Worker selbst
3. (Optional) Bildtransformationen deaktivieren
4. (Optional) Zulässige Ursprünge entfernen

Ihre Website kehrt zum Standard-Webflow-Hosting zurück, wobei der O2O-Proxy noch aktiv ist. Die anderen Funktionen von Cloudflare wie WAF und Bot-Schutz stehen dir weiterhin zur Verfügung.

Einpacken

Und das war's. Sie haben jetzt eine richtig aufgeladene Webflow-Website, auf der Cloudflare läuft, mit Bildoptimierung, Asset-Caching und allen Edge-Funktionen, die Sie sich nur wünschen können.

Der beste Teil? Sobald dies ausgeführt wird, können Sie zusätzliche Cloudflare-Funktionen hinzufügen. Richten Sie Seitenregeln für ein bestimmtes Caching-Verhalten ein. Fügen Sie WAF-Regeln aus Sicherheitsgründen hinzu. Konfigurieren Sie den Bot-Schutz. Verwenden Sie den Warteraum, wenn Sie mit Verkehrsspitzen rechnen. Es ist jetzt deine Zone. Du musst herumspielen, um das Beste daraus zu machen.

Ein Großteil der Optimierung ergibt sich aus dem Spielen mit Caching und Seitenregeln usw.

Wir verwenden dieses Setup jetzt schon eine Weile in der Produktion und die Leistungssteigerungen scheinen solide zu sein. Schnellere Ladezeiten, bessere Core Web Vitals, kleinere Bilddateien und zufriedenere Kunden.

Wenn Sie auf Probleme stoßen oder Fragen haben, schreiben Sie uns eine Nachricht. Wir freuen uns immer, über die Leistungsoptimierung von Webflow zu chatten (das ist irgendwie unser Ding). Wir werden versuchen, uns so schnell wie möglich bei dir zu melden.

Denke daran, im How-To-Bereich unseres Blogs nach weiteren Tutorials zu suchen. Wir haben Beiträge zu allem, von der Tag-Manager-Setup bis hin zur dynamischen Schriftgröße.

Bis zum nächsten Mal, baue weiter. ✌️

Diese Tests wurden zum Zeitpunkt der Veröffentlichung durchgeführt, also sollte all der übliche Mist, den ich zu einem bestimmten Zeitpunkt auf unserer Website teste, laufen.

‍