Augmentez la vitesse du flux Web avec Cloudflare : découvrez notre optimiseur d'image

April 2, 2024

· 10 min

Rejoignez-nous pour découvrir les subtilités de notre script Cloudflare Worker d'optimisation des images et découvrir comment il peut améliorer les performances de votre site Web.

Aujourd'hui, nous allons faire un voyage magique au cœur d'un script de travail Cloudflare que nous avons utilisé pour optimiser les images de notre projet Webflow. C'est un peu comme jeter un coup d'œil sous le capot d'une voiture de sport, sauf qu'au lieu d'utiliser de l'huile et des pistons, nous avons affaire à du JavaScript et à des expressions régulières.

Nous avons déjà publié un article détaillé sur la configuration de Cloudflare, mais nous allons ici adopter une approche différente. Pour lire l'article original sur la mise en cache de Webflow sur Cloudflare et l'utilisation de l'application Cassette dans Cloudflare pour mettre en cache vos actifs qui se trouvent sur le CDN Webflow de Cloudflare, consultez cet article : Utilisation de Webflow avec Cloudflare pour mettre en cache et accélérer votre projet Webflow

La méthode utilisée dans l'article précédent reposait sur l'utilisation de Cassette pour mettre en cache tous les actifs Webflow sur un sous-domaine de votre choix. Cela peut devenir un peu compliqué pour les petites agences Webflow ou les indépendants qui n'ont pas beaucoup d'expérience dans ce domaine. Bien que ce qui suit ne soit pas aussi compliqué, cela implique tout de même de modifier notre code pour qu'il fonctionne pour vous. Avec la méthode ci-dessous, nous allons utiliser une approche différente.

Le processus initial de configuration du DNS reste le même, et nous en donnerons un bref aperçu à la fin de cet article, mais le reste du processus de configuration se ramifie là. Au lieu de nous fier à l'application Cassette de Cloudflare pour mettre en cache vos ressources, puis remplacer les liens dans votre code, nous nous concentrons uniquement sur les images avec cette nouvelle approche et nous ne mettrons pas en cache ni ne remplacerons les liens de fichiers CSS, les fichiers Javascript ou les polices. Certaines personnes ont rencontré des problèmes lorsque Rocket Loader de Cloudflare chargeait leur code plus tard en raison de problèmes d'interactions, etc. Donc, si vous avez du mal à exclure les fichiers js et css pertinents, cette méthode pourrait vous convenir mieux.

Ici, nous utilisons un agent Cloudflare pour trouver tous les liens vers des images qui ne sont pas des SVG (et donc déjà optimisés, nous mettons toujours les SVG en cache), puis les optimise à l'aide du Cloudflare Image Resizer en remplaçant tous les liens d'image de votre projet Webflow par des liens Cloudflare Image Resizer, ce qui permet à Cloudflare non seulement d'optimiser les images qui ne figurent pas sur votre nom de domaine (le domaine Webflow CDN), mais également de les mettre en cache pour utilisation future.

Ça a l'air amusant, non ? Juste un rappel, comme dans notre autre article c'est avancé, veuillez lire attentivement. Allons y plonger !

Notre script Webflow Cloudflare Image Resizer Worker

Le script ci-dessus s'il fonctionne actuellement sur Milk Moon Studio, c'est donc configuré pour nous. Il faudrait remplacer notre domaine, milkmoonstudio.com à deux endroits dans ce script, et potentiellement mettre à jour les deux expressions régulières dans le script si vos images ne sont pas stockées sur https ://assets.website-files.com comme le sont nos actifs. Plus d'informations à ce sujet plus tard.

Voyons ce que fait le Cloudflare Worker

Notre script est toujours à l'affût des événements Fetch. Lorsque l'un d'eux entre, il passe à l'action et appelle notre « »« Demande de traitement » fonction.

Notre fonction HandleRequest est comme un assistant personnel, récupérant la demande et vérifiant son 'Type de contenu'. S'il ne trouve pas de 'Type de contenu', il suppose simplement qu'il s'agit d'une chaîne vide.

Si le 'Type de contenu'nous dit que c'est un document HTML, nous obtenons le texte de la réponse. C'est comme ouvrir le colis et vérifier ce qu'il contient.

C'est ici que nous commençons à optimiser. Nous trouvons toutes les URL d'image qui pointent vers le CDN Webflow et les remplaçons par des URL qui pointent vers notre agent Cloudflare.. Cela revient à rediriger le courrier vers un bureau de poste plus efficace.

Nous aborderons ensuite les attributs srcset. Elles peuvent contenir plusieurs URL, c'est pourquoi nous utilisons une fonction pour les remplacer. C'est comme avoir une liste d'adresses et mettre à jour chacune d'elles vers un nouvel emplacement. Cela a causé quelques problèmes lors de la précédente implémentation de Cloudflare avec Cassette. Webflow génère des ensembles SRC. Il s'agit essentiellement d'une liste des différentes tailles de chaque image du projet redimensionnée pour différentes largeurs d'écran. Cette optimisation du côté de Webflow signifiait toutefois que Cassette ne remplaçait qu'un ou deux liens d'image dans un SRC Set, puis en manquait d'autres. Nous avons essayé de faire des correspondances générales ici et avons beaucoup expérimenté pour essayer de récupérer l'ensemble complet avec ce bit, tandis que le bloc de code ci-dessus recherchait les images qui n'ont pas d'ensembles SRC, couvrant ainsi nos bases à tous les niveaux.

Une fois que nous avons effectué tous nos remplacements, nous emballons tout dans une nouvelle réponse et l'envoyons en cours de route. C'est comme remballer notre boîte ouverte et l'envoyer à sa destination finale.

Si notre package n'est pas un document HTML, nous l'envoyons simplement sans l'ouvrir. En cas de problème, nous enregistrons l'erreur et renvoyons une réponse 500. C'est comme dire : « Oups, quelque chose s'est mal passé. Nous réessaierons plus tard. »

Et c'est tout ! C'est ainsi que notre script de travail Cloudflare optimise les images de nos projets Webflow. C'est un peu comme un bureau de poste super efficace, qui redirige le courrier et veille à ce que tout arrive à destination le plus rapidement et le plus efficacement possible.

Mise à jour : asset.website-files.com et assets-global.website-files.com

En fait, nous sommes récemment passés au hasard d'assets à assets-global. J'ai donc un script Worker mis à jour ci-dessous qui prend en charge les deux ensembles d'URL. Il vous suffit de l'adapter à votre domaine personnalisé :

Étapes à mettre en œuvre

Alors, à part ça, que devez-vous faire ?

Configurez les paramètres DNS requis dans Cloudflare pour autoriser la mise en cache.
Mettez à jour le code avec votre propre domaine au lieu de milkmoonstudio.com
Si vos actifs ne sont pas stockés sur assets.website-files.com comme le nôtre, mettez à jour les deux ensembles d'expressions régulières qui recherchent les URL du CDN Webflow. Nous avons essayé d'ajouter autant de CDN que possible, mais nous en avons peut-être oublié certains.
Ajoutez le Cloudflare Worker ! Travailleur rémunéré, souvenez-vous de cela.
Activez Image Resizer/Image Transformations, c'est payant.

1. Paramètres DNS Webflow dans Cloudflare

Très bien, les gars, il est temps de mettre la main à la pâte avec certains paramètres DNS. Maintenant, vous pensez peut-être : « Attends une minute, n'en avons-nous pas parlé dans un article précédent ? » Et tu aurais raison ! Mais nous allons changer les choses et l'ajouter à nouveau pour ceux qui n'ont pas le temps de lis aussi ce post.

À présent, Webflow va vous donner quelques instructions ici. Ils vous demanderont d'ajouter deux enregistrements A et un enregistrement CNAME lorsque vous activez le SSL dans votre onglet d'hébergement Webflow (et de nos jours, ils vous fourniront également un enregistrement TXT). Ils vous demanderont également de désactiver le proxy sur Cloudflare (c'est l'icône orange en forme de nuage). Mais nous allons devenir voyous et ignorer tout cela.

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

Paramètres DNS Webflow

Mais nous allons dire « Merci, mais non merci ! » à ces instructions. Voici ce que vous devriez faire à la place :

Tout d'abord, désactivez le SSL en bas de l'onglet d'hébergement et cliquez sur Enregistrer.

Désactiver le protocole SSL

Ensuite, copiez les nouvelles adresses d'enregistrement A et les paramètres CNAME :

Enregistrez les paramètres DNS Webflow non SSL

Maintenant, réactivez la case SSL et enregistrez. Vous verrez les paramètres revenir aux paramètres SSL initiaux, mais ignorez-les simplement.
Rendez-vous sur Cloudflare et ajoutez les paramètres DNS non SSL. Cela devrait ressembler à ceci :

Ajouter les paramètres DNS Webflow à Cloudflare

Vous pouvez ajouter le bon enregistrement TXT comme Webflow l'a demandé : proxy-ssl.webflow.com.
Assurez-vous que le proxy est activé sur les entrées, même si les instructions Cloudflare de Webflow vous indiquent le contraire.
Accédez à l'onglet des paramètres SSL/TLS dans Cloudflare et activez l'option Complet :

Configurez SSL sur Full dans Cloudflare

Retournez à l'onglet d'hébergement de Webflow.
Argh, ça pose beaucoup de problèmes ! Mais ne vous inquiétez pas, ignorez-les et publiez le site.

Ignorer les erreurs DNS de Webflow

Et c'est tout ! Vous avez réussi à naviguer dans le monde effréné des paramètres DNS de Cloudflare pour Webflow. Rassurez-vous, vous êtes désormais en train de mettre en cache sur Cloudflare, sans compter les actifs.

2. Mettez à jour le script Cloudflare Worker avec votre propre domaine.

Tout ce que vous avez à faire ici est de trouver le bit milkmoonstudio.com, il y en a deux, et de le remplacer par le nom de domaine que vous avez dans Cloudflare. C'est en plein milieu que le travailleur recherchera les URL des images et les remplacera. Le voici ci-dessous :

3. Mettre à jour les deux ensembles d'expressions régulières

C'est donc très important. Dans notre cas, le CDN Webflow stockait tous les actifs du projet sur https://assets.website-files.com, mais ce n'est pas toujours le cas et cela varie d'un projet à l'autre. Donc, comme dans notre autre article sur Cloudflare, vous devrez modifier cela en fonction du domaine sur lequel vos images sont stockées. Vous pouvez consulter le code ou ouvrir une image dans un nouvel onglet pour vérifier. Les domaines CDN Webflow les plus populaires sont :

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

Nous n'avons aucune idée de leur nombre ni de la manière dont ils sont choisis, mais nous en avons vu quelques-uns.

Si vous avez de la chance, vous vous y connaissez en matière d'expressions régulières et vous pourrez facilement les mettre à jour. Sinon, regardez certains des exemples que nous avons rassemblés ci-dessous, vous devriez être en mesure de le comprendre. Vous devrez mettre à jour les deux et voici essentiellement ce que le Cloudflare Worker recherchera :

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 actif CDN, vous devrez peut-être vous débrouiller un peu, et oui, nous sommes nuls dans ce domaine, je veux dire \/[^ \ s"'] + \ 🤮

4. Ajouter le Cloudflare Worker et la route Worker

Vous avez donc apporté les modifications au DNS, vous avez 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">
Voir le stylo <a href="https://codepen.io/milkmoonstudio/pen/LYXrvaW">
</a><a href="https://codepen.io/milkmoonstudio">Cloudflare Image Resizer : script de travail de Jakes van Eeden (@milkmoonstudio)</a>
sur <a href="https://codepen.io">CodePen</a>.
</iframe>

Et maintenant ? Tu vas devoir faire 4 choses. Ajoutez un plan Cloudflare Worker, activez le redimensionnement de l'image, créez le Worker et ajoutez l'itinéraire du Worker.

Accédez à Workers & Pages, cliquez sur Plans et ajoutez un plan. Il existe un niveau gratuit, je ne sais pas si cela fonctionnera, nous avons un plan, vous pouvez essayer le niveau gratuit et nous le faire savoir.

Sélection du plan Cloudflare Worker

Ensuite, ouvrez les paramètres de votre domaine, accédez à Vitesse, Optimisation, puis Optimisation de l'image et activez le redimensionnement de l'image :

Activer le redimensionnement de l'image

L'étape suivante consiste à créer le Worker et à ajouter le script. Retournez au menu principal, puis à Workers & Pages. Cliquez sur Créer une application, puis sur Créer un travailleur.

Création d'une application Worker

Créez un Cloudflare Worker

Donnez-lui un nom et déployez-le.

Nommez le Cloudflare Worker

Modifiez le code, supprimez ce qu'il contenait et collez-le dans votre script, puis cliquez sur Enregistrer et déployer.

Ajouter le script au Worker

Enfin, revenez à la page des paramètres de votre site Web, sélectionnez l'onglet Workers Routes et ajoutez un itinéraire. Sélectionnez le travailleur et donnez-lui l'itinéraire. Je veux qu'il fonctionne partout, il y a donc des caractères génériques : *.milkmoonstudio.com/*

Ajouter l'itinéraire Worker

Vous avez terminé et vous pouvez tester le site pour voir s'il fonctionne.

Modifier les paramètres du redimensionneur d'image - Facultatif

Si vous examinez l'URL réelle du redimensionneur d'image dans le script de travail que nous utilisons pour remplacer l'image Webflow dans le code de page, nous utilisons des paramètres assez basiques :

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

F est pour le format et nous avons Auto, donc il vérifiera le navigateur, l'appareil, la connexion, etc. et décidera d'un format. Avif est fait dans la mesure du possible, sinon WebP, etc. s'il y a du support. Il existe également des restrictions sur la taille et la dimension de l'image en ce qui concerne la conversion pour Avif, etc. Vous verrez également que nous avons réduit la perte de qualité des images à 80 %. Il existe de nombreuses autres options que vous pouvez trouvez ici et ajoutez. Lorsque vous recherchez l'option, n'oubliez pas que vous souhaitez implémenter le format d'URL lorsque vous placez l'option donnée dans une URL.

Vous pouvez désormais utiliser les règles de page pour tout mettre en cache. Plus d'informations à ce sujet dans notre autre article sur Cloudflare, alors consultez-le si vous avez besoin d'aide.

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

Accélérez le flux Web avec Cloudflare : mettez en cache et optimisez

Augmentez la vitesse des pages : Cloudflare Zaraz et Google Analytics

Nous prévoyons de réaliser une vidéo explicative, alors restez à l'affût.

Le moyen le plus simple de tester votre configuration est d'utiliser Extension DrFlare. Lancez DrFlare depuis Dev Tools et actualisez la page. Vous verrez des statistiques détaillées et pourrez survoler des images, etc. pour une analyse sur site.