Optimisation d’images Cloudflare pour Webflow : script Worker 2023

December 6, 2023

· 12 min

Le script Cloudflare Worker utilisé en 2023 pour optimiser et mettre en cache les images Webflow avec Cloudflare Image Resizer, avec les étapes DNS et Worker et une courte FAQ.

Mise à jour, octobre 2026 : les choses ont évolué depuis que j’ai écrit ce billet. La nouvelle approche se trouve dans Optimisation d'images Webflow gratuite avec Cloudflare (2026) : notre Worker O2O open source. Le reste de cet article demeure valable comme trace de la façon dont nous procédions à l’époque.

Article d’origine

Aujourd’hui, on part pour un voyage magique au cœur d’un script Cloudflare Worker que nous utilisons pour optimiser les images de notre projet Webflow. C’est un peu comme jeter un œil sous le capot d’une voiture de sport, sauf qu’au lieu d’huile et de pistons, on a affaire à du JavaScript et à des expressions régulières.

Nous avons déjà publié un article détaillé sur la configuration de Cloudflare, mais ici, on change d’approche. Pour l’article d’origine sur la mise en cache de Webflow sur Cloudflare et l’utilisation de l’app Cassette dans Cloudflare pour mettre en cache les assets hébergés sur le CDN de Webflow, rendez-vous sur cet article : Utiliser Webflow avec Cloudflare pour mettre en cache et accélérer votre projet Webflow

La méthode de l’article précédent reposait sur Cassette pour mettre en cache tous les assets Webflow sur un sous-domaine de votre choix. Ça pouvait devenir un peu compliqué pour les petites agences Webflow ou les freelances qui n’ont pas beaucoup d’expérience dans ce domaine, et si ce qui suit est moins compliqué, il faut quand même modifier notre code pour l’adapter à votre cas. Avec la méthode ci-dessous, on adopte une approche différente.

La configuration DNS initiale reste la même, et nous en ferons un bref rappel à la fin de cet article, mais le reste du processus diverge à partir de là. Au lieu de compter sur l’app Cassette de Cloudflare pour mettre en cache vos assets puis remplacer les liens dans votre code, cette nouvelle approche ne s’occupe que des images : nous ne mettons pas en cache ni ne remplaçons les liens des fichiers CSS, JavaScript ou des polices. Certains ont rencontré des problèmes parce que Rocket Loader de Cloudflare chargeait leur code plus tard, ce qui perturbait les interactions, etc. Si vous avez eu du mal à exclure les bons fichiers JS et CSS, cette méthode pourrait donc mieux vous convenir.

Ici, un Cloudflare Worker repère tous les liens vers des images qui ne sont pas des SVG (déjà optimisés par nature, mais nous mettons quand même les SVG en cache). Il les optimise ensuite avec Cloudflare Image Resizer en remplaçant tous les liens d’images de votre projet Webflow par des liens Cloudflare Image Resizer. Cloudflare peut ainsi non seulement optimiser des images qui ne sont pas sur votre nom de domaine (celui du CDN de Webflow), mais aussi les mettre en cache pour la suite.

Ça vous tente ? Petit rappel : comme pour notre autre article, c’est un sujet avancé, alors lisez attentivement. C’est parti !

Notre script Worker Cloudflare Image Resizer pour Webflow

Le script ci-dessus est celui qui tourne actuellement sur Milk Moon Studio, il est donc configuré pour nous. Vous devrez remplacer notre domaine, milkmoonstudio.com, à deux endroits dans ce script, et éventuellement mettre à jour les deux expressions régulières du script si vos images ne sont pas hébergées sur https://assets.website-files.com ou sur leurs domaines prod, comme c’est le cas de nos assets. On y revient plus loin.

Voyons ce que fait le Cloudflare Worker

Notre script guette en permanence les événements fetch. Quand l’un d’eux arrive, il passe à l’action et appelle notre fonction ‘handleRequest’.

Notre fonction handleRequest est comme un assistant personnel : elle récupère la requête et vérifie son 'Content-Type'. Si elle ne trouve aucun 'Content-Type', elle considère simplement qu’il s’agit d’une chaîne vide.

Si le 'Content-Type' nous indique qu’il s’agit d’un document HTML, nous récupérons le texte de la réponse. C’est comme ouvrir le colis pour voir ce qu’il contient.

C’est ici que l’optimisation commence. Nous repérons toutes les URL d’images qui pointent vers le CDN de Webflow et les remplaçons par des URL qui pointent vers notre Cloudflare Worker. C’est comme rediriger le courrier vers un bureau de poste plus efficace.

Ensuite, on s’attaque aux attributs srcset. Ils peuvent contenir plusieurs URL, donc nous utilisons une fonction pour remplacer chacune d’elles. C’est comme avoir une liste d’adresses et mettre à jour chacune avec un nouvel emplacement. Cela posait problème dans la précédente implémentation Cloudflare avec Cassette. Webflow génère des SRC Sets, c’est-à-dire une liste de différentes tailles de chaque image du projet, redimensionnées pour différentes largeurs d’écran. Cette optimisation côté Webflow faisait toutefois que Cassette ne remplaçait qu’un ou deux liens d’image dans un SRC Set et manquait les autres. Nous avons visé des correspondances larges et beaucoup expérimenté pour attraper l’ensemble complet avec cette partie, tandis que le bloc de code ci-dessus cherche les images qui n’ont pas de SRC Sets, de façon à couvrir tous les cas.

Une fois tous nos remplacements effectués, on remballe le tout dans une nouvelle réponse et on l’envoie à son destinataire. C’est comme refermer la boîte que nous avions ouverte et l’expédier à sa destination finale.

Si notre colis n’est pas un document HTML, on l’envoie simplement sans l’ouvrir. Si quelque chose tourne mal, nous consignons l’erreur et renvoyons une réponse 500. C’est comme dire : « Oups, un problème est survenu. On réessaiera plus tard. »

Et voilà ! C’est ainsi que notre script Cloudflare Worker optimise les images de nos projets Webflow. C’est un peu comme un bureau de poste ultra-efficace, qui redirige le courrier et s’assure que tout arrive à destination aussi vite et aussi bien que possible.

Mise à jour : assets.website-files.com, assets-global.website-files.com et cdn.prod.website-files.com

Nous avons récemment été basculés, sans raison apparente, de assets vers assets-global. Voici donc un script Worker mis à jour ci-dessous, auquel nous avons aussi ajouté le nouveau https://cdn.prod.website-files.com. Il suffit de l’adapter avec votre domaine personnalisé :

Étapes de mise en œuvre

Alors, à part ça, que faut-il faire ?

Configurer les paramètres DNS nécessaires dans Cloudflare pour autoriser la mise en cache.
Remplacer milkmoonstudio.com dans le code par votre propre domaine.
Si vos assets ne sont pas hébergés sur assets.website-files.com comme l’étaient les nôtres, mettez à jour les deux jeux d’expressions régulières qui recherchent les URL du CDN de Webflow. Nous avons essayé d’ajouter autant de CDN que possible, mais il se peut que nous en ayons oublié.
Ajouter le Cloudflare Worker ! Un Worker payant, n’oubliez pas.
Activer Image Resizer / Image Transformations, c’est payant.

1. Paramètres DNS de Webflow dans Cloudflare

Bon, c’est parti, on met les mains dans les paramètres DNS. Vous vous dites peut-être : « Attendez, on n’a pas déjà vu ça dans un article précédent ? » Et vous avez raison ! Mais on va bousculer un peu les choses et le remettre ici pour ceux qui n’ont pas le temps de lire aussi notre article d’origine sur la mise en cache de Webflow avec Cloudflare.

Webflow va vous donner quelques instructions ici. Il vous dira d’ajouter deux enregistrements A et un enregistrement CNAME quand vous activez le SSL dans l’onglet Hosting de Webflow (et aujourd’hui, il fournit aussi un enregistrement TXT). Il vous dira aussi de désactiver le proxy sur Cloudflare (c’est l’icône du nuage orange). Mais nous, on va faire cavalier seul et ignorer tout ça.

Quand vous activez le SSL, vous verrez des instructions qui ressemblent à ceci :

Paramètres DNS de Webflow

Mais nous allons répondre « Non merci ! » à ces instructions. Voici ce qu’il faut faire à la place :

Pour commencer, désactivez le SSL en bas de l’onglet Hosting et cliquez sur Save.

Désactiver le SSL

Ensuite, copiez les nouvelles adresses des enregistrements A et les paramètres CNAME :

Enregistrer les paramètres DNS Webflow sans SSL

Réactivez maintenant la case SSL et enregistrez. Vous verrez les paramètres revenir aux paramètres SSL initiaux, mais ignorez-les.
Rendez-vous dans Cloudflare et ajoutez les paramètres DNS sans SSL. Ça devrait ressembler à ceci :

Ajouter les paramètres DNS de Webflow à Cloudflare

Vous pouvez ajouter l’enregistrement TXT correct, comme Webflow le demande : proxy-ssl.webflow.com.
Assurez-vous que l’option Proxied est activée pour ces entrées, même si les instructions Cloudflare de Webflow disent le contraire.
Allez dans l’onglet des paramètres SSL/TLS de Cloudflare et activez le mode Full :

Régler le SSL sur Full dans Cloudflare

Retournez dans l’onglet Hosting de Webflow.
Aïe, ça fait beaucoup de problèmes ! Mais pas de panique, ignorez-les et publiez le site.

Ignorer les erreurs DNS de Webflow

Et voilà ! Vous avez réussi à vous en sortir dans le monde sauvage des paramètres DNS de Cloudflare pour Webflow. Félicitez-vous, vous mettez maintenant en cache sur Cloudflare, enfin, sauf les assets.

2. Remplacer le domaine dans le script Cloudflare Worker par le vôtre

Il suffit ici de repérer la partie milkmoonstudio.com (il y en a deux) et de la remplacer par le nom de domaine que vous avez dans Cloudflare. Elle se trouve en plein milieu, là où le Worker cherche les URL d’images pour les remplacer. La voici ci-dessous :

3. Mettre à jour les deux jeux d’expressions régulières

C’est très, très important. Dans notre cas, le CDN de Webflow stockait tous les assets du projet sur https://assets.website-files.com, mais ce n’est pas toujours le cas et cela varie d’un projet à l’autre. Comme dans notre autre article sur Cloudflare, vous devrez donc adapter cela en fonction du domaine sur lequel vos images sont hébergées. Vous pouvez inspecter le code, ou ouvrir une image dans un nouvel onglet pour vérifier. Voici des domaines de CDN Webflow courants :

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

Nous n’avons aucune idée du nombre exact ni de la façon dont ils sont choisis, mais ce sont quelques-uns de ceux que nous avons croisés.

Si vous avez de la chance, vous vous y connaissez un peu en expressions régulières et la mise à jour sera facile. Sinon, jetez un œil aux exemples que nous avons rassemblés ci-dessous, vous devriez vous en sortir. Il faudra mettre à jour les deux, et voici en gros ce que le Cloudflare Worker va chercher :

Expressions régulières pour https://assets.website-files.com

Expressions régulières pour https://assets.website-files.com

Expressions régulières pour https://global-uploads.webflow.com

Selon le domaine de votre CDN d’assets, il faudra peut-être bricoler un peu, et oui, on est nuls là-dedans aussi, je veux dire, regardez ça : \/[^\s"']+\ 🤮

4. Ajouter le Cloudflare Worker et la route du Worker

Vous avez donc fait les modifications DNS, mis à jour le script, et vous devriez avoir quelque chose comme ceci :
<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>

Et maintenant ? Il y a 4 choses à faire : ajouter un plan Cloudflare Workers, activer Image Resizing, créer le Worker et ajouter la route du Worker.

Rendez-vous dans Workers & Pages, cliquez sur Plans et ajoutez un plan. Il existe une offre gratuite. Aucune idée si ça fonctionnera, nous avons un plan payant, donc vous pouvez essayer l’offre gratuite et nous dire ce qu’il en est.

Choix du plan Cloudflare Workers

Ensuite, ouvrez les paramètres de votre domaine, allez dans Speed, Optimization puis Image Optimization, et activez Image Resizing :

Activer Image Resizing

L’étape suivante consiste à créer le Worker et à y ajouter le script. Retournez au menu principal, puis dans Workers & Pages. Cliquez sur Create Application, puis sur Create Worker.

Créer un Cloudflare Worker

Donnez-lui un nom et cliquez sur Deploy.

Nommer le Cloudflare Worker

Modifiez le code, supprimez ce qui s’y trouve, collez votre script, puis cliquez sur Save and Deploy.

Ajouter le script au Worker

Enfin, retournez à la page des paramètres de votre site, sélectionnez l’onglet Workers Routes et ajoutez une route. Sélectionnez le Worker et donnez-lui la route. Je veux qu’il tourne partout, donc il y a des jokers : *.milkmoonstudio.com/*

Ajouter la route du Worker

Voilà, c’est terminé, vous pouvez tester le site pour vérifier que ça fonctionne.

Modifier les paramètres d’Image Resizer (facultatif)

Si vous regardez l’URL Image Resizer réelle dans le script Worker que nous utilisons pour remplacer l’image Webflow dans le code de la page, nous utilisons des paramètres assez basiques :

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

F correspond au format et nous avons mis Auto : Cloudflare vérifie donc le navigateur, l’appareil, la connexion, etc. et choisit un format. L’AVIF est fourni au mieux, sinon WebP, etc. selon la prise en charge. Il existe aussi des restrictions de taille et de dimensions d’image pour la conversion en AVIF, etc. Vous verrez aussi que nous avons rendu les images avec perte à 80 % de qualité. Il existe beaucoup, beaucoup d’autres options que vous pouvez consulter dans la documentation Cloudflare sur le format d’URL et ajouter. N’oubliez pas, en regardant l’option que vous voulez mettre en œuvre, de suivre le format d’URL, puisque vous placez cette option dans une URL.

Vous pouvez maintenant utiliser les Page Rules pour tout mettre en cache (aujourd’hui, on passe par les Cache Rules, car les Page Rules sont progressivement supprimées). On en parle plus en détail dans notre article d’origine sur la mise en cache avec Cloudflare, allez le consulter si vous avez besoin d’aide.

N’hésitez pas à laisser un commentaire ci-dessous et à consulter nos autres articles sur Cloudflare :

Optimisation d'images Webflow gratuite avec Cloudflare (2026) : notre Worker O2O open source

Utiliser Webflow avec Cloudflare pour mettre en cache et accélérer votre projet Webflow

Accélérez votre site : Cloudflare Zaraz & Google Analytics

Nous prévoyons de faire un tutoriel vidéo, restez à l’écoute.

Le moyen le plus simple de tester votre configuration est d’utiliser l’extension DrFlare. Lancez DrFlare depuis les outils de développement et actualisez la page. Vous verrez des statistiques détaillées et pourrez survoler les images, etc. pour une analyse directement sur le site.

Questions fréquentes

Comment optimiser les images Webflow avec Cloudflare ?

Vous placez un Cloudflare Worker devant votre site, qui réécrit chaque lien d’image du CDN de Webflow en lien Cloudflare Image Resizer, de sorte que Cloudflare convertit, compresse et met en cache les images pour vous. C’est ce que fait le script ci-dessus. Si vous partez de zéro aujourd’hui, utilisez plutôt le guide 2026 du proxy d’assets et de l’optimisation Cloudflare.

Qu’est-ce que cdn.prod.website-files.com ?

C’est l’un des domaines du CDN de Webflow depuis lesquels sont servis les images, fichiers et polices que vous importez. Le domaine utilisé varie d’un projet à l’autre, c’est pourquoi les expressions régulières de l’étape 3 doivent correspondre au vôtre.

Faut-il un plan Cloudflare payant pour cela ?

Pas forcément. D’après la tarification de Cloudflare, le plan gratuit de Workers couvre 100 000 requêtes par jour et Image Transformations inclut 5 000 transformations uniques par mois, un petit site peut donc l’essayer gratuitement. Nous utilisons un plan Workers payant, et les sites plus fréquentés en auront besoin d’un.

Cette configuration d’images Webflow et Cloudflare fonctionne-t-elle toujours ?

Oui quand nous l’avons écrite, et l’approche reste celle que nous utilisons pour optimiser les images, mais les détails ont changé. Cloudflare Image Resizer s’appelle désormais Image Transformations, les Page Rules sont remplacées par les Cache Rules, et notre Worker actuel signe ses URL d’images et fonctionne avec la configuration Orange-to-Orange de Webflow. Le guide 2026 couvre tout cela.

Pour en savoir plus sur la vitesse en général, consultez notre article sur l’impact de la vitesse des pages sur la réussite d’une entreprise, et sur la purge du cache DNS après une publication Webflow. Si vous voulez que nous configurions tout cela pour vous, contactez-nous.

Optimisation d’images Cloudflare pour Webflow : notre script Worker Image Resizer expliqué