Optimisation des performances de votre boutique Prestashop

par Julien Achard | | Prestashop |
Optimisation des performances de votre boutique Prestashop

Dans cet article, nous allons parler d’un sujet qui fâche : L’optimisation des performances de votre boutique Prestashop. Je vais vous dévoiler les opérations que j’effectue pour augmenter les performances de chargement de chacune des mes boutiques et du meme coup améliorer mon SEO.

Tester les performances de sa boutique Prestashop

Tout d’abord, il faut comprendre l’intérêt. Lorsque un internaute vient sur votre boutique, il ne souhaite pas attendre. En effet si l’on en croit les statistiques : augmenter de 400ms le temps de chargement de votre page fait monter le taux d’abandon de 5 à 9%. De plus, les moteurs de recherches savent apprécier ces performances et prennent en compte ce critère dans leur positionnement.

Il existe de nombreux sites pour tester les performances de sa boutique Prestashop, pour ma part j’en utilise deux :

https://developers.google.com/speed/pagespeed/insights/
http://gtmetrix.com/

Bien évidement, le sans faute n’existe jamais, mais le principal est d’arriver à un note maximale pour réduire les temps des chargement de votre Prestashop et ainsi augmenter vos chances de conserver votre internaute.

Configuration du cache dans Prestashop

Pour configurer le cache proposé par Prestashop il suffit d’aller dans l’onglet « paramètres avancés » puis « performances ». Il existe plusieurs options pour configurer votre cache

Compilation et cache des templates Smarty

Smarty est le moteur utilisé par Prestashop pour la gestion des templates (les fameux fichiers tpl). Assez gourmand en ressources, il est très important d’activer ces paramètres, sans ça, vous vous rendrez assez vite compte que les performances de votre boutique seront très faibles. Donc à moins d’être dans la phase de développement, votre configuration doit ressembler à cela :

Optimiser boutique Prestashop Smarty

Activer les CCC de Prestashop

Le CCC ( Concaténation, compression et cache ) consiste à concaténer vos fichiers CSS et JS et de les compresser. Grâce à cette option, tous vos fichiers CSS et Javascript injectés par Prestashop et ses modules ne feront plus qu’un, diminuant ainsi votre nombre de requêtes HTTP, ainsi que leur poids. Cette option est donc inévitable, dans l’idéal tout devrait être coché, mais il va falloir vérifier que votre thème est bien fait !

Optimiser le cache Prestashop CCC

Activer le système de cache

Prestashop propose différentes méthodes de cache serveur en gestion. Pour ma part je n’ai testé que le « système de fichier », car c’est la seule option ne nécessitant pas une installation particulière. Le gain de performe y est, mais malhereusement j’ai trop souvent constaté pour ma part des comportoment non désiré ! Donc je n’active que très rarement ce paramètre.

Utiliser le cache Prestashop

Configurer le cache navigateur pour Prestashop

Quand un visiteur vient la première fois sur votre boutique Prestashop, il est très important d’indiquer à son navigateur de mettre en cache certains fichiers afin d’améliorer ses prochaines visites. Pour cela, nous allons donner des directives dans le fichier .htaccess qui normalement se trouve à la racine de votre boutique.

Directives pour le cache du navigateur avec mod_expires
<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresByType image/gif "access plus 1 month"
	ExpiresByType image/jpeg "access plus 1 month"
	ExpiresByType image/png "access plus 1 month"
	ExpiresByType text/css "access plus 1 week"
	ExpiresByType text/javascript "access plus 1 week"
	ExpiresByType application/javascript "access plus 1 week"
	ExpiresByType application/x-javascript "access plus 1 week"
	ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

Elles sont difficiles à apprendre par coeur mais ces instructions sont assez simples. Tout d’abord, on teste si le module Apache « mod_expires » existe : <IfModule mod_expires.c>. Si oui, on l’active avec « ExpiresActive On ».

Il suffit ensuite de lister les types de fichiers de votre boutique en indiquant le délai de stockage dans le cache du navigateur, prenons pour exemple la 1ère ligne : ExpiresByType image/gif « access plus 1 month », concrètement on indique au navigateur que les fichiers GIF doivent être conservés 1 mois.

Optimisation des images

Dans une boutique Prestashop, il est très difficile de diminuer la taille des images produits et autres images dont les miniatures sont gérées par le logiciel. La seule solution que j’ai trouvé pour ces dernières est l’utilisation du module PageSpeed dont je vous parlerai un peu plus bas.

Il est par contre assez simple de compresser les images de votre thème, cela peut être fait en ligne avec Smushit ou bien depuis un logiciel. De mon côté j’utilise l’excellent logiciel ImageOptim. Il a l’avantage d’avoir une interface très simple, de gérer les différents formats d’images, et surtout, il est sur mac 😉 et gratuit.

Cache prestashop optimiser images

On parle aussi beaucoup des Sprites CSS, le fait d’empiler plusieurs images en une seule et de gérer ensuite leur positionnement avec l’attribut CSS « background-position ». Pour ma part je n’ai jamais eu la patience de faire ce travail, mais il existe de nombreux sites vous aidant à cette tâche, exemple : http://spritegen.website-performance.org/

Vérifier l’utilisation de gzip

De nos jours la plupart des serveurs en sont équipé, mais l’importance de cette fonctionnalité dans un boutique en ligne ou même tout autre site internet est capital. Cette fonctionnalité permet tout simplement la compression de votre page au format Gzip pour votre internaute.

Pour vérifier sa mise en place, un simple test sur Pagespeed vous informera de sa présence.
Si vous souhaitez tout de meme le vérifier par vous même, il faut regarder dans votre inspecteur la requête souhaitée et vérifier que la valeur de Content-Encoding dans Response Headers est bien gzip.

Optimiser cache prestashop Gzip

Module Apache pagespeed

PageSpeed est un module Apache open source proposé par Google pour diminuer le temps de chargement de vos pages. Son principe est simple : appliquer les compressions maximales à vos éléments de types Javascript, CSS et images, sans que vous n’ayez à modifier quoique ce soit d’autre dans votre boutique Prestashop.

https://developers.google.com/speed/pagespeed/module

Son installation se fera via SSH sur votre serveur, le tutoriel fourni par Google est disponible ici.

Utilisation de cdn avec Prestashop

Si vous aviez bien regardé, dans l’onglet « paramètres avancés » puis « performances », vous avez peut être remarqué une section « Serveurs de média » dans lequel il vous est possible de rentrer 3 URLs.

Configurer le cache Prestashop CDN
Quand une requête est envoyée à votre boutique Prestashop, elle est interprétée par paquets en nombre limité par le navigateur, en clair, cela forme ainsi une queue par domaine. Ainsi donc, si certains de vos éléments sont disponibles via un autre domaine, il traitera ainsi deux requetes d’un coup, ce qui peut être multiplié par le nombre de serveurs.

Ici on peut utiliser ce que l’on appelle un cloud, concrètement, un service payant qui héberge vos données, images, thèmes etc … de ce fait tout ce qui est média est chargé depuis un autre domaine, cela accélère donc grandement le chargement de votre page.

Une autre astuce consiste à mettre en place sur votre serveur 3 sous-domaines redirigant vers votre boutique Prestashop, du coup le navigateur télécharge donc simultanément depuis ces 3 sous domaines. Le subterfuge peut fonctionner en fonction de la capacité de votre serveur, il faut donc essayer !

Utilisation d’un module supplémentaire : Cache Manager

Cache ManagerEncore une fois je vais faire la promotion de Presta module, en effet leur module cache permet une gestion du cache avancée avec Prestashop. Non content de pouvoir diminuer jusqu’à deux fois le temps de chargement de votre boutique Prestashop, Cache manager vous laisser la possibilité de définir quel module doit être mis en cache et pour combien de temps.
C’est donc l’outil idéal pour la gestion du cache de votre boutique.

Obtenir le module

Encore une fois, je ne revendique pas être un spécialiste, juste un bidouilleur, vos remarques, commentaires et suggestions sont les bienvenues pour améliorer ou corriger ce tutoriel !