Redimensionnement D'image Cloudflare Pour WordPress

Je publie cet article en raison des nombreuses demandes que j’ai reçues concernant le redimensionnement d’image Cloudflare et mon plugin WordPress.

En raison de la conception de WordPress, il n’est pas possible de rendre mon plugin compatible avec tout ce qui existe, donc dans cet article, nous explorons une autre méthode via Cloudflare Workers.

Veuillez noter que j’ai intentionnellement omis trop de choses techniques pour que tout le monde puisse les comprendre; avouons-le, tout le monde n’est pas développeur. J’aime garder des articles courts, simples et précis.

À la fin de l’article, vous pourrez simplement copier, coller et appuyer sur un clic pour que le redimensionnement d’image Cloudflare soit correctement effectué pour votre WordPress.

Qu’est-ce que le redimensionnement d’image Cloudflare

Pour rappel, avec Cloudflare Image Resizing, vous pouvez transformer des images sur la plate-forme périphérique de Cloudflare. Vous pouvez redimensionner, ajuster la qualité et convertir des images au format WebP ou AVIF à la demande.

Cloudflare mettra automatiquement en cache chaque image dérivée à la périphérie, vous n’avez donc besoin de stocker qu’une seule image originale à votre origine.

C’est vraiment un service indispensable pour les blogs occupés comme WordPress, surtout si vous l’utilisez comme une boutique avec de nombreuses images.

En savoir plus sur le Post officiel .

Pourquoi utiliser le redimensionnement d’image Cloudflare

La raison principale est la vitesse. Disons par exemple que votre site Web a 5 pages et chaque page a 10 images allant de 1 Mo à 5, voire 10 Mo chaque image.

Lorsque quelqu’un navigue sur vos pages pour la première fois, toutes ces images sont téléchargées par votre navigateur. Ainsi, par exemple, une page contient 10 images, chacune d’une taille de 1 Mo ; c’est 10 Mo à télécharger rien que pour les images.

C’est très mauvais pour les utilisateurs à faible bande passante, en particulier les utilisateurs mobiles. C’est nul même pour les utilisateurs de PC avec beaucoup de bande passante. Personne ne veut voir un site Web à chargement lent et il ne respectera pas les normes Web.

Je suis presque sûr que vous voyez de nombreux sites Web de ce type au jour le jour, se chargeant pour toujours. La raison principale est les ressources multimédias (comme css, js, images) entre autres facteurs comme la lenteur de l’hébergement Web, etc.

Vous pensez peut-être : “mais j’utilise un CDN ?!”, eh bien ce n’est pas la même chose. Cloudflare Image Resizing n’est pas seulement un CDN, il modifie vos images pour qu’elles deviennent meilleures.

Avec Cloudflare Image Resizing, la taille de vos images sera réduite à la volée, de sorte qu’une image de 1 Mo deviendra environ 100/200 ko. Ils seront également livrés dans un format de nouvelle génération comme Webp et AVIF.

Donc en quelques mots :

• Améliore vos images
• Accélère votre site Web
• Améliore votre référencement
• Économise la bande passante

Plug-in WordPress

Vous connaissez probablement le plugin que j’ai créé pour WordPress depuis mon Github / WordPress Plugins .

Il a reçu beaucoup de commentaires et beaucoup ont considérablement accéléré leur site Web, mais beaucoup ont également rencontré de nombreux problèmes littéralement insolubles.

Même si j’ai essayé de faire tout mon possible pour redimensionner toutes les images, il n’est pas possible de toutes les redimensionner à cause de la conception des plugins et des thèmes WordPress.

Sans parler du traitement CSS et d’autres choses sont hors de question.

Cloudflare Worker

Après avoir examiné tous les problèmes publiés, j’ai décidé d’emprunter l’autre voie et d’utiliser un Cloudflare Worker pour réécrire la sortie HTML finale pour le redimensionnement d’image Cloudflare.

Il s’agit de la solution ultime pour utiliser le redimensionnement d’image Cloudflare sur WordPress car le travailleur récupérera la réponse finale générée par WordPress, y compris toutes les modifications des plugins, thèmes, CSS, etc.

Parce que Cloudflare Worker se situe entre votre WordPress et les utilisateurs, vous avez la possibilité de modifier presque tout à la volée ; ce qui signifie que nous pouvons même remplacer des images dans des fichiers CSS en ligne et même des fichiers CSS.

En théorie, cela semble simple et direct, mais en pratique, cela a été beaucoup plus difficile et long.

Néanmoins, j’ai passé beaucoup de temps et d’efforts pour comprendre comment atteindre cet objectif.

WordPress Plugin vs Cloudflare Worker

Il est extrêmement avantageux de comprendre les différences entre le plugin WordPress et le Cloudflare Worker. De cette façon, vous pouvez décider lequel utiliser et comprendre pourquoi je recommande le travailleur.

Comme vous pouvez le voir ci-dessus, le travailleur gagne. C’est simplement la meilleure solution car quel que soit le type de modifications que vous apportez à votre backend (WordPress), le travailleur pourra modifier les liens d’image.

Configurer le Cloudflare Worker

La première chose importante que vous devez faire est de désactiver le plugin WordPress si vous l’avez installé et activé. Si vous sautez cette étape, vous ne verrez pas le travailleur faire grand-chose.

La deuxième chose très importante est de vous rendre sur Google Pagespeed et de tester votre site Web sans redimensionner l’image. Vous en aurez besoin plus tard pour voir la différence.

Rendez-vous maintenant sur votre compte Cloudflare et accédez à Workers. De là, cliquez sur “Créer un service”. Nommez le service comme vous le souhaitez, vous pouvez également laisser le nom aléatoire généré automatiquement. Laissez le démarreur en tant que “gestionnaire HTTP”.

Après la création, cliquez sur le service et en haut à droite cliquez sur “Quick Edit”. L’éditeur apparaîtra et sélectionnera simplement tout le code existant et le remplacera par mon travailleur de Github . Cliquez sur “Enregistrer et déployer” et quittez l’éditeur.

Sur votre nouvelle page de service, allez dans “Déclencheurs” et sous Routes, cliquez sur “Ajouter une route”. À l’intérieur de l’itinéraire, définissez le domaine de votre site Web avec un caractère générique générique, par exemple "example.com/*". Pour la zone, vous sélectionnerez votre domaine, qui dans mon exemple est example.com.

C’est tout!

Dépannage

Si vous rencontrez des problèmes, par exemple si aucune image n’est redimensionnée, vérifiez les conditions suivantes:

• L'image fait-elle partie de votre domaine? Vous ne pouvez pas redimensionner les images d'un autre domaine, sauf si vous avez spécifiquement activé cette fonctionnalité dans le tableau de bord Cloudflare.
• Y a-t-il des images réécrites? Activer "Journaux" sur votre nouvel onglet de travailleur et voyez si vous repérez des exceptions. Si vous le faites, signalez-le sur mon dépôt Github.
• Les liens vers les images sont-ils mal réécrits? Dans ce cas, signalez le problème sur Github.

Optimisations des bonus

Je suis presque sûr que vous avez remarqué que votre WordPress contient des balises SVG vides juste après la balise HTML body. Si vous ne savez pas de quoi je parle, regardez ceci :

Franchement, je ne peux pas comprendre un cas d’utilisation valide pour cela; j’ai donc ajouté un code supplémentaire pour le supprimer. Cela rendra votre sortie HTML un peu plus petite, ce qui se traduira par une petite quantité de vitesse supplémentaire.

J’ajouterai d’autres optimisations quand j’aurai le temps.

Frais

Pour utiliser Cloudflare Image Resizing, vous devez avoir un abonnement Pro (25 $/mois) pour votre site Web au moment de la rédaction. Le service de redimensionnement d’image commence à 5 $ pour 100 000 images stockées et 1 $ pour 100 000 images livrées - sans frais de sortie ni frais supplémentaires pour le redimensionnement et l’optimisation.

L’utilisation du plugin WordPress est entièrement gratuite et sans frais. Le travailleur est également relativement libre d’utilisation, mais les limites sont plus petites et la puissance de traitement est également un peu plus petite.

Je vous recommande fortement d’utiliser le plan des travailleurs rémunérés avec l’option non liée. Plus vous avez d’images sur votre site, plus les balises HTML doivent être réécrites et donc plus de temps de traitement (GBs Duration).

Gardez à l’esprit que pour seulement 5 $, vous obtenez une limite de travail de 400 000 GB’s, ce qui est plus que suffisant d’après mes tests.

Licence

J’ai décidé de ne pas utiliser la licence MIT car j’ai remarqué que beaucoup récupéraient mon code et le vendaient. Pas cool les gars.

Cela étant dit, le nouveau modèle de licence utilisé est la licence Apache 2.0, veuillez donc ne pas revendre mon travail.

Liens utiles

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

Je crois fermement que mon Cloudflare Worker améliorera considérablement votre site Web. Si j’ai raison, laissez une étoile sur Github. Si je me trompe, laissez plutôt un commentaire.

Dans l’attente de vos commentaires.