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

Mettre sa boutique en maintenance et accéder à sa boutique  | Prestashop 1.6 et 1.7
views 4404
Lorsque vous désirez effectuer de grands changements sur votre boutique, je vous conseille de mettre votre boutique en maintenance c'est à dire de signaler à vos clients que votre site  est temporairement inaccessible. Vous seul aurez accès à votre boutique pour voir les changements. Si vous travaillez en local, le mode maintenance est inutile dans la mesure où les internautes n'y ont pas accès...
Insérer pop-up dans une page CMS | Astuce Prestashop 1.6
views 3616
Un client désirait insérer un système de pop-up dans la page cms de Prestashop Je ne voulais pas installer un n-ième module pour faire simplement cela ni insérer un autre script/bibliothèque que ceux inclus dans Prestashop. Cette astuce Prestashop est valable pour la version 1.6 Voilà l'astuce. ------------ 1) Ouvrir un ficher qui se nommera Validate.php, insérer le code suivant...
Petit aperçu du thème Classic de prestashop 1.7
views 6258
Prestashop vient de sortir la version  1.7.0.0 RC0. A noter, par rapport à la version Prestashop 1.6, le thème a été totalement repensé afin d'être plus minimaliste, fonctionnel et ergonomique. Il faut savoir aussi que la migration de Prestashop 1.6, 1.5....  vers  PrestaShop 1.7 sera impossible. D'un point de vue perso : - je ne suis pas fan des couleurs en particulier le gris (je l...
Le nouveau menu du back-office de Prestashop 1.7 – Partie 3
views 14305
Pour rappel, le menu du back-office de Prestashop 1.7 est organisé en 3 parties : Vendre qui regroupe les commandes, le catalogue, les clients, le SAV et les statistiques (voir l'article)  Personnaliser qui regroupe les modules, le design, le transport, le paiement et l’international Configurer qui regroupe les préférences et les paramètres avancés. Dans cet article, nous allons ...
Supprimer le nom de la boutique de la balise Meta Title| Astuce Prestashop 1.6
views 2450
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 *