Plus un site e-commerce est rapide, plus il sera apprécié par Google et forcément c’est bon pour votre référencement. Il est important d’optimiser le poids des images même à l’ère de l’ADSL et de la fibre optique.
La taille des images ça compte
On se rend rarement compte que les sites e-commerce sont lourds à charger, car les navigateurs et la bande passante internet sont actuellement performants. Pourtant, il n’est pas rare de voir 5 à 10 Mo d’images à télécharger sur une page… c’est énorme. Bien souvent je vois ça avec des sliders Prestashop et des images non optimisées en format arrière-plan.
Au niveau des produits, il est aussi possible de faire un effort en baissant la qualité du Jpeg, par défaut la valeur est à 90… mais on peut déjà descendre à 70 pour gagner un peu sur le poids. Si vous avez un listing de 1000 produits sur une page… ça va vite faire la différence… encore plus sur mobile où là la bande passante est limitée.
De ce que je vois, l’optimisation des images n’est pas souvent abordée (au niveau du poids), bien sûr il y’a encore l’importance de la balise « ALT » à spécifier sur l’ensemble de vos images produits (mais normalement c’est déjà automatique). Bon, de toute façon je pense que vous l’aurez compris… le plus important c’est d’avoir un site qui soit rapide et comme un site e-commerce comporte beaucoup de photos… il faut les compresser au maximum de manière massive.
Comment optimiser les images de son Prestashop ?
- La rapidité d’un site = point déterminant pour Google.
- Contrôlez le poids de vos images avec l’onglet Network de Google Chrome.
- Re-générez vos miniatures et faites la comparaison.
- Optimisez les images externes en faisant une compression de chaque image avec compressjpeg ou tinypng (il suffira ensuite de remplacer l’image source avec celle compressée).
- Vérifiez si les images de votre thème sont plus grandes que nécessaire, si c’est le cas pensez à créer un nouveau type de miniature pour avoir une image 100% ajustée, afin de ne pas consommer des ressources inutilement.
- Utilisez un service comme fasterimage, afin de gagner en vitesse de chargement. De plus, ils proposent un module compatible avec Prestashop.
Salut,
Depuis l’existence de l’ADSL, les développeurs et designer ont oubliés l’importance du poids d’une page web.
Suite à ton article, j’ai tester fasterImage … et j’ai même pris la version payant après le test tellement leur système est intéressant, surtout sur PrestaShop où il suffit d’installer le module pour que toutes les images soient traitées.
Leur service est double, réduction du poids des images à afficher et surtout CDN pour les appeler, ce qui libère la puissance du serveur pour afficher le reste, donc grosse amélioration de performance en perspective.
Sachant que j’utilise déjà un CDN pour afficher mon site, fasterImage semble aire encore mieux.
Hello,
Ah oui effectivement j’ai pas parlé de la mention CDN qui va utiliser un serveur potentiellement proche du client pour que le chargement se fasse plus vite.
Bonne nouvelle si en plus ton expérience est positive, il faudra que je le teste à l’occasion… (j’ajoute ça sur ma pile de choses à regarder).
D’ailleurs j’imagine aussi que cela doit faciliter l’amélioration de la note Google Speed, surtout au niveau des images…
A bientôt et merci encore pour ton retour d’expérience !
Hello à tous,
Suite à cet article l’entreprise Shortpixel m’a contacté pour me montrer qu’eux aussi avaient un service intéressant à proposer : https://shortpixel.com/
Si vous êtes intéressé vous pouvez regarder leur manuel d’intégration : https://shortpixel.com/web-tool-docs
Voilà… c’est à expérimenter ! A bientôt !
bonjour,
help help please,
toute aller bien avec la création du site, je suis chez ovh,
j’ai toucher au service web activer les 2 par oui.
modifier trafic et seo, sans faire attention, j’ai changer le chemin d’accés :/.
par le nom du site.
est là le drame je n’est plus accès au site internet ni au back office.
j’ai tout restaurer à – semaine ftp et bd mais rien de changer, mon site apparaît en page blanche et tout en une seul Colonne rrrrrrrrrrrrrrrrrr tous moche quoi.
vous penser que je peut résoudre ça comment, please help.
merci de me répondre.
sam
Bonjour,
Si vous avez des problèmes avec votre Prestashop, veuillez faire appel à un prestataire qui pourra vous aider.
Vous pouvez faire une demande ici : https://www.codeur.com/
Merci pour votre visite.
Dans la video tu mentionnes la balise ALT pour optimiser. Comment mettre cette balise ALT à jour pour chaque image ? est ce que c est via ‘ Code à insérer dans votre description’ que l on peut considerer pouvoir rentrer cette info qui sera considérer comme la balise ALT pour Google ?
Hello,
En ce qui concerne les produits, cela est automatique « ALT = légende de l’image », par contre si vous insérez des images dans vos pages CMS par exemple, il est intéressant de penser à renseigner cette balise ALT pour le référencement.
A bientôt !
Bonjour et un grand merci pour tout ce que j’ai appris à faire, grâce à vos tutoriels.
Quand vous avez indiqué qu’on peut utiliser un service comme « fasterImage », je me suis demandé pourquoi les hébergeurs ne le font pas directement et, considéré que j’ai l’intention d’héberger mon site chez 1&1, j’ai fait une recherche. J’ai trouvé cette astuce et j’aimerai connaitre votre avis. Merci d’avance. Imed (Tunisie)
https://startupeers.co/hebergement-activer-la-compression-gzip-chez-1and1/
La compression GZIP peut permet de réduire drastiquement le poids des pages et donc d’accélérer leur affichage. 1and1 n’active pas cette option ni sur les serveurs mutualisés ni sur les serveurs dédié.
Il existe des moyens détournés d’activer la compression GZIP sur votre hébergement 1and1 !
L’astuce décrite ci-dessous permet en effet d’envoyer aux navigateurs qui viendront consulter les pages de vos sites web des versions compressées de ces dernières, mais attention le prix à payer est que la compression sera une tache supplémentaire demandée au serveur apache. En fonction de la puissance de votre serveur, cela peut améliorer le temps de chargement pour vos visiteurs ou l’empirer si votre serveur n’est pas assez puissant. Le mieux étant bien sur de le tester, la manipulation n’étant pas compliquée et le retour arrière très facile.
1/ Modifier le .htaccess
Ajouter les lignes suivantes en début de fichier, cela indique à votre serveur apache de traiter également les fichiers html et htm (afin de les compresser à la volée, ce que nous verrons plus bas). Le RemoveHandler n’est pas obligatoire mais pour Startupeers la compression des fichiers CSS générait des dysfonctionnement d’affichage.
AddHandler x-mapp-php6 .php .html .htm .txt .css .js
RemoveHandler .css
2/ Créer un fichier Gzip.php
C’est lui qui va se charger de compresser vos fichiers à la volée. Vous pouvez le déposer n’importe où à la racine de votre répertoire contenant vos fichiers web. Ajoutez y les lignes suivantes entre les balises « » :
if (isset($_SERVER[‘SCRIPT_FILENAME’])) {
$timestamp = filemtime(__FILE__);
header(‘Last-Modified: ‘ . $timestamp);
$expires = 60*60*24*14;
header(« Pragma: public »);
header(« Cache-Control: maxage= ».$expires);
header(‘Expires: ‘ . gmdate(‘D, d M Y H:i:s’, time()+$expires) . ‘ GMT’);
header(‘Vary: Accept-Encoding’);
$pathinfo = pathinfo($_SERVER[‘SCRIPT_FILENAME’]);
$extension = $pathinfo[‘extension’];
if ($extension == ‘css’) {
header(‘Content-type: text/css’);
}
if ($extension == ‘js’) {
header(‘Content-type: text/javascript’);
}
}
3/ Créer un fichier php.ini
À copier dans tous les répertoires de votre site. Ajoutez y les lignes suivantes sans oublier de modifier le chemin vers le répertoire contenant le fichier gzip.php.
#regle la compression
zlib.output_compression = On
zlib.output_compression_level = 8
auto_prepend_file=[chemin vers votre dossier web]/gzip.php
AllowOverride All
#Masque les warning et erreurs
display _errors = off
4/ Tester la compression
En vous rendant sur ce site vous allez pouvoir vérifier que vos pages sont maintenant compressées avant d’être envoyées et que vos performances s’en trouvent améliorées !
Enjoy 1and1 !
Hello,
Je confirme que la compression Gzip est une bonne manière de faire, car effectivement elle peut faire gagner du temps au chargement (en standard les hébergements n’ont pas forcément une configuration de cache optimisée « active »). En ce qui concerne les images, il faut s’attaquer à la source et « recompresser » l’image d’origine, c’est la seule solution (c’est toujours ça de moins à télécharger pour l’affichage de la page).
Merci pour le retour d’expérience !
Bonjour,, que pensez vous du format WebP ? IL n’est pas inclus dans prestashop mais je crois savoir que des modules proposent ce format pour moins de 40€. Toutefois ils ne précisent jamais si cela « remplace » les images originales en JPG (et donc réduis ensuite la compatibilité avec les anciens navigateurs), ou si les modules vérifient avant que le navigateur est compatible (et sinon, affichent les jpg et non pas les webP)
Bonjour,
Le concept du format WebP est très intéressant… mais j’ai l’impression que c’est pas encore très répandu (même si sur Prestashop il existe des modules pour ça)… certainement que cela cause d’autres contraintes technique à l’utilisation.
A bientôt !
bonjour,
j’ai une petite question
j’aimerai compresser mes images qui doivent être un peu lourdes..
Je peux utiliser prestashop qui je crois le propose en natif ou les modules indiqués, les versions payantes si j’ai bien compris.
Par contre, j’aimerai pouvoir sauvegarder les images existantes en cas ce couac comme cela arrive… notamment la regeneration des miniatures qui peut ne pas se faire sur prestashop correctement notamment avec les problemes de bande passante. Comment le faire de manière sûre?
mon idée serait la suivante :
– copier le fichier img à la racine de mon site.
– Tester les modules de compression . si tout fonctionne très bien, sinon restauration du fichier img en copier deposer depuis le ftp?
Les deux choses qui me genent sont les suivantes : mes images sont deja references, je ne souhaite pas perdre mon referencement et encore moins les images sur mon site…
Merci pour la reponse
Bonjour,
Les images des produits Prestashop sont déjà recompressées en standard, mais si vous devez re-générer toutes vos miniatures il est préférable d’utiliser un module qui les traite en Ajax progressivement :
https://addons.prestashop.com/fr/edition-rapide-de-masse/19228-regenerer-miniatures-images-pour-grands-catalogues.html
Et pour optimiser encore plus toutes les images sources (y compris extenes), il faudrait utiliser un module Prestashop du type
https://addons.prestashop.com/fr/performance-site/22488-compresseur-d-images-avec-tinypng.html
Avant de le faire vous pouvez juste vous assurer d’avoir une sauvegarde complète de votre shop chez votre hébergeur.
A bientôt !