Cloudflare Image Resizing Für WordPress

Ich veröffentliche diesen Artikel aufgrund der vielen Anfragen, die ich bezüglich Cloudflare Image Resizing und meines WordPress-Plugins erhalten habe.

Aufgrund der Architektur von WordPress ist es nicht möglich, mein Plugin mit allem da draußen kompatibel zu machen, daher untersuchen wir in diesem Artikel eine andere Methode über Cloudflare Workers.

Bitte beachten Sie, dass ich absichtlich zu viele technische Details weggelassen habe, damit jeder es verstehen kann; seien wir ehrlich, nicht jeder ist Entwickler. Ich halte Artikel gerne kurz, einfach und auf den Punkt.

Am Ende des Artikels können Sie einfach kopieren, einfügen und mit einem Klick Cloudflare Image Resizing für Ihr WordPress richtig einrichten.

Was ist Cloudflare Image Resizing

Zur Erinnerung: Mit Cloudflare Image Resizing können Sie Bilder auf der Edge-Plattform von Cloudflare transformieren. Sie können Bilder auf Abruf skalieren, die Qualität anpassen und in WebP- oder AVIF-Format konvertieren.

Cloudflare speichert automatisch jedes abgeleitete Bild am Edge im Cache, sodass Sie nur ein Originalbild auf Ihrem Ursprungsserver speichern müssen.

Es ist wirklich ein unverzichtbarer Dienst für stark frequentierte Blogs wie WordPress, besonders wenn Sie es als Shop mit vielen Bildern verwenden.

Lesen Sie mehr darüber im Offiziellen Beitrag .

Warum Cloudflare Image Resizing verwenden

Der Hauptgrund ist Geschwindigkeit. Nehmen wir zum Beispiel an, dass Ihre Website 5 Seiten hat und jede Seite 10 Bilder enthält, die von 1 MB bis 5 oder sogar 10 MB pro Bild reichen.

Wenn jemand Ihre Seiten zum ersten Mal besucht, werden all diese Bilder von Ihrem Browser heruntergeladen. Eine Seite hat also zum Beispiel 10 Bilder, jedes 1 MB groß; das sind 10 MB nur für Bilder zum Herunterladen.

Das ist sehr schlecht für Nutzer mit geringer Bandbreite, besonders für mobile Nutzer. Es ist sogar für PC-Nutzer mit viel Bandbreite schlecht. Niemand möchte eine langsam ladende Website sehen, und es entspricht nicht den Webstandards.

Ich bin mir ziemlich sicher, dass Sie täglich viele solcher Websites sehen, die ewig laden. Der Hauptgrund sind Medien-Assets (wie CSS, JS, Bilder) neben anderen Faktoren wie langsamem Webhosting usw.

Sie denken vielleicht: “Aber ich nutze ein CDN?!”, nun, das ist nicht dasselbe. Cloudflare Image Resizing ist nicht nur ein CDN, es verändert Ihre Bilder, um sie besser zu machen.

Mit Cloudflare Image Resizing werden Ihre Bilder on-the-fly in der Größe reduziert, sodass ein 1-MB-Bild auf etwa ~100/200 KB schrumpft. Sie werden auch in Next-Generation-Formaten wie WebP und AVIF ausgeliefert.

Zusammengefasst:

• Verbessert Ihre Bilder
• Beschleunigt Ihre Website
• Verbessert Ihre SEO
• Spart Bandbreite

WordPress Plugin

Sie kennen wahrscheinlich das Plugin, das ich für WordPress erstellt habe, aus meinem Github / WordPress Plugins Verzeichnis.

Es hat viel Feedback erhalten und viele haben ihre Website erheblich beschleunigt, aber viele sind auch auf viele Probleme gestoßen, die buchstäblich unlösbar sind.

Obwohl ich alles Mögliche versucht habe, um alle Bilder zu skalieren, ist es nicht möglich, alle zu skalieren, weil WordPress-Plugins und -Themes so konzipiert sind.

Ganz zu schweigen davon, dass CSS-Verarbeitung und andere Dinge außer Frage stehen.

Cloudflare Worker

Nach Durchsicht aller gemeldeten Probleme habe ich mich entschieden, den anderen Weg zu gehen und einen Cloudflare Worker zu verwenden, um die endgültige HTML-Ausgabe für Cloudflare Image Resizing umzuschreiben.

Dies ist die ultimative Lösung für die Verwendung von Cloudflare Image Resizing auf WordPress, da der Worker die endgültige Antwort von WordPress abruft, einschließlich aller Änderungen durch Plugins, Themes, CSS usw.

Da der Cloudflare Worker zwischen Ihrem WordPress und den Nutzern sitzt, haben Sie die Möglichkeit, fast alles on-the-fly zu ändern; das bedeutet, wir können sogar Bilder innerhalb von Inline-CSS und sogar CSS-Dateien ersetzen.

Theoretisch klingt es einfach und unkompliziert, aber in der Praxis war es viel schwieriger und zeitaufwändiger.

Dennoch habe ich viel Zeit und Mühe investiert, um herauszufinden, wie dieses Ziel erreicht werden kann.

WordPress Plugin vs. Cloudflare Worker

Es ist äußerst vorteilhaft, wenn Sie die Unterschiede zwischen dem WordPress Plugin und dem Cloudflare Worker verstehen können. So können Sie entscheiden, welches Sie verwenden möchten, und verstehen, warum ich den Worker empfehle.

Wie Sie oben sehen können, gewinnt der Worker. Es ist einfach die beste Lösung, denn egal welche Änderungen Sie an Ihrem Backend (WordPress) vornehmen, der Worker kann die Bildlinks ändern.

Cloudflare Worker einrichten

Das Erste und Wichtigste, was Sie tun müssen, ist das WordPress Plugin zu deaktivieren, falls Sie es installiert und aktiviert haben. Wenn Sie diesen Schritt überspringen, werden Sie nicht viel vom Worker sehen.

Das Zweite und sehr Wichtige ist, zu Google Pagespeed zu gehen und einen Test Ihrer Website ohne Image Resizing durchzuführen. Sie werden dies später benötigen, um den Unterschied zu sehen.

Gehen Sie nun zu Ihrem Cloudflare-Konto und navigieren Sie zu Workers. Klicken Sie dort auf “Create a Service”. Benennen Sie den Dienst wie Sie möchten, Sie können auch den automatisch generierten Zufallsnamen belassen. Lassen Sie den Starter als “HTTP handler”.

Nach der Erstellung klicken Sie auf den Dienst und oben rechts auf “Quick Edit”. Der Editor wird angezeigt und wählen Sie einfach den gesamten vorhandenen Code aus und ersetzen Sie ihn durch meinen Worker von Github . Klicken Sie auf “Save and deploy” und verlassen Sie den Editor.

Auf Ihrer neuen Dienstseite gehen Sie zu “Triggers” und klicken Sie unter Routes auf “Add route”. In der Route setzen Sie Ihre Website-Domain mit einem Wildcard-Match-All, zum Beispiel "example.com/*". Für die Zone wählen Sie Ihre Domain, die in meinem Beispiel example.com ist.

Das war’s!

Fehlerbehebung

Falls Sie Probleme haben, wie z.B. dass keine Bilder skaliert werden, überprüfen Sie folgende Bedingungen:

1. Ist das Bild Teil Ihrer Domain? Sie können keine Bilder von einer anderen Domain skalieren, es sei denn, Sie haben diese Funktion im Cloudflare-Dashboard ausdrücklich aktiviert.
2. Werden Bilder umgeschrieben? Aktivieren Sie "Logs" auf Ihrem neuen Worker-Tab und sehen Sie nach, ob Sie Ausnahmen entdecken. Falls ja, melden Sie es in meinem Github-Repository.
3. Werden die Bildlinks falsch umgeschrieben? In diesem Fall melden Sie das Problem auf Github.

Bonus-Optimierungen

Ich bin mir ziemlich sicher, dass Sie bemerkt haben, dass Ihr WordPress einige leere SVG-Tags direkt nach dem HTML-Body-Tag enthält. Falls Sie nicht wissen, wovon ich spreche, schauen Sie sich das an:

Ehrlich gesagt kann ich keinen gültigen Anwendungsfall dafür erkennen; daher habe ich zusätzlichen Code hinzugefügt, um es zu entfernen. Es wird Ihre HTML-Ausgabe etwas kleiner machen, was zu einer kleinen zusätzlichen Geschwindigkeitssteigerung führt.

Ich werde weitere Optimierungen hinzufügen, wenn ich Zeit habe.

Kosten

Um Cloudflare Image Resizing nutzen zu können, benötigen Sie zum Zeitpunkt dieses Artikels ein Pro-Abonnement (25$/Monat) für Ihre Website. Der Image-Resizing-Dienst beginnt bei 5$ pro 100.000 gespeicherte Bilder und 1$ pro 100.000 ausgelieferte Bilder – ohne Egress-Kosten oder zusätzliche Gebühren für Skalierung und Optimierung.

Die Nutzung des WordPress Plugins ist völlig kostenlos und verursacht keine Kosten. Der Worker ist ebenfalls relativ kostenlos nutzbar, allerdings sind die Limits kleiner und die Verarbeitungsleistung etwas geringer.

Ich empfehle dringend, den kostenpflichtigen Workers-Plan mit der Unbound-Option zu verwenden. Je mehr Bilder Sie auf Ihrer Seite haben, desto mehr HTML-Tags müssen umgeschrieben werden und somit mehr Verarbeitungszeit (GBs Duration).

Bedenken Sie, dass Sie für nur 5$ ein Worker-Limit von 400.000 GB-s erhalten, was nach meinen Tests mehr als ausreichend ist.

Lizenz

Ich habe mich entschieden, nicht die MIT-Lizenz zu verwenden, weil ich bemerkt habe, dass viele meinen Code nehmen und verkaufen. Nicht cool, Leute.

Daher ist das neue Lizenzmodell Apache License 2.0, also bitte verkaufen Sie meine Arbeit nicht weiter.

Nützliche Links

• Webpagetest: https://www.webpagetest.org/
• Google Pagespeed Insights: https://pagespeed.web.dev/
• Workers-Preise: https://developers.cloudflare.com/workers/platform/pricing/

Ich bin fest davon überzeugt, dass mein Cloudflare Worker Ihre Website erheblich verbessern wird. Wenn ich Recht habe, hinterlassen Sie einen Stern auf Github. Wenn ich falsch liege, hinterlassen Sie stattdessen Feedback.

Ich warte auf Ihre Kommentare.