La vitesse de chargement des pages d’un site e-commerce est un critère essentiel de visibilité et de conversion. Cela impacte à la fois le référencement naturel du site, mais également le taux de conversion des paniers en commande. Optimiser son site est par conséquent une étape incontournable pour augmenter ses ventes, voici donc quelques points clés à mettre en place afin d’avoir le meilleur score.
Le cache de Prestashop dépend énormément de votre thème. Veillez à ce que ce dernier soit bien optimisé et que trop de scripts ne bloquent pas l’affichage des pages. Par convention, les appels aux fichiers javascript doivent être effectués dans le pied de page, il ne doit pas y avoir trop d’appels à ds fichiers CSS, et le tout doit être suffisament condensé pour permettre à la page d’être rapidement visible.
a/ Smarty
En production, la recompilation des fichiers ne doit pas se faire. Vous pouvez bien évidemment laisser ce réglage à « Recompiler les fichiers de templates s’ils ont été mis à jour » si toutefois vous avez tendance à effectuer des modifications dans vos fichiers de templates.
b/ Mode Debug
Désactiver les modules non natifs de Prestashop vous permettra surtout de détecter l’origine d’un souci, tout comme la désactivation des surcharges.
Désactiver les surcharges permet donc de trouver l’origine d’un bug. Cela ignore les fichiers placés dans le répertoire /override de votre site. Thèmes et modules ont parfois tendance à créer des overrides, bien que cela soit plutôt mal vu pour des raisons de stabilité dans le temps. Ceci dit, pour une raison qui vous est propre, Prestashop ne répond pas parfaitement aux besoins exprimés par les commerçants (généralement car il s’agit de demandes trop spécifiques). N’abusez par conséquent pas des overrides, de nombreux conflits peuvent en découler.
c/ Fonctionnalités désactivables
Au préalable, posez-vous la question de savoir si les éléments suivants vous sont réellement utiles. Disposer d’autant de fonctionnalités ne signifie pas que vous en avez toutes besoin.
– Déclinaisons : il s’agit des options des produits. Très utiles côté client, je leur reproche cependant d’être parfois trop lourdes pour la base de données, notamment lorsque les administrateurs de sites en abusent. Pas d’option sur votre site ? Désactivez le tout.
– Caractéristiques : les caractéristiques des produits sont notamment utilisées par le module de navigation à facettes, sorte de filtre très utile pour les clients sur le front-office. Cela signifie que tout votre catalogue doit posséder des caractéristiques déterminées produit par produit. Chacun trouve son utilité à cet outil, qui apporte une information supplémentaire au visiteur ou au client. Si vous ne possédez pas cette information ou ne souhaitez pas l’utiliser, d »sactivez-là ici.
– Groupes de clients : comme précisé dans un précédent article, les groupes de clients par défaut sur Prestashop sont au nombre de trois (visiteurs, invités, clients). Il m’est arrivé de voir des administrateurs de boutiques Prestashop utiliser avec essien les groupes afin de gérer des promotions, mais la gestion des groupes clients ne peut s’effectuer que manuellement. En effet, lorsqu’un visiteur s’inscrit, Prestashop ignore totalement si vous avez envie de l’enregistrer dans un groupe précis plutôt que « client » ou « invité ». Dans le cas où vous estimez que la gestion des groupes clients vous apporterai plus une charge de travail inutile, désactivez-la.
d/ Concaténation, compression et mise en cache (CCC)
Voici le réglage qui impactera le plus votre site, et dont les réglages dépendent directement de votre thème. Le thème par défaut de Prestashop peut voir tous ces réglages activés sans aucun problème, mais certains thèmes auront de gros soucis d’affichages si les CCC ne sont pas testés et utilisés avec parcimonie.
Chaque fois que vous activez une des options CCC, pensez à vider votre cache, celui de Prestashop et à aller vérifier le bon fonctionnement de votre site.
– « Smart cache pour les feuilles de style » : permet à Prestashop de compresser grâce à Smarty tous les fichiers CSS de votre site. Ce réglage est très efficace en terme de chargement des pages, mais rendra quasiment impossible la détection d’un style CSS lié à un fichier précis. A n’activer donc qu’en production.
– « Smart cache pour le code javascript » : certaines mises en pages (très belles au demeurant) utilisent nombre de petits scripts javascript. Smarty sur Prestashop est capable de les mettre en cache, de manière à être servis plus rapidement. Abuser de javascript sur une mise en page alourdit l’ensemble et ralentit le chargement des pages. Vérifiez bien que votre thème est allégé sur ce point, il est parfois préférable d’avoir un bel effet CSS3 plutôt qu’une animation javascript trop lourde.
– Réduction du code HTML : ce point est très connu de longue date, il s’agit de supprimer tous les espaces dans le code HTML, de manière à réduire le poids d’une page. Un espace demeure un caractère, chargé inutilement sur le navigateur du visiteur. Supprimer le moindre espace dans le code en conservant les textes correctement formatés est un prérequis pour optimiser le temps de chargement des pages. Ce réglage peut poser problème sur certains sites utilisant du javascript directement dans le HTML. Je préconise dans ce cas de mettre tous ces scripts dans un seul et unique fichier, qui ne devrait être appelé que sur les pages le nécessitant (inutile d’appeler un script sur une CMS, alors que les éléments impactés sont sur les fiches produits)
– « Compression du javascript dans le HTML » : va vous aider à servir d’un bloc le javascript, directement dans la page HTML. Ainsi vous allez pouvoir charger la majorité de vos effets et scripts d’un seul coup, faites cependant encore une fois attention au javascript dit « in-line ». Cette option couplée aux précédentes peut générer de mauvais fonctionnements sur certains thèmes, pensez à bien tester votre site une fois activée.
– « Déplacer le code javascript à la fin » : par convention, les fichiers javascript sont chargés dans le pied de page du site car ils ont tendance à bloquer la ligne de flottaison. Cela signifie qu’avant même que le visiteur puisse visualiser la page, des scripts sont en chargement sur le navigateur client. Déplacer les fichiers javascript dans le pied de page permet un affichage plus rapide des pages, parfois même débloque des conflits sur certains thèmes. Ne pas déplacer le javascript ainsi revient presque à alourdir ses pages au-dessus de la ligne de flottaison, un peu à l’instar de WordPress dont le temps de chargement à ce sujet demeure un problème récurrent.
– Optimisation Apache : ce réglage est assez particulier car dépend fortement du serveur. Vous pourriez très bien utiliser Nginx plutôt qu’Apache sur le serveur, ce qui rend immédiatement cette option inutile. Ce réglage peut très bien également être activé mais ne pas fonctionner. Voici le code qu’il génère dans votre fichier htaccess :
<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" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType font/opentype "access plus 1 year" ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-otf "access plus 1 year" </IfModule> <IfModule mod_headers.c> Header unset Etag </IfModule> FileETag none <IfModule mod_deflate.c> <IfModule mod_filter.c> AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/x-javascript font/ttf application/x-font-ttf font/otf application/x-font-otf font/opentype </IfModule> </IfModule>
Notez donc la présence d’une condition « if » qui teste si certaines fonctionnalités sont disponibles sur votre serveur. Ainsi, le mod_expire détermine le délai de cache navigateur pour le visiteur. Le mod_deflate permet de mettre encore plus en cache les ressources comme le design (CSS) ou le javascript. Voir ces données ne signifie pas pour autant que votre serveur autorise le mod_deflate, le mod_headers et le mod_expire, pensez à demander à votre hébergeur ou à vérifier sur gtmetrix votre score.
Je regrette en un sens que l’optimisation Apache ne génère pas non plus un code de compression Gzip, pourtant fortement réclamé par les sites d’analyse de performances.
Cette case peut être cochée sans aucun souci si et seulement si vous utilisez Apache, les réglages sont différents avec Nginx.
e/ Les serveurs de médias (alias CDN)
Les serveurs de médias sont pratiques pour externaliser les ressources de type images, css, javascript, et bien plus encore. Techniquement, il s’agit d’utiliser la puissance de plusieurs serveurs afin de servir très rapidement tous les éléments graphiques de votre site. Les ressources ne sont plus chargées depuis votre serveur mais depuis un serveur distant. Votre site par conséquent consomme moins de puissance serveur, mais il vous faudra utiliser un autre serveur pour véritablement avoir un résultat visible. Les CDN sont des outils utilisés très fréquemment, il s’agit d’un service bien souvent payant, que vous pouvez prendre chez des prestataires comme Amazon ou CloudFlare. Ils présentent le double avantage de réduire le temps de chargement de vos pages mais aussi parfois de sécuriser les connexions entrantes.
Dans l’ensemble, vous allez devoir créer trois sous-domaines de votre site, qui devront donc être hébergés sur un autre serveur. Chacun de ses sites devra donc avoir ses champs de type A renseignés avec l’adresse IP de ce serveur tiers. Vous pouvez bien évidemment utiliser de véritables noms de domaines, mais cela engendre un surcoût par forcément nécessaire.
Dupliquez l’intégralité de votre site sur ces hébergements de sous-domaines ainsi créés, et sur votre Prestashop en production vous allez être en mesure de préciser les URL des CDN dans les réglages des serveurs de médias.
f/ Chiffrement
Les options dépendent encore une fois des outils disponibles sur le serveur sur lequel vous êtes hébergés, contactez donc votre hébergeur afin de connaître le réglage optimal à avoir.
g/ Cache
Ce dernier réglage varie beaucoup selon les serveurs utilisés. Utilisant le SSH régulièrement, j’ai une petite préférence pour le cache par fichiers, qui permet de ne pas alourdir la base de données, et que l’on peut vider aisément via quelques lignes de commandes (il faut penser à conserver les fichiers de sécurité en revanche).
Les bibliothèques Memcache et Memcached sont facilement installables, tout comme APC qui présente peu ou prou des performances similaires.
Ce réglage de cache bloquera les mises à jour de Prestashop depuis le module 1ClickUpgrade. Attention aussi au cache par fichiers qui peut présenter des ralentissements sur certains hébergements, n’hésitez pas à en changer les options si des soucis surviennent.
h/ Réglages complémentaires
D’autres options vous permettent encore d’alléger votre site. Ainsi, pensez à alléger vos images, ne surchagez pas votre contenu de médias (quand bien même vous utilisez des CDN).
Recherchez des alternatives plus légères à vos effets visuels, il est préférable de n’avoir qu’un joli effet CSS venant des fichiers hover.css de Ian Lunn plutôt que de charger une bibliothèque javascript entière.
Traquez le moindre script inutile sur chacune de vos pages et corrigez-le de manière à ne l’appeler que si le besoin s’en ressent (utilisez Smarty pour cela).
Et testez régulièrement votre site avec les nombreux outils disponibles gratuitement en ligne, comme gtmetrix cité plus haut !
Imprimer
Laisser un commentaire