J’ai déjà eu l’occasion de parler Optimisation sur ce blog ou sur mon blog personnel, ce soir, je voudrais faire le point sur les moyens d’optimiser les images sur sa boutique Prestashop.
Qu’y a-t-il de plus énervant qu’une page qui met trop de temps à charger ? En effet des études menées par Google ont montré que 57 % des utilisateurs mobiles n’attendent pas plus de trois secondes pour qu’une page s’affiche.
A l’heure où le Smartphone représente 51,3 % des utilisateurs d’internet, il ne fait pas bon d’attendre. En clair, une vitesse de chargement trop lente peut vous faire perdre beaucoup. Les formats classiques d’images sont : JPG, PNG et GIF et représente 96% de tout le trafic image sur internet. Leur répartition est la suivante : 45% de JPG, 23% GIF et 28% de PNG… le reste c’est pour les formats comme : WebP, SVG…
(les sources de ces statistiques sont présentes ici : http://httparchive.org/interesting.php#imageformats)
A tout cela, on ajoute qu’un des critères de référencement de Google est votre temps de chargement, plus celui-ci sera court mieux vous serez noté.
Améliorer le temps de chargement de votre site est indispensable pour votre audience et votre popularité. Mais comment améliorer celui-ci ?
Sommaire
L’optimisation des images :
Très souvent lors des analyses de chargement de page (GtMetrix, Google PageSpeed…), il apparaît que les images du site internet testé peuvent être optimisées. Les images peuvent très vite être la ressource la plus lourde dans le chargement des pages. Pour l’optimisation des images, il y a deux points à prendre en compte :
La meilleur compression de l’image rapport qualité/poids et le moyen de délivrer l’image à l’utilisateur.
Photoshop (ou autre logiciel de retouche) :
Généralement, avant d’importer une image sur notre boutique e-commerce, on passe par un éditeur d’image. L’idée est d’adapter dans un premier temps la taille de l’image – Il est inutile de charger une image de 2000 pixels pour ne l’afficher que sur 400 pixels sur le site internet.
Ensuite, via le menu « Importer pour le Web » dans Photoshop, il est aussi possible de jouer sur la qualité de l’image (de 0 à 100), plus le ratio est bas, plus la qualité va être dégradée mais le poids va être faible. 80 est la valeur par défaut, a vous de faire vos propres essais et de trouver le bon compromis entre poids et qualité de l’image.
Mais disons que si l’image est à la bonne taille, c’est déjà un bon début.
Les modules :
Il existe des modules Prestashop pour optimiser les images déjà présentes sur la boutique. Ils peuvent utilisés des API tiers pour compresser les images ou certains utilisent des fonctions PHP sur le serveur pour améliorer les images.
Payant :
Un tas de plugin payant existent (liés à des services comme faster.io)
- Faster Image (35€ + abonnement) : plugin ici
- PrestaSpeed (50€ + autres fonctionnalités) : ici
Gratuit :
Il n’existe pas énormément de plugin pour compresser vos images gratuitement.
- Wagood sur le forum de Prestashop mets à disposition un module (compatible aussi pour Prestashop 1.7) :
Plugin gratuit sur le forum Prestashop
Le Lazy-Loading :
Je viens de tester pour un client, la solution du « Lazy Loading ». Ce principe permet de ne charger les images qu’au moment ou elles ont besoins d’être affichées.
La solution consiste à ajouter le script « JavaScript » :
https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js
et d’utiliser les attributs data-original pour toutes les images des catégories par exemple.
Si vous souhaitez implémenter cette solution sur votre boutique contactez un expert Prestashop
Pour info, cette solution à permis de passer d’un score de 35/100 à 73/100 sur PageSpeed. Le sur-poids des images avant l’utilisation du « Lazy-Loading » était de 2.Mo.
Les sites internet et applications :
Quelques sites internet et applications pour permettre de compresser vos images manuellement :
- http://compressjpeg.com/fr/
- https://tinypng.com/
- http://www.lcdf.org/gifsicle/ : Pour les GIF
- http://optipng.sourceforge.net/ : Pour les PNG
- Google Page Speed fournit une archive avec les images optimisées (Attention de bien vérifier que l’image est bien lisible)
Le WebP format :
J’avais déjà écrit un article sur mon blog personnel à son sujet (voir ici : WebP l’avenir de la compression des images), c’est toujours d’actualité (on peut le voir avec Alibaba qui utilise ce format moderne). Si votre audience utilise en majorité Google Chrome, il peut être intéressant de se pencher sur ce genre de format.
Le WebP est un format sans perte, permet un gain entre 25-35% par rapport à une image JPG classique et 26% pour un PNG.
Plus d’informations à son sujet sur le site de Google : https://developers.google.com/speed/web/
Convert (Logiciel en ligne de commande) :
L’application « convert » est à utiliser en ligne de commande. Il est recommandé par Google pour optimiser ses images au mieux.
Vous pouvez le télécharger ici : https://www.imagemagick.org/script/convert.php
Pour l’utiliser, voici la commande :
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 90 -interlace JPEG puzzle_converted.jpg
Il est possible de jouter sur le paramètre -quality : 90 ( 0 : Qualité mauvaise / Poids réduit – 100 : bonne qualité / Poids augmenté)
La checklist pour l’optimisation des images :
Voici un rappel sur les points important à penser pour le choix du format de l’image ou la manière de les optimiser.
- Utiliser un format vectoriel : Les formats vectoriels sont parfaits pour s’adapter à toutes les résolutions (très haute définition) et tous les devices.
- Minifier et compresser les SVG : Certaines informations du format SVG (écrites en XML) peuvent être supprimées car inutiles. Vérifiez que la compression Gzip est bien activée sur votre serveur
- Faire différents essais dans les paramètres de compression : Essayez différentes configurations pour optimiser vos images pour obtenir de bons résultats.
- Supprimer les données inutiles : Supprimez les données EXIF inutiles, très souvent les photos contiennent des informations comme l’heure, la date, la position géographique, l’appareil utilisé… Elles prennent de la place pour rien autant les supprimer.
- Délivrer les images à la bonne taille : Retailler les images à la bonne taille. Il faut que la taille soit la plus proche de celle qui est affichée.
- Automatiser le processus: Essayez d’automatiser au maximum le processus d’optimisation de vos images, gain de temps et d’argent 😉
Fait appel à mes prestations Prestashop
Audit de quelques sites internet :
Je vais faire un audit rapide sur les images de 3 sites choisis au hasard sur le showcase de Prestashop (https://www.prestashop.com/fr/showcase – d’ailleurs pour les SEO et autres, il est possible de proposer votre boutique et gagner un backlink dofollow)
Carré d’artistes :
Le site se charge entre 3 et 5 secondes, au premier chargement sans scroller, il charge 85 images (dont une vingtaine de tracking) pour un poids avoisinant les 550 Ko. Une fois que l’on scrolle jusqu’en bas de la page, ce ne sont pas moins d’une trentaine d’images qui sont chargées pour atteindre les 3.3 Mo. Le principe de « lazy loading » est très bien utilisé ici, car il permet de ne charger les images que si l’utilisateur arrive dans la zone de l’image
Les bonnes pratiques utilisées par carré d’artiste:
- Utilisation d’un CDN cloudflare
- Images délivrées via le protocole HTTP/2
- Images de taille adaptée au thème
Le slip Français :
Pour le chargement du Slip Français, c’est quasi similaire à carré d’artistes (Nous sommes en moyenne à 5 secondes de chargement – sans scroll) pour 88 images chargées et un poids total de 1 Mo (le double du site précédent)
Une fois scroller jusqu’en bas de la page, seulement 20 images sont de nouveaux chargées et 1 Mo d’images supplémentaire.
Les détails :
- Pas de HTTP/2,
- Pas de CDN,
- Les images les plus lourdes (900 Ko pour 2 images) peuvent être optimisées pour diviser leur poids par 2.
K-Way :
Le site K-Way, lui charge en plus de 5 secondes pour seulement 14 images pour toute la page. Pas de « Lazy loading » ici mais la page d’accueil ne contient pas énormément d’image.
Ici, pas de CDN, ni de HTTP/2. Une des images de 350ko mets 1 seconde à se charger de mon côté.
Alibaba et Amazon : Deux poids lourds du E-commerce
Essayons voir ce que vallent 2 très gros sites dans l’univers du e-commerce.
La page d’accueil du site www.alibaba.com, charge 49 images pour un poids total de 1.2 MB sur les 1.9 MB que fait la page total (HTML / Javascript / CSS…).
Alors que le temps total de chargement est de 3.3 secondes (environ) ce qui est vraiment bien.
Les solutions utilisées par Alibaba pour optimiser ses images.
- Images compressés au maximum sans trop perdre de qualité
exemple de l’image la plus lourde sur la page d’accueil (env. 360 Ko)
Google PageSpeed considère que l’image peut encore gagner du poids mais il ne faut pas trop pousser l’optimisation au risque de dégrader l’image.
- Images délivrées via un CDN
- Protocole HTTP/2
- Format WebP pour les utilisateurs de Google Chrome (pour Alibaba),
Conclusions :
Avec tous ces éléments, on voit qu’il est important d’optimiser ses images mais aussi la façon dont elles sont délivrées aux visiteurs. Le protocole HTTP/2, l’utilisation d’un CDN, la compression Gzip sont autant de solutions sur lesquelles il faut se pencher.