Des images légères pour votre référencement

Prestashop 1.7 – SEO – Diminuer le poids des images (ép.2)

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.

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 ! (8 votes, moyenne : 4,13 sur 5)
Loading...

9 commentaires sur “Prestashop 1.7 – SEO – Diminuer le poids des images (ép.2)”

  1. 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.

    1. 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 !

  2. 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

  3. 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 ?

    1. 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 !

  4. 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 !

    1. 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 !

Laisser un commentaire

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