Cache Cloudflare pour Webflow : comment accélérer un site en 2022

December 6, 2023

· 23 min

Notre solution de contournement de 2022 pour faire passer Webflow par le proxy Cloudflare afin de mettre en cache et d'optimiser images et ressources, avec les réglages Cloudflare que nous recommandions alors.

Mise à jour, octobre 2026 : les choses ont évolué depuis la rédaction de cet article. La nouvelle approche est décrite dans Optimisation d'images Webflow gratuite avec Cloudflare (2026) : notre Worker O2O open source. Le reste de cet article reste valable comme trace de la façon dont nous procédions à l'époque.

Article d'origine

Cloudflare pose quelques problèmes, et nous allons commencer par les lister, puis voir comment les corriger, avec quelques options avancées que vous devriez sans doute activer. Mais d'abord, commençons par énumérer plusieurs raisons pour lesquelles nous adorons Cloudflare.

Des options de sécurité nettement renforcées.
Le CNAME Flattening, qui permet à votre projet Webflow d'être sur milkmoonstudio.com et non sur www.milkmoonstudio.com
Une excellente mise en cache dans les centres de données et sur le réseau de périphérie de Cloudflare. Nous ne plaisantons pas, leur réseau est immense. 80 % des sites proxifiés utilisent Cloudflare, soit 20 % des sites web d'Internet.
Des réglages avancés de mise en cache dans le navigateur.
Always Online, qui enregistre des versions de votre site dans la Wayback Machine de l'Internet Archive.
Argo Smart Routing, qui repère les nœuds du réseau susceptibles d'être en panne et optimise l'acheminement du trafic, pour encore plus de vitesse.
Une excellente optimisation de la vitesse grâce à la minification, à la compression, à l'optimisation des images, etc..
La protection contre les bots.
Le CDN de Cloudflare présent dans 310 villes et plus de 120 pays, Chine comprise. Nous le répétons volontairement.
Zaraz comme alternative à Google Tag Manager. Nous l'avons essayé et, même s'il est moins facile à prendre en main quand on a l'habitude des déclencheurs avancés de Tag Manager, il peut pratiquement tout faire, et oui, nos tests ont montré un gain de vitesse net. Pensez à Tag Manager côté serveur, sans le serveur ni son coût. Nous avons publié un court article sur l'utilisation de Zaraz avec Google Analytics 4 sur Webflow, à lire ici.
Les Page Rules.

Nous pourrions continuer longtemps, il y a tellement de fonctionnalités que nous n'allons pas toutes les énumérer (nous avons ajouté une brève liste de réglages Cloudflare recommandés tout à la fin de l'article).

Alors, si tout cela est si bien, pourquoi si peu d'utilisateurs de Webflow utilisent-ils Cloudflare ? C'est là que les problèmes commencent. Si vous consultez les instructions de configuration DNS de Cloudflare pour Webflow, vous remarquerez tout de suite une chose : elles vous demandent de désactiver le proxy Cloudflare (le nuage orange).

Cela signifie que Cloudflare ne gère plus que votre DNS, exactement comme GoDaddy ou n'importe quel autre registraire. Pas terrible. Cloudflare propose le DNS le plus rapide qui soit, mais c'est tout : vous ne pourrez profiter d'aucune des améliorations de performance.

D'après ce que nous avons pu comprendre, le problème de la « désactivation du proxy » tient au renouvellement du certificat SSL de Webflow. Si Cloudflare fait transiter le contenu par son proxy, l'utilisateur ne se connecte pas à votre site d'origine sur Webflow et le mécanisme de renouvellement SSL de Webflow cesse de fonctionner. Tout peut donc bien se passer pendant un mois, puis tout le monde se met à recevoir des erreurs SSL. Nous avons une solution simple et rapide pour cela, que nous détaillerons plus loin. En tout cas, avec notre contournement, nous n'avons eu aucun problème depuis des années.

Deuxième problème : le CDN de Webflow. Webflow héberge son contenu sur AWS mais, comme vous vous en doutez, l'entreprise ne va pas mettre en place un CDN pour chaque projet créé sur Webflow. Tout le monde partage donc un même bucket. Si vous inspectez votre site, vous remarquerez que tout ce qui compte, de votre CSS à vos images et vidéos, se trouve sur website-files.com ou assets.website-files.com (quelques domaines circulent) et non sur votre domaine, c'est-à-dire que nos assets ne sont pas hébergés sur milkmoonstudio.com. Ce n'est pas vraiment un problème au quotidien, mais quand vous utilisez Cloudflare, le contenu que Cloudflare doit optimiser doit se trouver sur votre domaine. Si nous avons un compte Cloudflare pour milkmoonstudio.com, mais que chaque image et chaque fichier CSS se trouvent dans un dossier sur website-files.com, Cloudflare ne peut appliquer d'optimisations et de mise en cache qu'à vos fichiers HTML, et à rien d'autre. Donc, là encore, aucune optimisation.

Voyons comment résoudre ces problèmes du point de vue d'un designer Webflow, et non d'un développeur full-stack.

Mise à jour importante

Avant de vous lancer dans ce qui suit, sachez que cette méthode utilise une application Cloudflare pour mettre en cache tous vos assets sur Cloudflare. La version actuelle de Cloudflare Apps est en cours d'abandon. Cloudflare a annoncé qu'une nouvelle expérience d'applications la remplacera. En attendant, vous pouvez utiliser un Cloudflare Worker pour obtenir les mêmes résultats, et nous avons déjà un article qui détaille ce processus. Sachez toutefois que c'est un peu plus technique que d'ajouter une application. Nous avons créé un Cloudflare Worker pour optimiser vos images avec Cloudflare Image Resizer. Certains diront que c'est plus simple, et même si cela reste avancé, vous pouvez lire cet article complet ici. Vous rencontrerez probablement moins de problèmes si vous avez du mal avec Rocket Loader, qui perturbe l'ordre de chargement des scripts, par exemple. Quoi qu'il en soit, suivez ce guide jusqu'à l'étape de configuration de l'application, puis passez à l'article sur le Worker d'optimisation des images pour la suite. Nous mettrons cet article à jour quand la nouvelle expérience Cloudflare Apps sera prête, pour que vous puissiez choisir la voie de l'application si vous le souhaitez.

Réglages DNS de Cloudflare pour Webflow

(Un avertissement pour 2026 : Webflow a depuis migré son hébergement sur Cloudflare et prend désormais officiellement en charge le nuage orange grâce à Orange-to-Orange, ou O2O, avec des enregistrements CNAME proxifiés qui pointent vers cdn.webflow.com. Sautez donc ces étapes DNS sur un site aujourd'hui et suivez plutôt notre guide Cloudflare 2026.)

On va vous dire de suivre ici deux séries d'instructions : les 2 enregistrements A et l'enregistrement CNAME que Webflow vous donne quand vous activez le SSL dans l'onglet Hosting des paramètres de votre projet (les choses ont un peu changé depuis notre rédaction : il y a maintenant aussi un enregistrement TXT, que vous pouvez reprendre tel quel dans Cloudflare), puis la consigne de désactiver le proxy sur Cloudflare (en désactivant l'icône de nuage orange) selon les instructions de Webflow. Nous allons vous demander d'ignorer les deux.

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

Réglages DNS de Webflow

Ignorez-les !

Étape 1 : au lieu de suivre les instructions SSL, désactivez le SSL en bas de l'onglet Hosting. Cliquez sur Save.

Désactiver le SSL

Copiez les nouvelles adresses des enregistrements A et les réglages CNAME :

Enregistrer les réglages DNS Webflow sans SSL

Enregistrez les réglages sans SSL, puis recochez la case SSL et sauvegardez. Vous verrez les réglages revenir aux réglages SSL initiaux. Pas d'inquiétude, ignorez-les simplement.

(Vous pourriez laisser les réglages sans SSL. Cloudflare gérera le certificat SSL et redirigera tout correctement, mais une chose cessera de fonctionner : votre fichier sitemap.xml utilisera http au lieu de https. Cloudflare redirigera quand même correctement, mais Google Search Console s'en plaindra.)

Réactivez donc le SSL pour que le sitemap fonctionne, et vous ne rencontrerez aucun problème.

Rendez-vous dans Cloudflare et ajoutez les réglages DNS sans SSL. Le résultat devrait ressembler à ceci :

Ajouter les réglages DNS Webflow dans Cloudflare

Vérifiez que l'option Proxied est activée pour les entrées, contrairement aux instructions Cloudflare de Webflow.
Ouvrez l'onglet des réglages SSL/TLS dans Cloudflare et activez Full :

Régler le SSL sur Full dans Cloudflare

Nous voulons maintenant purger les réglages DNS pour que vos réglages Webflow se propagent immédiatement. Commencez par aller sur https://1.1.1.1/purge-cache/, puis, par précaution, sur https://cachecheck.opendns.com/ & https://developers.google.com/speed/public-dns/cache (nous avons un article entier sur la façon de vider votre cache DNS pour Webflow, à consulter si c'est nouveau pour vous).
Sur chacun de ces sites, saisissez votre domaine nu, purgez l'enregistrement A, puis l'enregistrement CNAME. Si vous utilisez un sous-domaine www comme nous, utilisez aussi le domaine complet (donc www.milkmoonstudio.com) et purgez également ses enregistrements. Enfin, purgez l'enregistrement TXT.
Après la grande purge, retournez dans l'onglet Hosting de Webflow.

Ignorer les erreurs DNS de Webflow

Oh NON ! Tant de problèmes. Qui s'en soucie ? Ignorez-les et publiez le site.

Ouvrez votre site en ligne et vérifiez les réglages SSL en cliquant sur le cadenas :

Vérifier le certificat SSL

Et voilà, tout est en ordre.

Nous avons donc Webflow qui passe par Cloudflare, en mode proxifié, mais hélas, nous avons oublié que le contenu doit se trouver sur votre domaine pour que Cloudflare puisse appliquer ses améliorations de performance. Pour l'instant, tout arrive encore via website-files.com.

Si vous voulez de l'aide pour configurer les améliorations de performance, les Page Rules, etc., regardez le tutoriel vidéo en haut de cet article pour un aperçu détaillé de ce que vous pouvez appliquer, ou rendez-vous directement sur YouTube.

Deuxième problème : faire passer les assets du CDN de Webflow (images, etc.) par votre nom de domaine dans Cloudflare pour profiter de toutes les améliorations de performance de Cloudflare

Il y a donc deux façons d'aborder cela. Si vous savez ce que vous faites, vous pouvez écrire un Cloudflare Worker qui surveille le CDN de Webflow, récupère le contenu, le stocke sur Cloudflare, puis le peaufine, etc. Milk Moon Studio est un petit studio Webflow et, comme beaucoup dans la communauté Webflow, nous aimons nous concentrer sur le design et avons choisi Webflow pour son côté no-code, ou du moins low-code. Nous optons donc pour la deuxième option : demander à quelqu'un d'autre de le faire. Heureusement pour nous, quelqu'un l'a fait, puis a créé une application Cloudflare que vous pouvez simplement installer sur Cloudflare et utiliser gratuitement. Elle s'appelle Cassette, de Network Chimp. Attention : l'expérience actuelle des applications est en cours d'abandon et sera remplacée par une nouvelle expérience. En attendant, vous pouvez aussi utiliser notre script Cloudflare Worker pour obtenir des résultats similaires.‍

Ouvrez l'onglet Apps dans Cloudflare et cherchez Cassette. Elle est gratuite tant que vous utilisez un seul bucket, ce qui sera notre cas, donc aucun souci. C'est celle-ci :

Ajouter l'application Cassette

Appliquez les réglages suivants dans l'application :

Configurer Cassette dans Cloudflare

Créez un sous-domaine sur votre domaine où Cassette placera les fichiers venant de Website-Files.com (ou de ce que Webflow utilise pour vos fichiers ; il suffit d'inspecter la page ou d'ouvrir une image dans un nouvel onglet pour vérifier l'URL). Saisissez-le simplement ici, et Cassette demandera l'autorisation de le créer quand vous appliquerez les réglages. Vérifiez que le sous-domaine n'existe pas déjà. Cassette doit gérer cette partie.
Indiquez à Cassette où Webflow stocke les fichiers.

C'est tout. Chaque fois qu'une page de votre site se charge, Cassette vérifie website-files.com et, s'il trouve de nouveaux fichiers, les conserve sur le sous-domaine. Le bémol, c'est que cela peut prendre un peu de temps, mais maintenant que les fichiers chargés dans le navigateur se trouvent sur votre domaine, vous pouvez leur appliquer tous les réglages et toutes les règles Cloudflare que vous créez. (Pour en revenir au bémol du délai : si au bout d'un jour environ vous constatez que Cassette ne met pas en cache et n'optimise pas certains fichiers, ce que vous pouvez vérifier avec l'extension Chrome Dr.Flare, c'est généralement parce que Webflow publie un jeu d'images src avec des tailles optimisées pour différentes largeurs d'écran. Il arrive que Cassette rate une image ou deux dans ce jeu. Vous pouvez désactiver cela dans Webflow, ou utiliser quelque chose comme les embeds Cloudflare Image Resizing pour contourner le problème. Nous y revenons plus bas. Sinon, la méthode du script Worker règle ce point, car le Worker que nous avons créé repère les images seules comme les jeux d'images src.)

Nous n'allons pas passer en revue toutes les améliorations de performance et toutes les Page Rules que vous pouvez créer dans Cloudflare. Faites-vous plaisir. Un seul conseil : si vous décidez de créer des règles qui mettent votre site fortement en cache, créez une Page Rule pour votre fichier sitemap.xml qui contourne complètement le cache. Ainsi, si vous créez par exemple un nouvel article de blog, la dernière version du sitemap sera toujours disponible pour Google, et non un vieux fichier sitemap datant de 3 semaines si vos réglages de cache sont agressifs. Placez la Page Rule du sitemap au-dessus des autres Page Rules à cache intensif, car les règles s'appliquent en cascade, de haut en bas. Il en va de même si vous avez activé un flux RSS : contournez le cache pour l'URL du flux. La mise en cache complète n'a lieu que si vous configurez des Page Rules dans Cloudflare, y appliquez les optimisations et sélectionnez Cache Everything. (Cloudflare a depuis abandonné les Page Rules au profit des Cache Rules, donc aujourd'hui vous les construiriez sous forme de Cache Rules. Attention : une Cache Rule réglée sur Eligible for cache active Cache Everything par défaut.)

Comme nous l'avons dit, l'application Cassette mettra un certain temps à tout mettre en cache sur votre nouveau sous-domaine et pourra rater un fichier ici ou là. Nous supposons que vous pourriez accélérer les choses en rechargeant toutes les pages plusieurs fois si vous le souhaitez (nous avons mis à jour cet article en bas de page pour vous aider à vous assurer que ces images manquées sont bien mises en cache sur Cloudflare). Nous, nous allons simplement attendre quelques jours et lancer un test Lighthouse pour voir la vitesse du site.

Bon, 2 secondes plus tard... nous avons construit une machine à voyager dans le temps, attendu 3 jours, lancé un test Lighthouse, puis nous sommes revenus dans le passé et avons téléversé les résultats du test :

Scores Google PageSpeed après la configuration de Cassette

Très bien. Pourquoi 98 pour cent ? Eh bien, nous trouvons que c'est déjà très bon, mais oui, nous avons constaté une erreur d'image mal dimensionnée dans Lighthouse que nous sommes trop paresseux pour corriger juste pour faire étalage des résultats. Google Search Console va vous adorer.

Si vous avez des questions, posez-les dans les commentaires. Pour d'autres tutoriels, consultez ces articles, et si vous utilisez Tag Manager et voulez essayer d'accélérer encore un peu les choses, vous pouvez lire notre article sur les déclencheurs différés de Tag Manager. Et si vous devez convaincre un client (ou votre patron) que tout cela vaut la peine, nous avons écrit sur la façon dont la vitesse d'un site fait le succès d'une entreprise.

Mise à jour : corriger l'impossibilité pour Cassette de créer le sous-domaine requis

Si vous rencontrez l'erreur mentionnée plus haut, où Cassette indique qu'il ne peut pas créer le sous-domaine défini dans Cassette, suivez simplement ces étapes ou regardez la vidéo tutoriel.

‍Ce problème n'apparaît plus, mais nous le conservons ici à titre de référence.

Quand l'erreur apparaît, ignorez-la et créez le sous-domaine manuellement.
Cassette ajoute quand même le worker. Vous ne verrez pas le worker et vous ne verrez peut-être même pas l'application Cassette installée.
Allez dans DNS et ajoutez le CNAME du sous-domaine que vous aviez indiqué dans les réglages de Cassette.
Dans notre cas, le CNAME est assets.
La valeur du CNAME est le nom de domaine du CDN Webflow indiqué plus haut, là où Webflow héberge votre contenu.
Dans notre cas, la valeur est assets-global.website-files.com
Assurez-vous de n'utiliser que le nom de domaine nu.
Le problème de Cassette devrait maintenant être résolu, même si vous ne voyez pas l'application. Consultez la vidéo pour un guide visuel.

Mise à jour : forcer Cloudflare à mettre en cache les images manquées

Une dernière mise à jour. En utilisant Dr.Flare et en examinant de près certains sites, nous avons remarqué que des images ne sont parfois pas mises en cache sur Cloudflare et passent encore par le CDN externe de Webflow. Après avoir inspecté le code, nous avons compris que cela vient de la génération par Webflow d'images responsives pour leur jeu src. Dans ce cas, les images de certains points de rupture étaient mises en cache et d'autres passaient par le CDN de Webflow. Si vous constatez ce comportement et voulez le contourner, il suffit de désactiver la génération d'images responsives sur l'image en cause.

Voici comment faire :

Sélectionnez l'image dans le canevas Webflow
Tapez Command + Shift + O (sur Mac) ou Control + Shift + O (sous Windows)
Ouvrez le Settings panel > Image settings
Décochez la case Responsive image (Webflow a depuis modifié cela : vous cochez désormais la case Disable responsiveness dans Image settings)

Désactiver les images responsives dans Webflow

Le bémol, c'est que Webflow ne génère alors plus d'images responsives. Vous pouvez donc utiliser Cloudflare Image Resizing pour le faire à la volée, ou créer une version desktop et une version mobile des assets d'une page si Cloudflare et Cassette ne mettent pas les images en cache et que vous voulez une image vraiment légère sur mobile, ou si vous estimez que la version non responsive est trop lourde ou obtient de mauvais résultats sur Google PageSpeed. Ne vous préoccupez pas de Cloudflare Image Resizing si vous êtes satisfait de ce que vous offrent Cassette, les Page Rules et des optimisations comme Polish.

Utiliser Cloudflare Image Resizing

Pour que cela fonctionne, vous devez activer Image Resizing sous l'onglet Speed dans Cloudflare (Cloudflare l'a depuis renommé Image Transformations, et il se trouve désormais sous Images dans le tableau de bord). Notez que des coûts supplémentaires peuvent s'appliquer. Selon ce que vous faites, vous pouvez activer ou désactiver le redimensionnement depuis l'origine (Resize from Origin). Si l'option est activée, vous pourrez redimensionner les images et appliquer des conversions comme WebP et AVIF directement depuis l'URL des téléversements du CDN de Webflow, sans avoir à passer d'abord par Cloudflare avec Cassette.

Pour le redimensionnement d'images, vous pouvez écrire un Worker (plus difficile) ou simplement utiliser une image intégrée dans Webflow avec l'élément HTML Embed. Vous verrez toujours les images dans le Designer dans l'élément intégré, et cela permet de nombreuses options de mise en forme et d'optimisation pour chaque image. La structure d'URL à utiliser ressemble à ceci :

‍

https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>

Vous trouverez plus de détails sur ce sujet et sur les options dans la documentation Cloudflare sur le format d'URL et dans leur guide des images responsives pour la mise en forme des images responsives.

Un embed d'image responsive très approximatif pour notre image principale pourrait ressembler à ceci si nous avons activé le redimensionnement depuis l'origine et utilisons notre URL de téléversement Webflow issue de l'Asset Manager :

Ou comme ceci si j'utilise notre URL du CDN Webflow :

Ou comme ceci si nous utilisons le CDN via le sous-domaine créé par Cassette :

‍<iframe height="300" style="width: 100%;" scrolling="no" title="Cloudflare Image Resizing Example - Cassette CDN on Assets" src="https://codepen.io/milkmoonstudio/embed/eYjbvvB?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/eYjbvvB">
Cloudflare Image Resizing Example - Cassette CDN on Assets</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

L'efficacité du dernier exemple pour créer des fichiers AVIF dépendra de vos Page Rules, de vos réglages de cache et de l'ordre des règles. Ainsi, si Cache Everything et Polish sont activés pour ce sous-domaine, une image WebP a peut-être déjà été créée et AVIF ne sera probablement pas utilisé, mais vous pouvez expérimenter.

Désolés pour la mise en forme catastrophique ci-dessus et pour les simplifications à outrance. Le point le plus important pour le redimensionnement est que la structure d'URL dans l'embed commence par le domaine que vous avez dans Cloudflare, suivi de /cdn-cgi/image/, puis de vos options de mise en forme et d'optimisation, puis d'un /, et enfin de l'URL de l'image. Faites des essais, et rappelez-vous que ce n'est pas nécessaire si vous êtes satisfait de ce que font Cassette, l'option Polish, etc.

Nous avons ajouté ci-dessous quelques réglages et règles Cloudflare recommandés. Gardez à l'esprit que cela dépend beaucoup de votre site et doit être testé.

Pour d'autres articles sur Cloudflare, consultez :

Recommandations Cloudflare

(Une note pour 2026 : Cloudflare a retiré quelques-uns de ces réglages depuis la rédaction de cette liste. Auto Minify a été abandonné en août 2024, Mirage en septembre 2025, et les Page Rules ont été abandonnées au profit des Cache Rules. Le reste est tel que nous l'avions écrit.)

Speed > Optimisation

Polish : On

Améliore le temps de chargement des images en optimisant celles hébergées sur le domaine ; en cochant WebP, Cloudflare peut convertir des formats d'image comme PNG et JPG en WebP si cela réduit la taille de l'image et si Cloudflare détecte la prise en charge de WebP par le navigateur du client.

Réglage recommandé : Lossy avec WebP coché, sauf en cas de baisse de qualité, auquel cas il faut choisir Lossless avec WebP coché. Cochez toujours WebP et, sur les forfaits supérieurs, AVIF si disponible, pour des gains encore plus importants.

Auto Minify : On

Réduit la taille du code source de votre site.

Réglage recommandé : Toujours avec JavaScript, CSS et HTML cochés.

Brotli : On

Cloudflare applique la compression Brotli pour accélérer le chargement des pages pour vos visiteurs. Cloudflare choisit la compression Brotli comme méthode d'encodage de contenu préférée si le client prend en charge plusieurs méthodes de compression. Si le client n'indique pas prendre en charge Brotli, la compression gzip est appliquée.