Optimiser la vitesse d’une boutique e-commerce grâce aux images

Dans beaucoup d’articles que je vois sur le net, je constate que des méthodes assez élaborées sont proposées pour optimiser la vitesse d’une boutique ecommerce, mise en place de cache, hébergement de qualité etc… Mais n’oublions pas de regarder aussi l’essentiel…

Les images, ça pèse !
Ben non, je parle pas forcément des images produits, qui elles, sont dimensionnées et calibrées automatiquement par Prestashop (juste en passant, gardez toujours le format .jpg pour les images produits). Dans le cas présent je parle plutôt du template Prestashop que vous utilisez et des éléments visuels que vous faites afficher sur la boutique… si vous cumulez les grosses images dans votre thème surtout le PNG… et bien ça peut ralentir l’affichage et c’est bien dommage pour votre confort et celui de vos clients.

Exemple concret avec une boutique
Dans le répertoire de mon thème Prestashop j’ai été faire un bond dans le répertoire des images (img), pour tenter une optimisation du poids des images… plus c’est petit, mieux c’est forcément. Dans le cas présent on voit par exemple une image comme « bg-header.png » qui fait 195 Ko… c’est quand même assez gros et ce fichier est utilisé de manière permanente par le site… « no-results.png » c’est pareil… il faut qu’il fasse du fitness.

Le problème du PNG
Très souvent c’est les PNG qui font des tailles démesurées, surtout quand on ajoute encore la transparence… la taille explose. Le problème c’est que même avec Photoshop, en indiquant des préférences « intelligentes » le fichier reste toujours d’une taille assez importante. Certainement qu’il existe peut-être des plugins ou des trucs… mais dans les options en standard de Photoshop, rien de convaincant.

Alors je pleure ?
Non tu pleures pas (enfin pas tout de suite), ce que je te conseille c’est d’utiliser le site TynyPNG pour optimiser la taille de tes PNG et en plus sans perte de qualité (oui c’est ouf).  Par contre, si tu as des JPG à compresser, en principe tu as déjà des réglages qui marchent bien dans les différents outils du marché.

C’est simple… tu balances ton image et tu la récupères en pleine forme… elle a fait une cure d’amincissement.



La différence est flagrante ?

Au niveau de la taille ? Clairement l’image est presque 3 fois plus légère qu’avant le gain est vraiment important. Au niveau de la vitesse du site est-ce qu’on voit la différence ? Heuu… pour être honnête pas vraiment, mais si on applique ce système sur toutes les images « lourdes », on a une sensation immédiate de chargement… et pas une image qui s’affiche en coup par coup… (ou même pour le mobile c’est toujours mieux).



Bilan

Un merci spécial à Seo44 qui m’avait partagé à l’époque ce site, si tu tombes sur ce billet ben… tu vois j’ai finalement fait un article avec. L’optimisation d’un site e-commerce c’est compliqué, long et fastidieux… il n’y a pas de technique ultime… mais arrivé à un certain stade tout compte… la taille des images, la taille des fichier Javascript, la taille des CSS etc… Ce qui est bien avec l’image c’est qu’une manipulation, simple et sans risque, peut donner un petit coup de boost à votre boutique… Si vous voulez faire un bilan de l’état de santé de votre site, utilisez YSlow avec Firefox, vous pourrez avoir un détail du temps de chargement de votre boutique e-commerce.

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (1 votes, moyenne : 5,00 sur 5)
Loading...

12 commentaires sur “Optimiser la vitesse d’une boutique e-commerce grâce aux images”

  1. En effet ça fait plaisir! c’est tellement important…de plus pour les plus feignants 😉 vous avez aussi http://www.jpegmini.com/ pour le jpeg…c’est gratuit ( ouvrir un compte c’est juste pour envoyer directement un dossier.)

    Bonnes optimisations à tous.

    1. Merci pour ta visite et pour ton lien.
      Il me reste encore une de tes suggestions sur le feu… j’en parlerai dans un prochain billet certainement…
      Et oui c’est surprise !

    1. Ahah… je viens de tester sur un PNG, ahaha TinyPNG a explosé Smush.it 🙂

      taille origine du PNG : 104 Ko
      taille via Smush.it : 78 Ko
      taille via TinyPNG : 18 Ko

  2. Bonjour

    Moi j’ai découvert ce site récemment : https://kraken.io/web-interface
    Et j’ai tout simplement été bluffé, et par la qualité des images obtenues, mais aussi par la diminution du poids total occupé par ces images.

    Avant : 1.2 MB
    Après : 868.8 kB

    Pour exactement le même nombre d’images qu’avant. Mieux grâce à cet outil j’ai pu ré-optimiser des images que j’avais déjà retravaillé, et sans y perdre en qualité.

    Cordialement.

    1. Bonjour,

      Le gain est surtout important sur les images du type « arrière-plan » de la boutique par exemple ou « slider ».

      Pour tout ce qui concerne les produits, catégories etc… le système Prestashop fait déjà nativement un redimensionnement automatique avec optimisation.

      Merci pour votre visite !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *