En raison de la popularité de PrestaShop, largement utilisé par des milliers de boutiques en ligne, j’ai décidé de vous donner la possibilité de l’accélérer considérablement.

Cette plateforme e-commerce est très dynamique et pleine d’images. Tellement plein d’images que la plupart d’entre eux téléchargent environ 5 à 10 et même 20 mégaoctets d’images sur chaque page.

Les images sont cruciales pour cette plateforme, car c’est ce que les gens voient lorsqu’ils regardent votre produit. En tant que tel, vous souhaitez normalement télécharger de nombreuses images pour attirer l’attention sur le produit.

Pour cette raison, il vous est très difficile d’optimiser correctement votre boutique et d’offrir une expérience utilisateur agréable.

Redimensionnement d’image pour PrestaShop

Si vous ne savez pas ce qu’est le redimensionnement d’image Cloudflare, je ne le répéterai pas ici pour créer du contenu dupliqué. S’il vous plaît ici à ce sujet sur le Poste Officiel .

Ce que j’ai fait ici, c’est prendre le travailleur que j’ai créé pour WordPress et l’adapter pour PrestaShop .

Au départ, cela semblait être une tâche facile, mais une fois que j’ai commencé à travailler dessus, un énorme mal de tête est apparu.

Planification et création du travailleur

Tout d’abord, PrestaShop a une manière extrêmement étrange de gérer les URL des images. Si vous accédez à https://demo.prestashop.com/#/en/front , vous pouvez voir le thème classique.

En inspectant la source de la page, en regardant le curseur par exemple, nous pouvons voir ce qui suit:

1<img src="https://ready-low.demo.prestashop.com/modules/ps_imageslider/images/sample-3.jpg" alt="sample-3" loading="lazy" width="1110" height="340">

Eh bien, ce n’est pas mal, nous pouvons facilement faire correspondre cette URL et la réécrire. Cependant, en faisant défiler ci-dessous les produits, nous pouvons voir ce qui suit :

1<img src="https://ready-low.demo.prestashop.com/1-home_default/hummingbird-printed-t-shirt.jpg" alt="Hummingbird printed t-shirt" loading="lazy" 
2	data-full-size-image-url="https://ready-low.demo.prestashop.com/1-large_default/hummingbird-printed-t-shirt.jpg" width="250" height="250">
3	
4<img src="https://ready-low.demo.prestashop.com/21-home_default/brown-bear-printed-sweater.jpg" alt="Brown bear printed sweater" loading="lazy" 
5	data-full-size-image-url="https://ready-low.demo.prestashop.com/21-large_default/brown-bear-printed-sweater.jpg" width="250" height="250">
6
7<img src="https://ready-low.demo.prestashop.com/3-home_default/the-best-is-yet-to-come-framed-poster.jpg" alt="The best is yet to come' Framed poster" loading="lazy" 
8	data-full-size-image-url="https://ready-low.demo.prestashop.com/3-large_default/the-best-is-yet-to-come-framed-poster.jpg" width="250" height="250">

Aïe, ça fait mal. Quel est le problème que vous pourriez demander? Le problème est que les images ne se trouvent pas dans un “dossier” et sont simplement réécrites via Apache Rewrite.

Si vous regardez attentivement l’URL des images, vous pouvez voir le problème: prestashop.com/1-home_default, prestashop.com/21-home_default, prestashop.com/3-home_default et ainsi de suite.

L’inspection du .htaccess a confirmé ceci:

 1# Images
 2RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]
 3RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg [L]
 4RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.jpg [L]
 5RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg [L]
 6RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg [L]
 7RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg [L]
 8RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg [L]
 9RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg [L]
10RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2$3.jpg [L]
11RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2.jpg [L]
12# AlphaImageLoader for IE and fancybox
13RewriteRule ^images_ie/?([^/]+)\.(jpe?g|png|gif)$ js/jquery/plugins/fancybox/images/$1.$2 [L]

Franchement, je n’ai même pas envie d’entrer là-dedans. Je vais le laisser sans commentaire. Ce qui précède n’est toujours pas si mal et nous pouvons le réécrire sans problème, nous avons juste besoin d’un peu d’expérience dans Regular expression .

Cependant, en regardant différents thèmes dans la nature, cela devient bien pire. Par exemple, regardons Shopkart que j’ai trouvé sur Monsterone thèmes:

1<img src="https://demo4techies.com/prestashop/shopkart-lite/modules/ps_imageslider/images/8187e2cea6dcd5e1b98a1b1af132211cf94c9a8e_Slider-1.jpg" alt="">
2
3<img src="https://demo4techies.com/prestashop/shopkart-lite/1-home_default/casual-shoes-sneaker.jpg" alt="Casual Shoes Sneaker" 
4	data-full-size-image-url="https://demo4techies.com/prestashop/shopkart-lite/1-large_default/casual-shoes-sneaker.jpg">
5
6<img src="https://demo4techies.com/prestashop/shopkart-lite/6-home_default/square-sunglasses-black-frame.jpg" alt="Square Sunglasses Black Frame" 
7	data-full-size-image-url="https://demo4techies.com/prestashop/shopkart-lite/6-large_default/square-sunglasses-black-frame.jpg">
8
9<img src="https://demo4techies.com/prestashop/shopkart-lite/img/cms/testimonial-img-1.jpg" alt="testimonial1">

Comme vous pouvez le constater, c’est bien pire car apparemment, les thèmes modifient la structure de l’URL de l’image par défaut en incluant le nom du thème à l’intérieur. Pour aggraver les choses, ils pointent également vers des dossiers comme /img/cms et ainsi de suite.

Honnêtement, à ce stade, je voulais abandonner parce que cela semblait être un énorme mal de tête pour supporter cela, mais quelque chose dans mon esprit corrompu me disait “pas question”.

J’ai donc commencé à tester et à déboguer jusqu’à ce que je prenne enfin en charge le thème Classic. Ensuite, j’ai récupéré un thème gratuit sur ETS et j’ai commencé à travailler dessus.

Après de nombreuses heures, j’en étais au point où mon intervenant prend en charge:

  • Thème PrestaShop Classique
  • Thème PrestaShop ETS (tout)

Ce n’était pas suffisant car j’ai également rencontré du CSS qui devait être modifié. Encore quelques heures de plus pour tester et déboguer les réécritures CSS prenant en charge.

Produits de réécriture “aperçu rapide”

Lorsque vous visitez un magasin ou une catégorie de vitrine, vous avez la possibilité de “visualiser rapidement” un produit en cliquant sur une petite icône. Réécrire cela était un peu difficile mais néanmoins tout à fait possible.

Après avoir joué pendant quelques heures de plus, testé et débogué à nouveau, j’ai réussi à y parvenir.

Le travailleur réécrira à la volée toutes les images qui s’afficheront en mode “vue rapide”.

Suppression du script malveillant

En jouant avec le thème ETS, j’ai remarqué quelque chose d’étrange. Un fichier JavaScript très étrange essayait de se charger à distance.

Heureusement, l’URL du script renvoyait HTTP 404 (introuvable) et, malheureusement, je ne pouvais pas voir de quoi il s’agissait. Je me suis donc dirigé vers les archives Web et j’ai trouvé une version en cache .

Regarder le script me semble très suspect, alors j’ai rapidement abandonné l’enquête et j’ai plutôt écrit un petit extrait pour le supprimer automatiquement de la page.

Le travailleur supprimera le script et assurera la sécurité de vos visiteurs.

Utilisation du travailleur de redimensionnement d’image PrestaShop

Une fois de plus, j’ai fait de mon mieux pour créer un simple extrait de code copier-coller unique, qui convient à la fois aux techniciens mais aussi aux non-techniques.

Cependant, cette fois, vous devez faire une petite modification, en fonction du thème que vous utilisez. En haut du code travailleur, vous verrez:

 1// Edit the below as needed
 2// START EDIT -----------------------------------------------------
 3
 4// Set theme type
 5// 0 = Classic
 6// 1 = All themes by ETS (https://prestahero.com/brand/2-ets)
 7const PS_THEME = 0;
 8
 9// Speed: Set the image quality
10const IMAGE_QUALITY = 90;
11
12// Speed: Append lazy loading to images
13const IMAGE_LAZY_LOAD = true;
14
15// END EDIT -------------------------------------------------------
16// DO NOT EDIT BELOW THIS LINE.

C’est assez explicite; si vous utilisez le thème PrestaShop Classic, laissez PS_THEME sur 0, sinon définissez sur 1. Vous pouvez également personnaliser la qualité de l’image, mais je vous recommande de laisser celle par défaut.

Déploiement du travailleur

Déployez simplement le travailleur sur votre site Web, en utilisant l’exemple de route: examplestore.com/* et profitez des avantages.

Vous pouvez trouver le code du travailleur sur my Github comme d’habitude.

Si vous ne savez pas comment procéder, veuillez vous référer à mon autre article pour WordPress qui contient des instructions.

Qualité d’image

Lorsque vous utilisez le redimensionnement d’image, vous souhaitez normalement pointer l’image d’origine pour que Cloudflare la redimensionne, car PrestaShop redimensionne les images d’une manière étrange et la qualité est juste merdique.

Je ne sais pas pourquoi cela se produit, peut-être que leur raisonnement était la performance ou autre. Le fait est que nous devrions pointer l’image d’origine vers Cloudflare, mais nous ne pouvons pas car PrestaShop réécrit les URL afin qu’elles ne soient pas accessibles directement.

Le service Cloudflare redimensionne les images et offre une qualité exceptionnelle, quelle que soit la résolution ou la taille de l’image. Cela étant dit, vous obtiendrez toujours une meilleure qualité et une meilleure compression.

Soutien

Adapter le travailleur à différents thèmes est une tâche qui prend du temps. Je pourrais ajouter un support pour plus de thèmes si j’ai du temps libre mais ce n’est pas garanti.

Si vous avez un thème PrestaShop payant ou personnalisé et que vous souhaitez que j’adapte le worker pour votre boutique, je suis disponible pour un support commercial.

Veuillez utiliser la page Consultation et réserver une conversation rapide pour discuter de vos besoins.

Licence

Comme mentionné dans l’article précédent pour WordPress, le nouveau modèle de licence utilisé est la licence Apache 2.0, veuillez donc ne pas revendre mon travail.

Cela ne vous empêche pas de l’utiliser commercialement ou personnellement.

Liens utiles

J’espère qu’avec cet ajout votre magasin va prospérer.

Faites-moi part de vos réflexions ci-dessous.