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

Afficher les fournisseurs sur les pages produits | Astuce Prestashop 1.6
views 2823
Ce tuto va vous expliquer comment insérer les fournisseurs dans la page produit dans la version Prestashop 1.6 A) Mettre le nom du fournisseur avec le lien sur votre page produit Ajouter les lignes suivantes dans le fichier product.tpl qui se situe dans votre thème à l'endroit à vous désirez que le fournisseur apparaisse :  Résultat :  B) Mettre le logo du fournisseur avec le lien ...
Désactiver les taxes | Astuce Prestashop 1.6
views 1547
Si vous désirez désactiver les taxes dans prestashop, suivez les deux étapes suivantes 1) Allez dans préférences > taxes 2) Options des taxes > Activer les taxes : non Eh voila c'était tout simple les taxes sont désactivées.
Guide complet pour vos campagnes Google Adwords
views 504
Ce guide est en vente sur Amazon.fr et offert en format PDF.  Complet, Intuitif et plein d'astuces. Allez jeter un oeil ! Besoin de gérer des campagnes Google AdWords ? Allez découvrir la formation AdWords proposée par refeo.com, vous trouverez, en plus des précieuses informations livrées, un guide complet qui vous expliquera tous les contours de l'outil Google AdWords, de même que la façon dont...
Supprimez le champs « objet » du formulaire de contact | Prestashop 1.6
views 1869
Il est très important d'avoir un formulaire de contact simple, efficace et ergonomique. Pour un premier contact, le formulaire que propose Prestashop est très bien. Le seul champs que je supprimerais est  le champs "Objet". Il vous facilite peut-être la tâche mais il complique celle de votre client. Si le client oublie de faire sa sélection (par défaut Service client ou Webmaster), Prestasho...
Le nouveau menu du back-office de Prestashop 1.7 – Partie 3
views 16047
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 ...

Laisser un commentaire

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