Améliorer les performances de votre boutique Prestashop 1.6

A) Connaitre les performances de sa boutique Prestashop

Lorsqu’un internaute arrive sur votre site de vente en ligne en général il n’a pas la patience d’attendre le chargement d’une page.

Par conséquent, plus le temps de chargement est long, plus le taux d’abandon est important.

Aujourd’hui, il existe de nombreux sites pour tester la  performances de son site ecommerce, en ce qui me concerne j’utilise ces deux la :

1) Gtmetrix (voir le site)

Optimiser les performances de votre boutique Prestashop

2) PageSpeed Insights de Google (voir le site)

Optimiser les performances de votre boutique Prestashop

B) Réglage des options de performance depuis le back-office Prestashop

Depuis le back-office de  Prestashop, allez dans l’onglet Paramètres Avancés > Performances

a) Réglages de  Smarty

Smarty est un système de templates utilisé par le cms Prestashop, pour la gestion de vos templates. Malheureusement, il est gourmand en ressources, je vous conseille donc de configurer les paramètres comme ci-dessous .

– Cochez ne jamais “Ne jamais recompiler les fichiers de templates.”
– Cochez cache activé (permet la mise en cache des fichiers)

En phase de développement, lorsque vous désirez modifier les fichiers TPL/CSS/JS, il faut cocher “Recompiler les fichiers de templates s’ils ont été mis à jour” pour que les modifications soient prises en compte.

Améliorer les performances de votre boutique | Astuce Prestashop

b) Réglages de CCC (Concaténation, Compression et mise en Cache)

Dans cette partie, il faut activer tous les onglets :

Smart cache pour les feuilles de style : ce réglage permet de réunir l’ensemble des fichiers CSS en un seul fichier CSS réduisant ainsi le temps de chargement.

Smart cache pour le code JavaScript : ce réglage permet de réunir l’ensemble des fichiers JS en un seul fichier Javascript, réduisant ainsi le temps de chargement.

Réduction du code HTML : ce réglage permet de réduire tous les espaces inutiles à l’intérieur de vos fichiers TPL.

Compression du JavaScript dans le code HTML :  principe identique que pour le Smart cache pour le code JavaScript.

Compression maximum du code HTML : ce réglage permet de compresser au max les fichiers TPL

Déplacer le code Javascript à la fin : ce réglage permet de forcer le chargement en dernier, ce qui permet à votre page Web de charger les éléments les plus simples de votre site en premier.

Optimisation apache : ce réglage changera la configuration de votre serveur Web afin de le rendre plus efficace dans le cadre des options CCC.

Attention, certains de ces réglages peuvent entrainer des bugs sur votre thème, une fois le CCC activé, je vous invite à tester votre site pour s’assurer que tout fonctionne correctement

Améliorer les performances de votre boutique | Astuce Prestashop

c) Réglages de Serveurs de média (utilisé uniquement lorsque CCC est activé)

Serveurs de média connus aussi sous CDN signifie : content delivery network. Il permet de dispatcher le chargement de vos différents fichiers (images, css, javascript…..) sur plusieurs serveurs.

L’idée est de créer 3 sous-domaines afin que le chargement des images, css, js…. se répartisse entre les 3 sous-domaines.

1) Depuis le back-office de votre hébergement exemple 1&1, ovh, gandhi…. il vous faudra créer 3 sous-domaines qui pointeront au même endroit que le domaine principal. .Exemple :

  • cdn1.nomdedomaine.fr
  • cdn2.nomdedomaine.fr
  • cdn3.nomdedomaine.fr

Améliorer les performances de votre boutique | Astuce Prestashop

2) Dans le back-office de Prestashop dans la partie “serveurs de media”, indiquez les trois champs de vos 3 sous-domaines

Améliorer les performances de votre boutique | Astuce Prestashop

Et voila, c’est tout….. Prestashop va modifier automatiquement votre .htaccess.

Maintenant, si vous visualisez votre site, vous verrez dans le code source que les urls  des images, css, js ont été subdivisés. L’assignation des CDN est aléatoire.

Ok alors quels sont les conséquences au niveau de la vitesse ? 

Après cette étape effectué, je vous conseille de faire une analyse de votre site sur Gtmetrix par exemple. An fonction de votre hébergement, il se peut que la création des cdn n’est pas l’effet souhaité, dans ce cas, je vous conseille de le désactiver et voir avec votre prestataire.

d) Réglages du Cache

Prestashop propose différentes options de cache serveur.

  • Système de fichier : l’ensemble des fichiers statiques sont stockés sur votre serveur.  Si vous choisissez cette option, il est possible de préciser le nombre de niveaux de l’arborescence. Par défaut, ce champs affiche 1. Ce qui correspond à la profondeur de répertoire du système fichier. Ne changez cette valeur que si vous savez ce que vous faites.
  • Memcached. Très efficace en particulier si vous utilisez plusieurs serveurs. Attention, si vous activez cette option, vous devez d’abord vous s’assurer que votre hébergeur vous permet de l’utiliser.  Si vous êtes sur un serveur mutualisé, il  est peu problable que cela fonctionne
  • APC. c’est une alternative gratuite mais encore attention, vous devez vous assurer que que l’extension PECL APC fonctionne sur votre serveur.
  • Xcache. ce système de cache, spécifique au serveur Lighttpd. Il ne fonctionnera pas avec le serveur Apache, l’un des plus populaires.
Personnellement j’utilise toujours celui par défaut : système de fichier 

Améliorer les performances de votre boutique | Astuce Prestashop

C) Optimiser les performances en compressant vos images 

Lorsque vous ferez une analyse de votre site avec Gtmetrix ou  PageSpeed Insights, vous aurez certainement comme résultat: “Optimiser vos images”.

En effet, Le poids des images est un élément important pour le chargement de vos pages. Plus vos images seront lourdes,plus la page mettra du temps à se charger

Personnellement, j’utilise le site en ligne TinyPng qui permet de compresser les jpg et png

Améliorer les performances de votre boutique | Astuce Prestashop

C) Optimiser les performances en utilisant les sprites CSS

Les sprites CSS permet de stocker sur un seul fichier l’ensemble de vos images. Il faut s’y connaitre un minimum dans les codes.

Vous pouvez consulter le site d’Alsacréation pour en savoir plus sur ce sujet 

Heureusement, des sites en ligne ont été créés pour générer ces sprites. Personnellement, j’utilise le site suivant : cliquez ici 

D) Optimiser les performances  en configurant votre fichier .htaccess

a) Activez la compression Gzip en insérant le code suivant :

Code 1 : 

Ou alors le Code 2 : 

Comment savoir si cela a fonctionné  ? 

Il existe des outils en ligne prêts à l’emploi comme : www.gidnetwork.comwww.whatsmyip.org ….

Le choix aussi de votre hébergeur est crucial. Si votre site est encore long malgré l’ensemble des optimisations, il se peut que cette lenteur vienne aussi du serveur de votre hébergeur. Je vous conseille de les contacter. 

Articles similaires

SPAM PRESTASHOP FORMULAIRE DE CONTACT
views 3220
Depuis qq temps, des robots de SPAM utilisent le formulaire de contact des boutiques PrestaShop pour envoyer des mails. Voici deux astuces  (les deux versions ont été testées)  pour la version Prestashop 1.6 - astuce 1 : I'm not a robot de google - astuce 2 : captcha invisible ASTUCE 1 1) Allez google Re-capcha : https://www.google.com/recaptcha/intro/invisible.html - En haut à droi...
Les modules installés par défaut sur le front-office de votre boutique | Prestashop 1.7
views 3156
La version Prestashop 1.7 officielle est sortie. La liste des modules installée par défaut sur votre boutique a considérablement diminué puisqu'il y a en plus que 19. Les noms ont aussi été modifiés. Pour les consulter, il faut aller dans le back-office de Prestashop Modules > Modules & Services > Gérer les modules installés Liens pour suivre sur réseaux sociaux Ce module permet...
Savoir si votre module est fiable pour Prestashop
views 338
Il existe aujourd'hui de nombreux modules (gratuits ou payants) et certains d'entre-eux peuvent avoir un impact négatif sur votre boutique (bug, lenteur....). Il existe deux astuces qui vont vous permettre de savoir si oui ou non vous pouvez installer le module sur votre boutique Prestashop 1) Utilisez le service de validation de Prestashop  Prestashop a créé un service qui permet de véri...
Désactiver les frais de port dans le block panier | Astuce Prestashop 1.6
views 5318
Pour éviter toute confusion, je préfère désactiver les frais de port dans le block panier. En effet, si le client n'est pas connecté à son compte, Prestashop indiquera les frais de port les moins chers. Hors si le client habite aux Etats-Unis, les frais de port peuvent considérablement varier et entrainer ainsi un risque d'abandon  lors de la finalisation de la commande. (voir depuis le débu...
Supprimer le nom de la boutique de la balise Meta Title| Astuce Prestashop 1.6
views 2598
Grâce à ce tuto, vous allez pouvoir supprimer le nom de votre boutique de la balise Meta Title de vos pages sur votre site e-commerce Astuce Prestashop 1.6 ---------------------------------- Dans un premier temps, nous allons overrider le fichier Meta.php. En effet ces dans ce fichier que nous allons supprimer le paramètre Configuration::get('PS_SHOP_NAME') qui fait référence au nom de vo...

Laisser un commentaire

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