Cloudflare-Bildoptimierung für Webflow: Unser Worker-Skript von 2023

December 6, 2023

· 12 min

Das Cloudflare-Worker-Skript, mit dem wir 2023 Webflow-Bilder über Cloudflare Image Resizer optimiert und gecacht haben, plus DNS- und Worker-Einrichtung und eine kurze FAQ.

Update, Oktober 2026: Seit ich das geschrieben habe, hat sich einiges getan. Der neuere Ansatz steht in Kostenlose Webflow-Bildoptimierung mit Cloudflare (2026): unser Open-Source-O2O-Worker. Der Rest dieses Beitrags gilt weiterhin als Dokumentation dessen, wie wir es damals gemacht haben.

Ursprünglicher Beitrag

Heute werfen wir einen Blick ins Innere eines Cloudflare-Worker-Skripts, mit dem wir Bilder in unserem Webflow-Projekt optimieren. Es ist ein bisschen so, als würde man unter die Motorhaube eines Sportwagens schauen, nur dass wir statt Öl und Kolben mit JavaScript und regulären Ausdrücken zu tun haben.

Wir haben bereits einen ausführlichen Beitrag zur Einrichtung von Cloudflare geschrieben, hier gehen wir aber anders vor. Den ursprünglichen Beitrag dazu, wie du Webflow in Cloudflare cachest und mit der Cassette App in Cloudflare deine Assets vom Webflow CDN cachest, findest du hier: Webflow mit Cloudflare nutzen, um dein Webflow-Projekt zu cachen und zu beschleunigen

Die Methode aus dem vorherigen Beitrag beruhte darauf, mit Cassette alle Webflow-Assets auf einer Subdomain deiner Wahl zu cachen. Das konnte für kleine Webflow-Agenturen oder Freelancer, die mit so etwas wenig Erfahrung haben, ein bisschen kompliziert werden. Die Methode unten ist zwar nicht ganz so kompliziert, aber du musst trotzdem unseren Code anpassen, damit er für dich funktioniert. Dafür gehen wir hier anders vor.

Die anfängliche DNS-Einrichtung bleibt gleich, wir fassen sie am Ende dieses Beitrags kurz zusammen, aber ab da trennen sich die Wege. Statt uns auf Cloudflares Cassette App zu verlassen, die deine Assets cacht und dann die Links in deinem Code ersetzt, konzentrieren wir uns bei diesem neuen Ansatz nur auf Bilder und cachen oder ersetzen keine CSS-Dateilinks, JavaScript-Dateien oder Schriften. Manche hatten Probleme damit, dass Cloudflares Rocket Loader ihren Code später geladen und damit Interaktionen usw. durcheinandergebracht hat. Falls es dir schwergefallen ist, die betreffenden JS- und CSS-Dateien auszuschließen, funktioniert diese Methode vielleicht besser für dich.

Hier nutzen wir einen Cloudflare Worker, um alle Links zu Bildern zu finden, die keine SVGs sind (SVGs sind ohnehin schon optimiert, wir cachen sie aber trotzdem). Anschließend werden die Bilder mit dem Cloudflare Image Resizer optimiert, indem alle Bildlinks in deinem Webflow-Projekt durch Cloudflare-Image-Resizer-Links ersetzt werden. So kann Cloudflare nicht nur Bilder optimieren, die nicht auf deiner Domain liegen (der Webflow-CDN-Domain), sondern sie auch für die spätere Nutzung cachen.

Klingt spaßig, oder? Zur Erinnerung: Genau wie bei unserem anderen Beitrag ist das hier fortgeschritten, also lies bitte aufmerksam. Legen wir los!

Unser Webflow-Cloudflare-Image-Resizer-Worker-Skript

Das obige Skript läuft gerade bei Milk Moon Studio, deshalb ist es auf uns zugeschnitten. Du müsstest an zwei Stellen in diesem Skript unsere Domain ersetzen, milkmoonstudio.com, und eventuell beide regulären Ausdrücke im Skript anpassen, falls deine Bilder nicht auf https://assets.website-files.com oder deren Prod-Domains liegen wie bei uns. Dazu später mehr.

Was macht der Cloudflare Worker eigentlich?

Unser Skript hält ständig Ausschau nach Fetch-Events. Kommt eines rein, springt es sofort an und ruft unsere Funktion „handleRequest“ auf.

Unsere handleRequest-Funktion ist wie ein persönlicher Assistent: Sie holt die Anfrage und prüft deren „Content-Type“. Findet sie keinen „Content-Type“, geht sie einfach von einem leeren String aus.

Sagt uns der „Content-Type“, dass es ein HTML-Dokument ist, holen wir uns den Text der Antwort. Das ist, als würde man das Paket öffnen und nachsehen, was drin ist.

Hier fangen wir an zu optimieren. Wir finden alle Bild-URLs, die auf das Webflow CDN zeigen, und ersetzen sie durch URLs, die auf unseren Cloudflare Worker zeigen. Das ist, als würde man die Post zu einer effizienteren Poststelle umleiten.

Als Nächstes nehmen wir uns die srcset-Attribute vor. Sie können mehrere URLs enthalten, deshalb nutzen wir eine Funktion, die jede einzelne ersetzt. Das ist, als hätte man eine Adressliste und würde jede Adresse auf einen neuen Ort ändern. Das hat bei der früheren Cloudflare-Umsetzung mit Cassette einige Probleme gemacht. Webflow erzeugt SRC Sets. Im Grunde ist das eine Liste verschiedener Größen jedes Bildes im Projekt, angepasst an unterschiedliche Bildschirmbreiten. Diese Optimierung auf Webflow-Seite führte allerdings dazu, dass Cassette nur einen oder zwei Bildlinks in einem SRC Set ersetzte und die anderen übersah. Wir haben hier auf breite Treffer gesetzt und viel experimentiert, um mit diesem Teil das komplette Set zu erwischen, während der Codeblock darüber nach Bildern ohne SRC Sets sucht. So haben wir alle Seiten abgedeckt.

Sobald wir alle Ersetzungen erledigt haben, packen wir alles in eine neue Antwort und schicken sie los. Das ist, als würden wir den geöffneten Karton wieder zupacken und zum Ziel schicken.

Ist unser Paket kein HTML-Dokument, schicken wir es einfach weiter, ohne es zu öffnen. Geht etwas schief, protokollieren wir den Fehler und geben eine 500-Antwort zurück. Das ist, als würden wir sagen: „Ups, da ist etwas schiefgelaufen. Wir versuchen es später noch einmal.“

Und das war's! So optimiert unser Cloudflare-Worker-Skript Bilder in unseren Webflow-Projekten. Es ist ein bisschen wie eine supereffiziente Poststelle, die Post umleitet und dafür sorgt, dass alles so schnell und effizient wie möglich ankommt.

Update: assets.website-files.com, assets-global.website-files.com und cdn.prod.website-files.com

Wir wurden vor Kurzem tatsächlich einfach so von assets auf assets-global umgestellt, deshalb habe ich unten ein aktualisiertes Worker-Skript eingefügt und wir haben auch die neue https://cdn.prod.website-files.com ergänzt. Passe es einfach mit deiner eigenen Domain an:

Die Schritte zur Umsetzung

Was musst du also abgesehen davon tun?

Richte die nötigen DNS-Einstellungen in Cloudflare ein, damit Caching möglich ist.
Ersetze im Code milkmoonstudio.com durch deine eigene Domain.
Wenn deine Assets nicht auf assets.website-files.com liegen wie unsere damals, aktualisiere beide Sets regulärer Ausdrücke, die nach den Webflow-CDN-URLs suchen. Wir haben versucht, so viele CDNs wie möglich aufzunehmen, aber vielleicht haben wir welche übersehen.
Füge den Cloudflare Worker hinzu! Den kostenpflichtigen Worker, denk daran.
Aktiviere Image Resizer / Image Transformations, das ist kostenpflichtig.

1. Webflow-DNS-Einstellungen in Cloudflare

So, Leute, jetzt machen wir uns bei den DNS-Einstellungen die Hände schmutzig. Du denkst dir vielleicht: „Moment mal, haben wir das nicht schon in einem früheren Beitrag behandelt?“ Und du hättest recht! Aber wir bringen etwas Abwechslung rein und wiederholen es noch einmal für alle, die keine Zeit haben, auch noch unseren ursprünglichen Beitrag zu Webflow und Cloudflare Caching zu lesen.

Webflow gibt dir hier ein paar Anweisungen. Du sollst zwei A-Records und einen CNAME-Record hinzufügen, wenn du SSL im Hosting-Tab von Webflow aktivierst (und heutzutage bekommst du auch einen TXT-Record). Außerdem sollst du das Proxying in Cloudflare ausschalten (das ist das orangefarbene Wolkensymbol). Wir gehen aber eigene Wege und ignorieren das alles.

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

Webflow-DNS-Einstellungen

Wir sagen zu diesen Anweisungen aber: „Danke, nein danke!“ Das solltest du stattdessen tun:

Schalte zuerst unten im Hosting-Tab SSL aus und klicke auf Save.

SSL deaktivieren

Kopiere als Nächstes die neuen A-Record-Adressen und die CNAME-Einstellungen:

Die Nicht-SSL-DNS-Einstellungen von Webflow speichern

Setz jetzt das SSL-Häkchen wieder und speichere. Die Einstellungen springen auf die ursprünglichen SSL-Einstellungen zurück, aber die ignorierst du einfach.
Wechsle zu Cloudflare und füge die Nicht-SSL-DNS-Einstellungen hinzu. Es sollte ungefähr so aussehen:

Webflow-DNS-Einstellungen in Cloudflare hinzufügen

Den passenden TXT-Record kannst du so hinzufügen, wie Webflow es verlangt: proxy-ssl.webflow.com.
Achte darauf, dass bei den Einträgen Proxied aktiviert ist, obwohl die Cloudflare-Anweisungen von Webflow etwas anderes sagen.
Öffne in Cloudflare den Tab mit den SSL/TLS-Einstellungen und aktiviere Full:

SSL in Cloudflare auf Full stellen

Geh zurück zum Hosting-Tab von Webflow.
Puh, das sind ja ganz schön viele Probleme! Keine Sorge, ignoriere sie einfach und veröffentliche die Website.

Die DNS-Fehler in Webflow ignorieren

Und das war's! Du hast dich erfolgreich durch die wilde Welt der Cloudflare-DNS-Einstellungen für Webflow gekämpft. Klopf dir auf die Schulter, du cachst jetzt auf Cloudflare, na ja, abgesehen von den Assets.

2. Das Cloudflare-Worker-Skript mit deiner eigenen Domain aktualisieren

Hier musst du nur die Stelle mit milkmoonstudio.com finden, es sind zwei, und durch den Domainnamen ersetzen, den du in Cloudflare hast. Sie steht mitten im Skript, dort, wo der Worker nach den Bild-URLs sucht und sie ersetzt. Hier ist sie:

3. Beide Sets regulärer Ausdrücke aktualisieren

Das hier ist sehr, sehr wichtig. Bei uns hat das Webflow CDN alle Assets des Projekts auf https://assets.website-files.com abgelegt, aber das ist nicht immer so und ändert sich von Projekt zu Projekt. Genau wie in unserem anderen Cloudflare-Beitrag musst du das also an die Domain anpassen, auf der deine Bilder liegen. Du kannst den Code untersuchen oder ein Bild in einem neuen Tab öffnen, um nachzusehen. Verbreitete Webflow-CDN-Domains sind:

https://assets.website-files.com
https://website-files.com
https://uploads-ssl.webflow.com
https://global-uploads.webflow.com
https://cdn.prod.website-files.com

Wir haben keine Ahnung, wie viele es gibt oder wie sie ausgewählt werden, aber diese haben wir schon gesehen.

Wenn du Glück hast, kennst du dich ein bisschen mit regulären Ausdrücken aus, dann ist die Anpassung leicht. Wenn nicht, schau dir die Beispiele unten an, damit solltest du es hinbekommen. Du musst beide aktualisieren, und im Grunde ist das hier das, wonach der Cloudflare Worker sucht:

Reguläre Ausdrücke für https://assets.website-files.com

Reguläre Ausdrücke für https://assets.website-files.com

Reguläre Ausdrücke für https://global-uploads.webflow.com

Je nach Domain deiner CDN-Assets musst du vielleicht ein bisschen herumprobieren, und ja, wir sind darin auch schlecht, ich meine \/[^\s"']+\ 🤮

4. Den Cloudflare Worker und die Worker-Route hinzufügen

Du hast also die DNS-Änderungen gemacht, das Skript aktualisiert und solltest jetzt so etwas haben:
<iframe height="300" style="width: 100%;" scrolling="no" title="Cloudflare Image Resizer - Worker Script" src="https://codepen.io/milkmoonstudio/embed/LYXrvaW?default-tab=js" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/LYXrvaW">
Cloudflare Image Resizer - Worker Script</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

Und jetzt? Du musst 4 Dinge tun: einen Cloudflare-Worker-Plan hinzufügen, Image Resizing aktivieren, den Worker erstellen und die Worker-Route hinzufügen.

Geh zu Workers & Pages, klicke auf Plans und füge einen Plan hinzu. Es gibt einen kostenlosen Tarif. Ob das funktioniert, wissen wir nicht, wir haben einen Plan, du kannst also den kostenlosen Tarif ausprobieren und uns Bescheid geben.

Auswahl des Cloudflare-Worker-Plans

Öffne als Nächstes die Einstellungen deiner Domain, geh zu Speed, Optimization und dann Image Optimization und aktiviere Image Resizing:

Image Resizing aktivieren

Als Nächstes erstellst du den Worker und fügst das Skript hinzu. Geh zurück ins Hauptmenü und dann zu Workers & Pages. Klicke auf Create Application und dann auf Create Worker.

Eine Worker-Anwendung erstellen

Einen Cloudflare Worker erstellen

Gib ihm einen Namen und klicke auf Deploy.

Den Cloudflare Worker benennen

Bearbeite den Code, lösche, was dort steht, füge dein Skript ein und klicke dann auf Save and Deploy.

Das Skript zum Worker hinzufügen

Geh zum Schluss zurück zu den Einstellungen deiner Website, wähle den Tab Workers Routes und füge eine Route hinzu. Wähle den Worker aus und gib ihm die Route. Ich will, dass er überall läuft, deshalb hat er Platzhalter: *.milkmoonstudio.com/*

Die Worker-Route hinzufügen

Jetzt bist du fertig und kannst die Website testen, um zu sehen, ob es funktioniert.

Die Image-Resizer-Einstellungen ändern (optional)

Wenn du dir die eigentliche Image-Resizer-URL im Worker-Skript ansiehst, mit der wir das Webflow-Bild im Seitencode ersetzen, siehst du, dass wir recht einfache Einstellungen verwenden:

https://milkmoonstudio.com/cdn-cgi/image/f=auto,quality=90/

F steht für Format und bei uns steht dort Auto, also prüft Cloudflare Browser, Gerät, Verbindung usw. und entscheidet über ein Format. AVIF wird nach dem Best-Effort-Prinzip geliefert, sonst WebP usw., sofern unterstützt. Außerdem gibt es Einschränkungen bei Bildgröße und Abmessungen, wenn es um die Konvertierung zu AVIF usw. geht. Du siehst auch, dass wir die Bilder verlustbehaftet mit 80 % Qualität ausgeben. Es gibt noch sehr, sehr viele weitere Optionen, die du in Cloudflares Dokumentation zum URL-Format findest und ergänzen kannst. Denk nur daran, dich bei der gewünschten Option an das URL-Format zu halten, denn du setzt die Option in eine URL ein.

Jetzt kannst du mit Page Rules alles cachen (heutzutage geht das mit Cache Rules, da Page Rules auslaufen). Mehr dazu in unserem ursprünglichen Cloudflare-Caching-Beitrag, schau dort rein, wenn du Hilfe brauchst.

Schreib gern einen Kommentar und sieh dir unsere anderen Beiträge rund um Cloudflare an:

Kostenlose Webflow-Bildoptimierung mit Cloudflare (2026): unser Open-Source-O2O-Worker

Webflow mit Cloudflare nutzen, um dein Webflow-Projekt zu cachen und zu beschleunigen

Mehr Seitengeschwindigkeit: Cloudflare Zaraz & Google Analytics

Wir planen eine Video-Anleitung, also bleib dran.

Am einfachsten testest du dein Setup mit der DrFlare Extension. Starte DrFlare über die Dev Tools und lade die Seite neu. Du siehst detaillierte Statistiken und kannst mit der Maus über Bilder usw. fahren, um sie direkt auf der Seite zu analysieren.

Häufig gestellte Fragen

Wie optimiere ich Webflow-Bilder mit Cloudflare?

Du setzt einen Cloudflare Worker vor deine Website, der jeden Webflow-CDN-Bildlink in einen Cloudflare-Image-Resizer-Link umschreibt, sodass Cloudflare die Bilder für dich konvertiert, komprimiert und cacht. Genau das macht das Skript oben. Wenn du heute neu anfängst, nutze stattdessen den Leitfaden 2026 zu Cloudflare-Asset-Proxy und Optimierung.

Was ist cdn.prod.website-files.com?

Das ist eine der Webflow-CDN-Domains, über die deine hochgeladenen Bilder, Dateien und Schriften ausgeliefert werden. Welche Domain ein Projekt nutzt, ist unterschiedlich, deshalb müssen die regulären Ausdrücke in Schritt 3 zu deiner passen.

Brauche ich dafür einen kostenpflichtigen Cloudflare-Plan?

Nicht unbedingt. Laut Cloudflares Preisen deckt der kostenlose Workers-Plan 100.000 Anfragen pro Tag ab und Image Transformations enthält 5.000 einzigartige Transformationen pro Monat, sodass eine kleine Website es kostenlos ausprobieren kann. Wir nutzen einen kostenpflichtigen Workers-Plan, und stärker frequentierte Websites werden einen brauchen.

Funktioniert dieses Webflow-und-Cloudflare-Bild-Setup noch?

Als wir es geschrieben haben, ja, und der Ansatz ist nach wie vor so, wie wir Bilder optimieren, aber die Details haben sich geändert. Aus Cloudflare Image Resizer ist jetzt Image Transformations geworden, Page Rules werden durch Cache Rules ersetzt, und unser aktueller Worker signiert seine Bild-URLs und läuft auf Webflows Orange-to-Orange-Setup. Der Leitfaden 2026 deckt das alles ab.

Mehr zum größeren Thema Geschwindigkeit findest du in unserem Beitrag dazu, wie Seitengeschwindigkeit den Geschäftserfolg antreibt, und in dem Beitrag zum Leeren deines DNS-Caches nach einer Webflow-Veröffentlichung. Wenn wir das für dich einrichten sollen, melde dich bei uns.