Les bonnes pratiques PrestaShop : Optimiser le chargement

Une boutique lente diminue votre chiffre d’affaire !
Depuis longtemps maintenant cette locution est considérée comme une vérité. En effet, plusieurs grosses structures telles que Amazon ou Google ont rendu publiques certaines de leurs statistiques sur leur rapport performance / conversion.

• Google.com : +500 ms => -20% de trafic
• Yahoo.com : +400 ms => 5 à 9% de départs avant la fin du chargement complet de la page
• Amazon.com : +100 ms => -1% de ventes

Sans rire !?
Comment alors optimiser le chargement de ma boutique PrestaShop ?

Et bien c’est exactement l’objectif de cet article

Faîtes la chasse aux modules gourmands

En premier lieu il est indispensable de revenir à la base même de la structure modulaire de PrestaShop, à savoir : les modules !

Désactivez les modules inutilisés et rendez statique ce qui peux l’être car chaque module à afficher génère à lui seul plusieurs requêtes en base de données.

Typiquement, les liens du footer n’ont pas besoin d’être affichés par un module, mais peuvent être gérés directement dans le footer.tpl. De même, la plupart des blocs statiques (images, html) peuvent aisément être inclus dans vos fichier .tpl.

Pour trouver les modules qui ralentissent significativement votre boutique, il ‘ny a pas de solution miracle
Vous devez les désactiver un par un jusqu’à trouver d’où vient le problème. Une fois localisé, désactivez-le s’il est inutile. Sinon, il convient de l’adapter ou de lui trouver une alternative.

Désactiver la compilation Smarty

Smarty est un moteur de template pour le langage PHP. Depuis PrestaShop 1.4, il est possible d’activer ou de désactiver directement depuis le back-office la compilation Smarty.

Forcer la compilation est très utile lors des étapes de développment et de pré-production, car vous êtes alors certain de toujours utiliser la dernière version de vos fichiers .tpl. Cependant, en désactivant la compilation, le gain de temps est énorme.

De même, il est recommandé d’utiliser le cache pour gagner encore en performance.

C’est donc une étape importante à ne pas oublier lors du passage en production de votre boutique !

Vous trouverez ce paramètre dans « Préférences > Performances > Smarty ».

• Forcer la compilation : Non
• Cache : Oui

Activer le CCC (Combine, Compress, and Cache)

Activer le CCC de PrestaShop permet de gagner aussi en temps de chargement. Cette fonctionnalité permet, comme son nom l’indique, de combiner, compresser et mettre en cache les feuilles CSS et les scripts Javascript, et de minimiser le HTML.

En bref, toutes vos feuilles CSS (ou presque ^^) sont fusionnées en une seule compressée, ce qui diminue donc le nombre de requêtes de média au serveur (idem pour les scripts javascript).

Utiliser les CDN (Content Delivery Networks)

Par défaut, un navigateur autorise jusqu’à 8 connections simultanées à un même serveur. Dupliquer votre contenus sur plusieurs serveurs permet donc de multiplier d’autant le nombre de requêtes simultanées de votre navigateur.

Une astuce simple pour mettre en place un pseudo système de CDN consiste à créer 3 sous-domaines (cdn1.maboutique.com, cdn2.maboutique.com, cdn3.maboutique.com) pointant vers le domaine principal (alias). Si vous ne comprenez pas de quoi il s’agit, voyez avec votre hébergeur

Dans la configuration de PrestaShop « Préférences > Performances > Serveurs de média », indiquez vos 3 urls, et enregistrez :

Attention : Comme indiqué dans le back-office, cela ne fonctionne que si le CCC est activé.

Utiliser Memcached

Memcached est un système de cache côté serveur. Il utilise la mémoire du serveur pour accélérer les requêtes PHP. Pour pouvoir l’utiliser, Memcached doit être installé et activé sur votre serveur.

Optimisez vos images

Cette étape est indépendante de la configuration de PrestaShop.
L’optimisation des images est un travail à part entière qu’il est important de réaliser avec soin.
Outre les images de vos produits (qui elles sont gérées par PrestaShop), il vous faudra porter une attention toute particulière aux images de vos thèmes.

Diverses techniques peuvent alors entrer en compte dont la gestion des « sprites » qui consite à regrouper plusieurs petites images sur une seule plus grande. On y gagne rarement en poids, mais le bénéfice intervient surtout en nombre de requêtes de médias.

Activer la compression Gzip

Activer la compression Gzip indique au serveur qu’il doit compresser les données avant de les envoyer, et c’est le navigateur qui va les décompresser.

Depuis le back-office PrestaShop, il est possible d’activer la compression Gzip en cochant la case « Optimisation » depuis « Outils > Générateurs ».

Tester votre boutique

De nombreux outils permettent de vous donner un aperçus des performances de votre boutique. En voici quelques-uns :

• Firebug : Module pour Firefox, son onglet « Réseau » vous permet d’avoir un aperçu des requêtes de votre site. Les autres navigateurs tels que Chrome disposent d’un outil de développement natif souvent plus poussé que leur module Firebug.
• Yslow : Cette extension existe pour Firefox, Chrome, Opéra, Safari et j’en passe. Elle donne une note et indique les différents points noirs de votre site.
• Page Speed : Dans le même registre que Yslow, mais comme on dis : deux avis valent mieux qu’un ^^

A vous de jouer !

Cet article n’est pas exhaustif et ne donne qu’un tour d’horizon des nombreuses possibilités d’optimisation d’une boutique PrestaShop.
Il est certain que rien ne remplacera la recherche, les tests et la pratique alors n’hésitez pas à contacter notre agence web si votre boutique se traîne la patte