Le guide pratique
pour optimiser
son site Prestashop
Dévouvrez nos conseils pour améliorer les performances de votre boutique en ligne.
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.
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.
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)
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.
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é.
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.
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.
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.
Maintenant que votre site est en place, nous allons passer en revue les points suivants.
Il existe divers moyens d'optimiser les images de sont sites pour gagner de précieuses millisecondes en temps de chargement.
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
Ajouter des fichiers (Shift+Ins) ou des dossiers (Ctrl+Ins)
Lancer l'optimisation de tous les dossiers et images sélectionnés.
En haut à gauche ou en bas à gauche, vous pouver visualiser les optimisations réalisées
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.
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).
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.
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.
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.
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 :
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 !
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 :
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 !
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.
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.
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 !
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.
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.
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 !
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.
Vous devez paramétrer le cache Smarty comme ceci :
Vous devez activer les 3 options comme ceci :
La structure en silo sur PrestaShop 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 sur PrestaShop 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.
Il peut être présenté de la manière suivante :
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 sur PrestaShop sont pensés pour gagner en visibilité, tout en apportant les réponses aux visiteurs attirés par la thématique choisie.
Créateur de site Internet depuis 2000
Agrément formation N° 82 42 01433 42
N° Data Dock : 0037761