Les bonnes pratiques PrestaShop : Optimiser le chargement

Optimiser le chargement de votre boutique PrestaShop

 

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.

Paramètres compilation Smarty

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).

Paramètres CCC

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 :

Paramètres CDN

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.

Memcached

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.

Exemple de sprite facebook

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 ».

Paramètres Gzip

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 ^^

Aperçu de l'onglet réseau de Firebug

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 ;)

Il y a 12 commentaires

  1. Avatar de Guillaume Heid

    16 jan 2014

    kolper a écrit :

    Bonjour Guillaume,
    Merci de cette précision pour le CDN.
    Pour la lenteur, j'ai contacté l'hébergeur, et il m'a demandé d'optimiser mes tables PHP.
    Ce que j'ai fait, résultat gain de temps de chargement du site 3x plus rapide.
    Je n'avais pas vu cette astuce sur le forum presta ??
    Si cela peut servir !!!
    Bonne continuation à tous :-)

  2. Avatar de Guillaume Heid

    30 nov 2013

    kolper a écrit :

    Bonsoir à tous,
    le post date un peu mais je pense que les infos sont tjr d'actualité.
    Donc je me lance à poser ma question.
    J'ai ouvert une boutique et souhaiterai mettre en pratique les CDN.
    Le pb est que je suis néophite en programmation et que j'ai bien créé des sous domaines cdn1 cdn2 et cdn3, mais si je mets le fichier index.php de la racine dedans cela me renvoi sur une page juste avec les écritures et images, mais plus du tout le thème d'origine de presta.
    Quelqu'un peut-il me dire ce que je dois mettre comme lignes dedans.
    Merci d'avance de votre aide et indulgence ^^

    • Avatar de Guillaume Heid

      2 déc 2013

      Guillaume Heid a écrit :

      Bonjour kolper, et bienvenue sur notre blog.

      Les sous-domaines cdn1, 2 et 3 doivent être créés en tant qu'alias de votre domaine principal. Aucun répertoire /cdn1, 2 et 3 n'est nécessaire.
      En gros, si vous tapez cdn1.mon-domaine.com dans la barre de votre navigateur, vous devriez retomber sur www.mon-domaine.com.
      Il ne s'agit que d'une "feinte" pour tromper le navigateur, et permettre de charger votre boutique plus rapidement.

      Bonne chance ;)

  3. Avatar de Guillaume Heid

    5 sept 2013

    TAMEL a écrit :

    Merci pour ce petit guide des bonnes pratiques.
    J’ai un site prestashop que je trouve très très lent, surtout sur certains produits qui ont bcp de déclinaisons:
    http://www.tamel.fr

    Je voulais savoir la compression gzip n’est plus disponible depuis la version 1.5 de Prestashop ?
    Car je ne trouve pas du tout le bouton pour l’activer, et le liens Outils -> Générateur n’existe pas dans la version 1.5

    Merci pour vos réponses

    • Avatar de Guillaume Heid

      5 sept 2013

      Guillaume Heid a écrit :

      Bonjour,

      Il est vrai que PrestaShop éprouve quelques lenteurs à la gestion de très nombreuses déclinaisons, je ne sais pas si il y a des progrès avec la 1.5.
      Pour le Gzip, je pense que cet article pourrait vous aider (en anglais : http://www.prestashop.com/forums/topic/213553-prestashop-15-gzip-compration/).

      Bonne chance dans vos recherches ;)

  4. Avatar de Guillaume Heid

    12 nov 2012

    JHN Design a écrit :

    Le pseudo CDN est une très bonne astuce ! Une bonne base pour la rapidité de sa boutique. Pour aller plus loin, bien paramétrer le cache MySQL améliore aussi grandement les choses.

    • Avatar de Guillaume Heid

      12 nov 2012

      Guillaume Heid a écrit :

      Bonjour JHN Design.

      En effet, cette petite astuce améliore bien la rapidité du chargement de la boutique, et est assez facile à mettre en place selon l’hébergeur. ;)

  5. Avatar de Guillaume Heid

    11 nov 2012

    Webbax a écrit :

    Hello,

    Retour intéressant, après il est vrai que dans un premier temps, il est déjà important d’avoir une boutique fonctionnelle et de ne pas trop perdre de temps sur la partie temps de chargement (au début souvent tout est relativement rapide).

    Après dans un second temps, je pense que cela fait effectivement partie des préoccupations, il faut noter aussi que le volume de produits et le trafic, ainsi que le serveur lui-même peuvent être à l’origine de la dégradation de la performance.

    A noter qu’il existe sur le marché 1 ou 2 modules qui font de la mise en cache encore plus poussée pour gagner en vitesse, comme par exemple Cache Manager : http://addons.prestashop.com/en/seo-prestashop-modules/6413-cache-manager-boost-your-prestashop.html

    Bonne continuation !

    • Avatar de Guillaume Heid

      11 nov 2012

      prestarocket a écrit :

      Hello Webbax,

      Pour ma part, j’intègre maintenant dès le début du projet, les contraintes de performance : utilisation de sprite, poids des images optimisées, code css et js léger, requêtes non gourmandes si dév. de modules…

    • Avatar de Guillaume Heid

      12 nov 2012

      Guillaume Heid a écrit :

      Bonjour Webbax.
      Je suis également de l’avis de prestarocket. Je pense qu’il faut prendre en compte tous ces éléments dès le début du projet pour éviter de perdre du temps par la suite. Rien que le passage de toutes les images sur une sprite prend énormément de temps si ce n’est réfléchi dès le départ.
      De plus nous sommes conscient de ne pas avoir cité toutes les méthodes, outils et modules utiles, car ne l’oublions pas, les 2 points d’une bonne agence web c’est : 1. Ne jamais révéler tout son savoir. ;)

  6. Avatar de Guillaume Heid

    9 nov 2012

    prestarocket a écrit :

    Hello,
    Sur les modules, je suis complètement d’accord, inutile d’en utiliser trop. Par exemple, on peut intégrer en dur les fonctionnalités de partage facebook, twitter etc…dans la page produit

    • Avatar de Guillaume Heid

      9 nov 2012

      Guillaume Heid a écrit :

      Bonjour prestarocket !
      Je suis tout à fait d’accord avec toi, c’est aussi ce qu’on préconise et ce qu’on met en place sur les boutiques de nos clients ;)

Laisser un commentaire

Votre adresse mail ne sera pas visible. Elle permet uniquement d'afficher votre avatar (créez votre avatar sur fr.gravatar.com) Les champs obligatoires sont indiqués par une *.

ViNIB

Recopiez le code de sécurité :