Expert e-commerce depuis 2000

Le guide pratique
pour optimiser
son site Prestashop

Dévouvrez nos conseils pour améliorer les performances de votre boutique en ligne.

Exemples de sites institutionnels Joomla

Dans ce guide, je vais vous présenter plusieurs pistes pour optimiser les performances de votre boutique eCommerce PrestaShop avec un objectif simple : augumenter vos ventes. Améliorer les performances d’une boutique en ligne est positif à bien des égards. Tout d'abord, il améliore votre référencement naturel car Google aime bien les sites rapides et bien optimisés. Secondo, il va améliorer votre taux de conversion car plus vous aurez de visites, plus vous allez augumenter vos ventes. Enfin, plus vous améliorer l'expérience utilisateur UX (User eXperience) et l'interface utilisateur (UI designer = User Interface) pour créer une interface simple, agréable et pratique, facile à prendre en main ; plus votre image aura un impact sur vos visiteurs et votre marque.

Les bases de l'optimisation Prestashop

Pour atteindre votre objectif, vous devez vous armer de patience et suivre ma méthode. Je ne vais pas chercher à inventer de nouvelles choses mais simplement appliquer des règles de bonnes pratiques suivants plusieurs axes. Aujourd'hui lorsque vous démarrer un projet de création de site e-Commerce, bien peu ce soucis de la notion d'Expérience Utilisateur (UX) et pourtant.

Prestashop ne fait pas exception à la règle, et son interface de cesse de s'améliorer au fil des ans et des nouvelles versions. Gardez toujours à l'esprit que plus un outil et simple et facile à naviguer, plus vos visiteurs garderont une image positive de votre site. Et pourtant ! Le constat et plutôt négatif. Pourquoi ? Même si Prestashop et une solution CMS bien construite sur un nouveau noyau Symfony qui gère le cache de manière optimale, il n'en demeure pas moins que ce que retiendrons vos visiteurs c'est la rapidité à laquelle les pages s'ouvrent, la manière dont l'organisation de votre site et faite, combien de temps et de clics il faut pour passer commande mais aussi et surtout comment les choses sont présentées et organisées pour facilité la navigation.

Par où commencer ?

Voici les étapes à suivre pour créer un site prestashop de qualité professionnel. Cela suppose que vous disposiez déjà d'un nom de domaine (ex. www.maboutiqueenligne.com)

L'hébergement

Pour bien démarrer un projet, il faut impérativement choisir un serveur de qualité. Elle dépend de plusieurs facteurs qui sont la puissance et le nombre de core du processeur, la quantité de mémoire vive,  le type de dique dur sur lequel l'application sera installée et enfin la qualité de la bande passante. En effet, ce n'est pas la peine d'avoir un serveur démesuré, si derrière, vous avez une bande passante médiocre qui devient un goulet d'étranglement.

Pour nos clients, nous prévoyons au moins 6 Go de stockage, de PHP 7.4, d'une base de données MySQL / MariaDB et d’au moins 512 Mo de RAM. Les disques durs sont des SSD bien plus rapident que les disques mécaniques traditionnels. A cela s'ajoute une sauvegardes des données sur les 7 derniers jours plus les 2 dernières semaines sur des lieux de stockage distants. La bande passante et au minimum fixée à 1Go/s.

L'installation de Prestashop

Un fois le paramétrage du serveur effectué dans les règles de l'art, vous pouvez démarrer l'installation de la solution Prestashop dans sa dernière version. Dans notre cas nous en sommes à la version 1.7.8.X. Je ne rentre pas dans le détail des accès FTP pour déposer vos fichiers sur votre serveur mais pensez à utiliser un nom d'utilisateur différents à chaque installation et un mot de passe complexe avec au moins 12 caractères alphanumériques comprenant des chiffres, des minuscules, des majuscules, des caractères spéciaux. Pour cela j'utilise les services en ligne d'un générateur de mot de passe aléatoire :  https://www.motdepasse.xyz/

Ensuite, nous installons manuellement Prestashop sur le serveur car nous souhaitons maitriser de bout en bout toutes les options. Vous pouvez-vous appuyer sur le guide proposé sur le Blog Prestastop. Au cours de l'installation choisissez un identifiant différent à chaque fois pour l'administrateur du site et un mot de passe basé sur les mêmes règles que l'accès FTP et la base de données.

Maintenant que votre site Prestashop est en place, nous allons travaillé sur la partie graphique afin de le personnalisé avec votre logo et vos couleurs dominantes. Il convient d'avoir au préalable une charte graphique de qualité.

Personnalisation graphique de Prestashop

Nous proposons plusieurs solutions graphiques en fonction du besoin de chacun de nos clients. Soit nous nous basons sur le modèle de base de Prestashop "classic", soit nous installons un template (modèle graphique) que nous achetons et que nous customisons. Nos critères de sélection sont stricts car ces modèles doivent être récents et compatibles avec la version de Prestashop que nous venons d'installer. Ces modèles sont très complets et proposent des modules complémentaires répondant à des besoins bien précis. Par exemple, la gestion du menu horizontal ou vertical avec Megamenu, la gestion d'un éditeur de contenu évolué (Page Builder) comme Elementor ou un équivalent. Ce type de module vous permet de créer des pages complexes s'appuyant sur Bootstrap et sa mise en forme sur 12 colonnes.

Penser Mobile First

Aujourd'hui, jusqu'à 70% des internautes utilisent leur mobile pour surfer sur Internet. Il est donc impératif de créer votre site au format "Responsive Design". Cela signifie qu'il doit s'adapter en fonction du support choisi par l'internaute (mobile, tablette, PC). Maintenant on doit pensez d'abord à créer son site pour la version mobile et ensuite on réalise la version pour PC. C'est cela que nous appelons "Mobile First". Avant c'était le contraire.

Optimisation UX / UI

Lorsque vous utilisez Prestashop 1.7.X, l'expérience utilisateur (UX) a été pensée pour que votre confort de navigation soit optimale et calculée en fonction d'un parcours qui va du choix du produit à son ajout au panier, en passant par la création de votre compte jusqu'à la prise de commande. Tous ces flux sont créés pour que l'internaute puisse se repérer facilement entre les pages, les familles de produits, les produits, le canal de commande, son compte client, etc. C'est ce qu'on appelle l'expérience utilisateur. Mais cela ne suffit pas, il faut facilité l'interface utilisateur (UI) en proposant des astuces graphiques ou techniques qui vont plus facilement guider le parcours du visiteur en jouant sur la couleur, la taille des boutons en version mobile, le placement des zones d'accès au menu produits et menu utilisateur. C'est l'ensemble de ce travail et des choix effectués qui vont donner à votre site une vraie valeur ajoutée et de meilleurs résultats dans vos ventes.

Optimiser son site Prestashop

Maintenant que votre site est en place, nous allons passer en revue les points suivants.

Optimiser

Optimiser toutes les images de votre site

Il existe divers moyens d'optimiser les images de sont sites pour gagner de précieuses millisecondes en temps de chargement.

FileOptimizer

Pour démarrer je vous propose FileOptimizer sous Windows. Cet outil permet de compresser davantage les fichiers déjà compressés sans changer le format tout en étant totalement compatible. Il garde le comportement intact du fichier intact mais réduit sa taille à l'aide de plusieurs techniques de recompression et d'optimisation.

FileOptimizer est développé par Javier Gutiérrez Chamorro (Guti) et le téléchargement peut se faire ici : FileOptimizer

Ouvrir l'application FileOptimizer

Ouverture de l'optimiseur d'image pour Prestashop

Ajout d'images ou dossiers

Ajouter des fichiers (Shift+Ins) ou des dossiers (Ctrl+Ins)

Ajout d'images et de dossiers d'images pour réduire leur taille et améliorer votre référencement naturel sur Google

Executer l'optimisation des images

Lancer l'optimisation de tous les dossiers et images sélectionnés.

Tous les formats d'image sont pris en compte avec FileOptimizer : jpeg, gif, png, ..

Mesurer les résultats

En haut à gauche ou en bas à gauche, vous pouver visualiser les optimisations réalisées

Vérifer le gain réalisé à travers FileOptimizer

Page Speed Optimization

Vous pouvez optimiser la totalité de vos images depuis votre site Prestashop en installant le module payant Page Speed Optimization : Cache, Minify, WebP, Compression & Plus. Il s'agit d'un outil très puissant qui demande de bonnes connaissances en informatique et une très bonne maîtrise du CMS Prestashop.

Tableau de bord

Le tableau de bord dispose d'un zone d'accès rapide à tous les moyens d'optimisation de votre site, que ce soient les images, le cache Smarty, les minifications HTML et CSS, les Modes Gzip ou Deflate, le cache des Pages, la mise en place d'un serveur d'images WebP, la compression et le Lazy load (Le lazy loading est le fait de charger les images et vidéos en différé pour afficher en priorité les éléments indispensables sur la page web).

Tableau de bord du module d'optimisation pour Prestashop Page Speed Optimization

Optimisation des images

Un onglet est réservé uniquement à l'optimisation des images. Il regroupe à lui seul toutes les possibilités offertes par Page Speed Optimization pour réduire la taille de vos images sur tout le site (produits, catégories, fournisseurs, fabricants, thèmes, modules, CMS). La mise en oeuvre est très simple puisqu'il suffit simplement de suivre les explications proposées et en cliquant sur les boutons "Play" pour lancer une série d'optimisation d'images.

Lancement d'une série d'optimisation d'images produits d'un site Prestashop

Une option très importante permet de compléter les balises Alt vides de vos images. Pour cela vous pouvez créer une syntaxe basée sur des mmots clés comme ceci : {PRODUCT_NAME} {MANUFACTURER_NAME} - {IMAGE_POSITION}

Ensuite il ne vous reste plus qu'à générer les balises manquantes de manière totalement automatisée.

Optimisation des balise Alt des images d'un site Prestashop

Conversion WebP

Le format WebP a été développé par Google il y a plus de 10 ans. Il permet un chargement plus rapide des pages web car il est jusqu'à 80% plus léger que le JPEG. Ce n'est qu'à partir de 2018 que la plupart des navigateurs ont intégrés l'utilisation du format WebP qui permet de compresser vos fichiers sans altérer leur qualité.

Aujourd'hui, il est plus que recommandé de proposer du format WebP pour améliorer votre référencement sur Google.

Le rendu au format WebP n'est rendu possible sur Prestashop qu'avec un module comme Page Speed Optimization. Pourquoi ? Parce-qu'il faut non seulement transformer les images dans ce nouveau format mais en plus il faut changer le type mime pour l'indiquer aux navigateurs.

Optimisation des images d'un site Prestashop au format WebP, le nouveau format imposé par Google pour réduire jusqu'à 80% la taille des images et le temps de chargement des pages

Optimiser les catégories de son site Prestashop

Si vous souhaitez améliorer votre positionnement sur Google, il faut impérativement travailler le contenu de vos catégories.

Il faut commencer par optimiser les images de manière à les compresser au maximum soit en utilisant un optimiseur d'images sous Windows FileOptimizer, soit en installant un module comme Page Speed Optimization qui va s'occuper de cette tache pour vous. Je vous invite à suivre les indications proposées dans "Optimiser toutes les images de votre site".

Ensuite nous devons travailler les contenus SEO de chacune des catégories de manière à proposer à Google, un titre et une description bien construite et riche en mots clés.

Voici un exemple :

Optimisation des balises SEO d'un site Prestashop

Prévoyez un titre de 70 caractères et une description de 160 caractères. Respectez les règles d'usage en matière de construction de contenu et soyez le plus précis possible. Ne cherchez pas à copier du contenu d'un site concurrent mais cherchez plutôt à innover. Cela vous permettra de vous démarquer des autres. Google aime bien !

Optimiser les produits de son site Prestashop

Si vous souhaitez améliorer votre positionnement sur Google, il faut impérativement travailler le contenu de vos produits.

Il faut commencer par optimiser les images de manière à les compresser au maximum soit en utilisant un optimiseur d'images sous Windows FileOptimizer, soit en installant un module comme Page Speed Optimization qui va s'occuper de cette tache pour vous. Je vous invite à suivre les indications proposées dans "Optimiser toutes les images de votre site".

Ensuite nous devons travailler les contenus SEO de chacun des produits de manière à proposer à Google, un titre et une description bien construite et riche en mots clés.

Voici un exemple :

Optimisation des balises SEO d'un site Prestashop

Prévoyez un titre de 70 caractères et une description de 160 caractères. Respectez les règles d'usage en matière de construction de contenu et soyez le plus précis possible. Ne cherchez pas à copier du contenu d'un site concurrent mais cherchez plutôt à innover. Cela vous permettra de vous démarquer des autres. Google aime bien !

Optimiser les marques de son site Prestashop

Si vous souhaitez améliorer votre positionnement sur Google, il faut impérativement travailler le contenu de vos marques.

Il faut commencer par optimiser les images de manière à les compresser au maximum soit en utilisant un optimiseur d'images sous Windows FileOptimizer, soit en installant un module comme Page Speed Optimization qui va s'occuper de cette tache pour vous. Je vous invite à suivre les indications proposées dans "Optimiser toutes les images de votre site".

Ensuite nous devons travailler les contenus titre et description puis la partie SEO de chacune des marques de manière à proposer à Google, des contenus bien construits et riches en mots clés.

Optimisation du contenu

Il faut bien construire son titre et son résumé en étant très précis sur la marque à présenter.

Concernant la description, il faut respecter la règle des Hn en démarrant par H2 car le H1 est réservé au Nom du produit. Pour le contenu il faut ajouter des images en n'oubliant pas de renseigner la balise Alt qui est très importante aux yeux de Google. Pour un description de qualité, prévoir au moins 300 mots en utilisant les H3 et H4. Pour les mots clés en relation avec la marque, les passer en gras avec la balise strong.

Optimisation des contenus d'une marque sur Prestashop

Optimisation de la partie SEO

Prévoyez un titre de 70 caractères et une description de 160 caractères. Respectez les règles d'usage en matière de construction de contenu et soyez le plus précis possible. Ne cherchez pas à copier du contenu d'un site concurrent mais cherchez plutôt à innover. Cela vous permettra de vous démarquer des autres. Google aime bien !

Optimisation de la partie SEO des marques pour Prestashop

Optimiser les pages CMS de son site Prestashop

Si vous souhaitez améliorer votre positionnement sur Google, il faut impérativement travailler le contenu de vos pages CMS.

Il faut commencer par optimiser les images de manière à les compresser au maximum soit en utilisant un optimiseur d'images sous Windows FileOptimizer, soit en installant un module comme Page Speed Optimization qui va s'occuper de cette tache pour vous. Je vous invite à suivre les indications proposées dans "Optimiser toutes les images de votre site".

Ensuite nous devons travailler les contenus titre et description puis la partie SEO de chacune des pages CMS de manière à proposer à Google, des contenus bien construits et riches en mots clés.

Optimisation du contenu

Il faut bien construire son titre en étant très précis sur le contenu de la page CMS à présenter.

Concernant la description, il faut respecter la règle des Hn en démarrant par H2 car le H1 est réservé au Nom du produit. Pour le contenu il faut ajouter des images en n'oubliant pas de renseigner la balise Alt qui est très importante aux yeux de Google. Pour un description de qualité, prévoir au moins 300 mots en utilisant les H3 et H4. Pour les mots clés en relation avec le thème à présenter, les passer en gras avec la balise strong.

Optimisation SEO d'une page CMS Prestashop

Optimisation de la partie SEO

Prévoyez un titre de 70 caractères et une description de 160 caractères. Respectez les règles d'usage en matière de construction de contenu et soyez le plus précis possible. Ne cherchez pas à copier du contenu d'un site concurrent mais cherchez plutôt à innover. Cela vous permettra de vous démarquer des autres. Google aime bien !

Optimiser les temps de chargement des pages

Il y a deux choses à activer pour optimiser le chargement de vos pages pour un site Prestashop.

Rendez-vous dans CONFIGURER -> Paramètres avancés -> Performances.

Activation du cache Smarty

Vous devez paramétrer le cache Smarty comme ceci :

Optimisation des temps de chargement des pages avec le cache Smarty

CCC (Concaténation, Compression et mise en Cache)

Vous devez activer les 3 options comme ceci :

Activation de la concaténation, compression et mise en cache pour un site Prestashop

Découvrir

La structure de maillage interne en silo

La structure en silo est une méthode consistant à séparer de manbière claire et précise les différentes thématiques de votre site.

Cela n'a d'intérêt que si vous disposez d'une grande diversité entre vos catégories (ex. produits alimentaires, chaussures, téléphonie, ..). C'est ce que l'on retrouve chez les gros sites tels que Amazon, Rue du Commerce, Cdiscount, Rakuten et bien d'autres.

Le maillage interne mixé avec l'architecture en silo va permettre de cloisonner vos différents segments en travaillant le contenu de manière très ciblée sur un même sujet.

Dans ce cas précis, on parle de l'architecture du site internet en silo et du maillage interne. Tout cela donne naissance au cocon sémantique un concept français créé par Laurent Bourelly consultant en référencement.

Cocon sémantique

Il peut être présenté de la manière suivante :

Principe de présentation graphique du cocon sémantique d'un site Internet réalisé sur PrestaShop

Vous l'aurez compris, cette manière de créer son site dans le but d'améliorer votre stratégie de référencement naturel est adapté pour des clients qui veulent aller encore plus loin.

Toutes les pages et tous les liens d’un cocon sémantique sont pensés pour gagner en visibilité, tout en apportant les réponses aux visiteurs attirés par la thématique choisie.

  • Vérifier que les options SEO & URL soient bien paramétrées
  • Vérifier que Google Analytics soit bien présent sur vos pages
  • Vérifier que les options de caches CCC soient actifs
  • Vérifier que le processus de commande fonctionne correctement
  • Vérifier la version mobile jusqu'au paiement.
  • Gagner de nouveaux clients avec Google ADS.
  • Mesurer les résultats et optimiser encore et encore.