Steigern Sie die Webflow-Geschwindigkeit mit Cloudflare: Entpacken Sie unseren Bildoptimierer

April 2, 2024

· 10 min

Tauchen Sie mit uns in die Feinheiten unseres Cloudflare Worker-Skripts zur Bildoptimierung ein und zeigen Sie, wie es die Leistung Ihrer Website verbessern kann.

Heute begeben wir uns auf eine magische Reise in das Herz eines Cloudflare-Worker-Skripts, mit dem wir Bilder in unserem Webflow-Projekt optimiert haben. Es ist ein bisschen wie ein Blick unter die Motorhaube eines Sportwagens, nur dass wir es statt mit Öl und Kolben mit JavaScript und regulären Ausdrücken zu tun haben.

Wir haben bereits einen ausführlichen Beitrag zur Einrichtung von Cloudflare verfasst, aber hier werden wir einen anderen Ansatz verfolgen. Den ursprünglichen Beitrag zur Zwischenspeicherung von Webflow auf Cloudflare und zur Verwendung der Cassette-App in Cloudflare zum Zwischenspeichern Ihrer Assets, die auf dem Webflow-CDN in Cloudflare gespeichert sind, finden Sie in diesem Beitrag: Verwenden Sie Webflow mit Cloudflare, um Ihr Webflow-Projekt zwischenzuspeichern und zu beschleunigen

Die im vorherigen Beitrag verwendete Methode beruhte auf der Verwendung von Cassette, um alle Webflow-Assets auf einer Subdomain Ihrer Wahl zwischenzuspeichern. Für kleine Webflow-Agenturen oder Freelancer, die nicht viel Erfahrung mit solchen Dingen haben, könnte es etwas kompliziert werden. Obwohl das Folgende nicht so kompliziert ist, müssen Sie dennoch unseren Code bearbeiten, damit er für Sie funktioniert. Mit der folgenden Methode werden wir einen anderen Ansatz verwenden.

Der anfängliche DNS-Setup-Prozess bleibt derselbe, und wir werden am Ende dieses Beitrags einen kurzen Überblick geben, aber der Rest des Einrichtungsprozesses zweigt dort ab. Anstatt uns auf die Cassette-App von Cloudflare zu verlassen, um Ihre Assets zwischenzuspeichern und dann die Links in Ihrem Code zu ersetzen, konzentrieren wir uns bei diesem neuen Ansatz nur auf Bilder und wir werden keine CSS-Dateilinks, Javascript-Dateien oder Schriftarten zwischenspeichern und ersetzen. Einige Leute hatten Probleme, bei denen Cloudflares Rocket Loader ihren Code später laden würde, wenn er mit Interaktionen usw. herumgespielt hat. Wenn Sie also Schwierigkeiten hatten, die relevanten JS- und CSS-Dateien auszuschließen, funktioniert diese Methode möglicherweise besser für Sie.

Hier verwenden wir einen Cloudflare-Worker, um alle Links zu Bildern zu finden, die keine SVGs sind (und daher bereits optimiert, wir cachen die SVGs immer noch), er optimiert sie dann mit dem Cloudflare Image Resizer, indem er alle Bildlinks in Ihrem Webflow-Projekt durch Cloudflare Image Resizer-Links ersetzt. Dadurch kann Cloudflare nicht nur Bilder optimieren, die nicht auf Ihrem Domainnamen (der Webflow-CDN-Domain) stehen, sondern auch um sie für die zukünftige Verwendung zwischenzuspeichern.

Klingt lustig, oder? Nur zur Erinnerung, genau wie unser anderer Beitrag das ist fortgeschritten, bitte sorgfältig lesen. Lass uns eintauchen!

Unser Webflow Cloudflare Image Resizer Worker-Skript

Das obige Skript zeigt, was gerade auf Milk Moon Studio läuft, daher ist es für uns eingerichtet. Du müsstest ersetze unsere Domain, milkmoonstudio.com an zwei Stellen in diesem Skript und möglicherweise aktualisiere beide regulären Ausdrücke im Skript wenn Ihre Bilder nicht auf https://gespeichert sindassets.website-files/ so wie es unsere Vermögenswerte sind. Dazu später mehr.

Mal sehen, was der Cloudflare Worker macht

Unser Script ist immer auf der Suche nach Fetch-Events. Wenn einer reinkommt, wird es aktiv und ruft unser 'Anfrage bearbeiten' Funktion.

Unsere HandleRequest-Funktion ist wie ein persönlicher Assistent, der die Anfrage abruft und ihre 'Inhaltstyp'. Wenn es kein 'finden kannInhaltstyp', es geht nur davon aus, dass es sich um eine leere Zeichenfolge handelt.

Wenn der 'Inhaltstyp'sagt uns, es ist ein HTML-Dokument, wir erhalten den Text der Antwort. Das ist, als würde man das Paket öffnen und nachschauen, was drin ist.

Hier beginnen wir mit der Optimierung. Wir finden alle Bild-URLs, die auf das Webflow-CDN verweisen, und ersetzen sie durch URLs, die auf unseren Cloudflare-Worker verweisen. Das ist so, als würde man die Post an ein effizienteres Postamt umleiten.

Als Nächstes befassen wir uns mit den srcset-Attributen. Diese können mehrere URLs enthalten, daher verwenden wir eine Funktion, um jede einzelne zu ersetzen. Es ist, als ob wir eine Liste von Adressen haben und jede Adresse an einem neuen Ort aktualisieren. Dies führte zu einigen Problemen in der vorherigen Cloudflare-Implementierung mit Cassette. Webflow generiert SRC-Sets. Im Wesentlichen eine Liste verschiedener Größen der einzelnen Bilder im Projekt, deren Größe für verschiedene Bildschirmbreiten angepasst wurde. Diese Optimierung auf der Webflow-Seite bedeutete jedoch, dass Cassette nur ein oder zwei Bildlinks in einem SRC-Set ersetzte und dann andere übersah. Wir haben versucht, hier möglichst viele Übereinstimmungen zu erzielen und viel experimentiert, um das komplette Set mit diesem Bit abzufangen, während der obige Codeblock nach Bildern gesucht hat, die keine SRC-Sets haben, sodass unsere Grundlagen an allen Enden abgedeckt sind.

Sobald wir alle unsere Ersetzungen durchgeführt haben, packen wir alles wieder in eine neue Antwort ein und schicken sie auf den Weg. Es ist, als würde man unsere geöffnete Schachtel neu verpacken und an ihren Bestimmungsort schicken.

Wenn unser Paket kein HTML-Dokument ist, schicken wir es einfach auf den Weg, ohne es zu öffnen. Wenn etwas schief geht, protokollieren wir den Fehler und geben eine 500er-Antwort zurück. Es ist, als würde man sagen: „Hoppla, etwas ist schief gelaufen. 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 ein supereffizientes Postamt, das E-Mails umleitet und dafür sorgt, dass alles so schnell und effizient wie möglich dort ankommt, wo es hingehört.

Update: asset.website-files/ assets-global.website-files/

Wir wurden kürzlich zufällig von Assets auf Assets-Global umgestellt, daher habe ich unten ein aktualisiertes Worker-Skript, das sich um beide URL-Sätze kümmert. Passen Sie es einfach mit Ihrer benutzerdefinierten Domain an:

Schritte zur Umsetzung

Also, abgesehen davon, was müssen Sie tun?

Richten Sie die erforderlichen DNS-Einstellungen in Cloudflare ein, um Caching zu ermöglichen.
Aktualisiere den Code mit deiner eigenen Domain statt milkmoonstudio.com
Wenn Ihr Vermögen nicht gespeichert ist auf assets.website-files/ Aktualisieren Sie wie bei uns beide Sätze regulärer Ausdrücke, die nach den Webflow-CDN-URLs suchen. Wir haben versucht, so viele CDNs wie möglich hinzuzufügen, haben aber vielleicht einige übersehen.
Füge den Cloudflare Worker hinzu! Bezahlter Arbeiter, denk daran.
Schalten Sie Image Resizer/Image Transformations ein, es ist kostenpflichtig.

1. Webflow-DNS-Einstellungen in Cloudflare

In Ordnung, Leute, es ist Zeit, sich mit einigen DNS-Einstellungen die Hände schmutzig zu machen. Jetzt denken Sie vielleicht: „Moment mal, haben wir das nicht in einem früheren Beitrag behandelt?“ Und du hättest recht! Aber wir werden die Dinge durcheinander bringen und es wieder hinzufügen für diejenigen, die keine Zeit dazu haben lies auch diesen Beitrag.

Jetzt gibt Ihnen Webflow hier ein paar Anweisungen. Sie werden Ihnen sagen, dass Sie zwei A-Einträge und einen CNAME-Eintrag hinzufügen sollen, wenn Sie SSL in Ihrem Webflow-Hosting-Tab aktivieren (und heutzutage erhalten Sie auch einen TXT-Eintrag). Sie werden dir auch sagen, dass du die Proxyfunktion auf Cloudflare ausschalten sollst (das ist das orangefarbene Wolkensymbol). Aber wir werden abtrünnig werden und all das ignorieren.

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

Webflow-DNS-Einstellungen

Aber wir werden sagen: „Danke, aber nein danke!“ zu diesen Anweisungen. Folgendes sollten Sie stattdessen tun:

Schalten Sie zunächst SSL unten auf dem Hosting-Tab aus und klicken Sie auf Speichern.

SSL deaktivieren

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

Speichern Sie die Webflow-DNS-Einstellungen ohne SSL

Schalten Sie nun das SSL-Kontrollkästchen wieder ein und speichern Sie. Sie werden sehen, dass die Einstellungen auf die ursprünglichen SSL-Einstellungen zurückgesetzt werden, aber ignorieren Sie diese einfach.
Gehen Sie zu Cloudflare und fügen Sie die Nicht-SSL-DNS-Einstellungen hinzu. Es sollte ungefähr so aussehen:

Webflow-DNS-Einstellungen zu Cloudflare hinzufügen

Sie können den richtigen TXT-Datensatz hinzufügen, wie Webflow gefragt hat: proxy-ssl.webflow.com.
Stellen Sie sicher, dass für die Einträge Proxied aktiviert ist, auch wenn Ihnen die Cloudflare-Anweisungen von Webflow etwas anderes sagen.
Gehen Sie in Cloudflare zum Tab SSL/TLS-Einstellungen und aktivieren Sie Vollständig:

Stellen Sie SSL in Cloudflare auf Vollständig ein

Kehren Sie zum Hosting-Tab von Webflow zurück.
Huch, das sind eine Menge Probleme! Aber mach dir keine Sorgen, ignoriere sie einfach und veröffentliche die Seite.

Ignoriere die Webflow-DNS-Fehler

Und das war's! Sie haben sich erfolgreich in der wilden Welt der Cloudflare-DNS-Einstellungen für Webflow zurechtgefunden. Klopfen Sie sich selbst auf die Schulter, Sie cachen jetzt auf Cloudflare, weit weg von den Assets.

2. Aktualisieren Sie das Cloudflare Worker Script mit Ihrer eigenen Domain.

Alles, was Sie hier tun müssen, ist das milkmoonstudio.com-Bit zu finden, es gibt zwei und es in Ihren Domainnamen zu ändern, den Sie in Cloudflare haben. Es ist genau in der Mitte, wo der Worker nach den Bild-URLs sucht und sie ersetzt. Hier ist es unten:

3. Aktualisieren Sie beide Sätze regulärer Ausdrücke

Das ist also sehr, sehr wichtig. In unserem Fall hat das Webflow-CDN alle Assets für das Projekt auf https://assets.website-files.com gespeichert, aber das ist nicht immer der Fall und variiert von Projekt zu Projekt. Genau wie in unserem anderen Cloudflare-Beitrag müssen Sie dies also je nach der Domain ändern, auf der Ihre Bilder gespeichert sind. Sie können den Code überprüfen oder ein Bild in einem neuen Tab öffnen, um dies zu überprüfen. Beliebte Webflow-CDN-Domains sind:

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

Wir haben keine Ahnung, wie viele es sind oder wie sie ausgewählt wurden, aber das sind einige, die wir gesehen haben.

Wenn Sie Glück haben, wissen Sie etwas über reguläre Ausdrücke und es wird einfach sein, sie zu aktualisieren. Wenn nicht, schauen Sie sich einige der Beispiele an, die wir unten zusammengestellt haben. Sie sollten in der Lage sein, es herauszufinden. Sie müssen beide aktualisieren und das ist im Grunde das, wonach der Cloudflare Worker suchen wird:

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

Abhängig von Ihrer CDN-Asset-Domain müssen Sie vielleicht ein bisschen herumspielen, und ja, wir sind auch schlecht darin, ich meine\/[^\ s"'] +\ 🤮

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

Sie haben also die DNS-Änderungen vorgenommen, das Skript aktualisiert und sollten 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">
Den Stift ansehen <a href="https://codepen.io/milkmoonstudio/pen/LYXrvaW">
</a><a href="https://codepen.io/milkmoonstudio">Cloudflare Image Resizer — Worker-Skript von Jakes van Eeden (@milkmoonstudio)</a>
auf <a href="https://codepen.io">CodePen</a>.
</iframe>

Was jetzt? Du wirst 4 Dinge tun müssen. Fügen Sie einen Cloudflare-Worker-Plan hinzu, aktivieren Sie die Bildgrößenänderung, erstellen Sie den Worker und fügen Sie die Worker-Route hinzu.

Gehen Sie zu Workers & Pages, klicken Sie auf Pläne und fügen Sie einen Plan hinzu. Es gibt ein kostenloses Kontingent, keine Ahnung, ob das funktioniert. Wir haben ein Abo, du kannst das kostenlose Kontingent ausprobieren und uns das wissen lassen.

Auswahl des Cloudflare Worker-Tarifs

Öffnen Sie als Nächstes Ihre Domain-Einstellungen, gehen Sie zu Geschwindigkeit, Optimierung und dann zu Bildoptimierung und aktivieren Sie die Bildgrößenänderung:

Bildgrößenänderung aktivieren

Der nächste Schritt besteht darin, den Worker zu erstellen und das Skript hinzuzufügen. Gehen Sie zurück zum Hauptmenü und dann zu Workers & Pages. Klicken Sie auf „Anwendung erstellen“ und dann auf „Worker erstellen“.

Eine Worker-Anwendung erstellen

Einen Cloudflare-Worker erstellen

Geben Sie ihm einen Namen und stellen Sie es bereit.

Nennen Sie den Cloudflare-Worker

Bearbeiten Sie den Code und entfernen Sie, was darin enthalten war, fügen Sie Ihr Skript ein und klicken Sie dann auf Speichern und Bereitstellen.

Fügen Sie das Skript zum Worker hinzu

Kehren Sie abschließend zu Ihrer Website-Einstellungsseite zurück, wählen Sie den Tab Workers Routes und fügen Sie eine Route hinzu. Wähle den Arbeiter aus und gib ihm die Route. Ich möchte, dass er überall läuft, also hat er Platzhalter: *.milkmoonstudio.com/*

Fügen Sie die Worker-Route hinzu

Jetzt bist du fertig und kannst die Seite testen, um zu sehen, ob sie funktioniert.

Ändern Sie die Image Resizer-Einstellungen — optional

Wenn Sie sich die tatsächliche Image Resizer-URL in dem Worker-Skript ansehen, das wir verwenden, um das Webflow-Bild im Seitencode zu ersetzen, verwenden wir ziemlich grundlegende Einstellungen:

https://milkmoonstudio.com/cdn-cgi/image/f=auto, Qualität=90/

F steht für Format und wir haben Auto, also überprüft es den Browser, das Gerät, die Verbindung usw. und entscheidet sich für ein Format. Avif wird nach bestem Bemühen erstellt, ansonsten WebP usw., wenn es Unterstützung gibt. Es gibt auch Einschränkungen in Bezug auf Bildgröße und Abmessung, wenn es um die Konvertierung für Aif usw. geht. Sie werden auch sehen, dass wir die Bilder bei einer Qualität von 80% mit Verlusten versehen haben. Es gibt viele, viele weitere Optionen, die Sie haben finden Sie hier und füge hinzu. Denken Sie beim Betrachten der Option daran, dass Sie das URL-Format implementieren möchten, wenn Sie die angegebene Option in einer URL platzieren.

Du kannst jetzt Seitenregeln verwenden, um alles zwischenzuspeichern. Mehr dazu in unserem anderen Cloudflare-Beitrag. Schau ihn dir an, wenn du Hilfe benötigst.

Hinterlassen Sie unten einen Kommentar und schauen Sie sich unsere anderen Beiträge zum Thema Cloudflare an:

Beschleunigen Sie den Webflow mit Cloudflare: Cache & Optimize

Steigern Sie die Seitengeschwindigkeit: Cloudflare Zaraz & Google Analytics

Wir planen, eine Videoanleitung zu machen, also bleiben Sie dran.

Der einfachste Weg, Ihr Setup zu testen, ist die Verwendung des DrFlare-Erweiterung. Starten Sie DrFlare von Dev Tools aus und aktualisieren Sie die Seite. Sie sehen detaillierte Statistiken und können den Mauszeiger über Bilder usw. bewegen, um sie vor Ort zu analysieren.