• Optimiser Prestashop en temps de chargement

    image de l'aticle Optimiser Prestashop en temps de chargement

    Un site Prestashop comme tout autre cms génère beaucoup de requêtes SQL et ne met pas forcément en cache tous les fichiers de vos modules par exemple.

    Dans cette exemple nous allons utiliser http://www.webpagetest.org et PageSpeed un outil de Google pour les développeurs.

    Tout d'abord nous allons activer le "débogage" de Prestashop qui nous donnera tout un tas d'informations précieuses pour commencer notre optimisation. Pour faire cela commencez par mettre votre boutique en maintenance, si vous ne le faites pas c'est un peu comme être sur vos toilettes confortablement assis devant des inconnus qui vous regardent alors qu'ils n'ont rien à foutre là. Cette image veut dire que vous allez  montrer sur toutes vos pages web des données sensibles (requêtes Sql, temps de chargement etc...) que vous ne souhaitez pas donner au premier venu.

    Après avoir mis votre site en maintenance (Préférences -> Maintenance -> désactiver la boutique), vous allez éditer le fichier /config/defines.inc.php et mettre la valeur _PS_DEBUG_PROFILING_ à true :

    define('_PS_DEBUG_PROFILING_', true);

    Rafraichissez votre page pour voir les informations de débogage Prestashop en bas de page.

    Load time: 6.39s
    You'd better run your shop on a toaster

    config: 614ms
    constructor: 0ms
    init: 83ms
    checkAccess: 0ms
    setMedia: 4ms
    postProcess: 0ms
    initHeader: 0ms
    initContent: 5.517s
    initFooter: 21ms
    display: 152ms
    Hook processing: 5.625s / 16.74 Mb

    displayHeader: 4.81s / 10.95 Mb
    displayHome: 312ms / 0.48 Mb
    displayLeftColumn: 233ms / 2.54 Mb
    displayTop: 161ms / 2.04 Mb
    moduleRoutes: 88ms / 0.36 Mb
    displayFooter: 20ms / 0.36 Mb
    actionDispatcher: 0ms / 0 Mb
    DisplayOverrideTemplate: 0ms / 0 Mb
    actionFrontControllerSetMedia: 0ms / 0 Mb
    displayRightColumn: 0ms / 0 Mb
    Memory peak usage: 32.01 Mb

    config: 9.09 Mb
    constructor: 0 Mb
    init: 4.61 Mb
    checkAccess: 0 Mb
    setMedia: 0.22 Mb
    postProcess: 0 Mb
    initHeader: 0.01 Mb
    initContent: 16.04 Mb
    initFooter: 0.38 Mb
    display: 0.65 Mb
    DB type: DbPDO
    SQL Queries: 85 queries
    Time spent querying: 585ms

    SQL Queries est peut être la première piste à voir pour améliorer vos performances. Si ce nombre est en rouge ou si il dépasse les 100 requêtes c'est certainement que vos modules ne compilent pas correctement les fichiers tpl qu'ils appellent.

    Les informations sont classées par codes couleur, rouge (très mauvais), orange (mauvais), vert (bon). Ont va voir comment remédier aux codes couleur en rouge en dessous de Load Time en regardant aussi la colonne en dessous de Hook processing. La technique est simple, elle consiste à voir quels sont les Hooks qui posent problème et voir si les différents modules de votre site mettent bien en cache les fichiers .tpl afin de limiter le nombre de requêtes appelées par les différents modules. En procédent comme ceci vous allez pouvoir améliorer rapidement les performances de votre site.

    Si le displayHeader est en rouge c'est surement que vos fichier .css et .js sont lourd à  charger. Pour résoudre ce problème vous pouvez charger les fichier .js en bas de page mais faire cela sur Prestashop posera certainement des problèmes à votre thème. Nous allons donc exploiter la mise en cache du navigateur afin que les fichiers soient stockés pendant un temps déterminé sur celui-ci allégeant un peu le chargement des pages.

    Mise en cache des modules Prestashop

    Certains modules que vous achetez ou que vous avez mis à jour ne sont pas mis en cache. Grave erreur car la mise à cache de certains modules peut diviser vos requêtes client/serveur par 4 suivant les thèmes utilisés. Pour mettre en cache un module c'est très simple.

    Exemple : vous avez un module blockcustom et dans le fichier blockcustom.php à la racine du module vous avez des fonctions appelées par les controlleurs de Prestashop qui se nomment "hookleftColumn", "hooktop", "hookfooter", "hookRightColumn" etc... Ces fonctions servent à afficher du contenu côté front-office et contiennent parfois des requêtes SQL interrogeant le serveur de base de données pour retourner certaines informations. Utiliser une fonction de cache native de Prestashop à l'intérieur de ces fonctions éliminera les requêtes SQL pendant une certaine période avant de les réactualiser. Ainsi, vous éliminez les requêtes SQL pendant un temps plus ou moins long défini par smarty (le moteur de template utilisé par Prestashop).

    Le code :


        function hookleftColumn(){         
            if (!$this->isCached('blockcustom.tpl', $this->getCacheId()))
            {
                // Requêtes SQL, assignement de valeurs etc...
            }
            return $this->display(__FILE__, 'blockcustom.tpl', $this->getCacheId());                    
        }

    La condition "if (condition) {}" test si le block "column Left" se trouve déjà dans le cache de fichiers compilés de smarty, s'il ne s'y trouve pas ont envoient les requêtes et ont assignent le retour de résultat aux variables, sinon ont appellent directement le cache Smarty. Pratique et simple comme je vous avez dit...

    Attention, vous ne pouvez pas mettre tous les modules en cache, exemple le module navigation à facette disponible depuis la version 1.5 de Prestashop. Si vous mettez en cache sa méthode d'affichage appelée par le hookLeftColumn des erreurs apparaîtront car le module doit mettre à jour ses informations à chaque affichage d'une nouvelle catégorie. Donc à utiliser avec précaution mais à utiliser absolument! Après avoir fait cela vous verrez la valeur SQL Queries des logs Prestashop diminuer certainement.

    Utiliser le cache du navigateur client

    Les informations suivantes doivent être mises dans le .htaccess de la racine de votre site :

    <ifmodule mod_expires.c>
    <filesmatch ".(jpg|jpeg|png|gif|js|css|swf|ico)$">
      ExpiresActive on
      ExpiresDefault "access plus 1 months"
      ExpiresDefault "access plus 1 seconds"
      ExpiresByType image/x-icon "access plus 2592000 seconds"
      ExpiresByType image/jpeg "access plus 2592000 seconds"
      ExpiresByType image/png "access plus 2592000 seconds"
      ExpiresByType image/gif "access plus 2592000 seconds"
      ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
      ExpiresByType text/css "access plus 604800 seconds"
      ExpiresByType text/javascript "access plus 216000 seconds"
      ExpiresByType application/javascript "access plus 216000 seconds"
      ExpiresByType application/x-javascript "access plus 216000 seconds"
      ExpiresByType text/html "access plus 600 seconds"
      ExpiresByType application/xhtml+xml "access plus 600 seconds"
    </filesmatch>
    </ifmodule>

    Cette pratique a pour but de limiter les requêtes entre le serveur et la machine cliente. En effet, le navigateur va d'abord voir dans son cache si les fichiers existent avant de requêter le serveur pour les obtenir. A noter "LoadModule expires_module modules/mod_expires.so" doit être décommenté dans votre configuration apache pour que le module fonctionne.

    Les erreurs 404

    Elles peuvent limiter le chargement de vos pages, pour voir quelles sont les erreur 404 que vous avez allez sur www.webpagetest.org et tapez l'url de votre site. Les erreurs 404 seront sous fond rouge. Corrigez ces erreurs avant de continuer.

    Certaines Requêtes SQL de Prestashop sont lentes sur votre serveur. En l'occurrence celles qui mettent à jour vos tables "connections", "connections_page", "connections_source" et "page_viewed". Vous pouvez voir cela en-dessous de Stopwatch avec en rouge le temps des requêtes les plus longues classées en ordre décroissant.

    Si ces tables apparaissent vous pouvez désactiver le module qui met à jour ces informations. C'est le module "Récupération des données statistiques" de Prestashop (statsdata). Si vous désactivez ce module d'autres modules de stats seront également désactivé. Cela vous fera gagner quelques centaines de millisecondes, ce qui n'est pas rien...

    Pour finir vous pouvez voir pagespeed qui vous donnera un rappport détaillé sur les améliorations possibles à mettre en place sur votre site Internet. Entre autres, le temps de réponse du serveur (dur dur de résoudre ce problème à part changer de serveur). Si le premier bytes envoyé par votre serveur est au delà de 3 4 sec. vous n'allez pas pouvoir faire grand chose à part optimiser celui-ci. Quelques astuces pour faire cela : Optimiser Mysql sur serveur dédié Linux et Compression - Optimiser son site Internet mod_deflate. Des renseignements vous sont aussi donnés sur l'optimisation des images à effectuer, la réduction des ressources HTML et CSS etc...

10 commentaires

Adrien  06-11-2013

Lorsque l'on cherche à optimiser les performances de son site Prestashop, on tombe très souvent sur les mêmes choses. Mais là non, j'ai trouver beaucoup de choses très utiles dans cet article que je vais m'empresser d'aller essayer.

Merci beaucoup pour ces infos!!

Espinasse  06-11-2013

Heureux que ça puisse t'aider ;-)

Adrien  08-11-2013

Lorsque que je mets mon site en maintenance, que je passe _PS_DEBUG_PROFILING_ à true et que j'actualise ma page d'accueil c'est une page blanche qui s'affiche. Saurais-tu d'où cela peut venir par hasard?

Merci d'avance.

Espinasse  08-11-2013

As-tu mis ton ip dans les ip tolérées par Prestashop lors de la désactivation de ta boutique?

Une page blanche veut dire aussi que tu ne t'es pas mis en mode debug (pas pour Mysql mais pour le code php)

Pour faire cela tu dois éditer le fichier config/defines.inc.php et mettre
define('_PS_MODE_DEV_', false); à :

define('_PS_MODE_DEV_', true);


Cela te permettra d'afficher les erreurs php car une page blanche veut souvent dire qu'un script ne fonctionne pas.

Adrien  12-11-2013

Oui, j'avais bien mis mon IP dans les IP tolérés en désactivant la boutique. À priori tout est bon au niveau du code PHP car lorsque j'active seulement PS_MODE_DEV, la boutique s'affiche normalement, sans erreur. En activant les deux PS_MODE_DEV et PS_DEBUG_PROFILING, j'ai la même page blanche qu'avec seulement PS_DEBUG_PROFILING activé.

moi  19-08-2014

Super tuto

Willy le borgne  28-08-2014

Très intéressant !
Quand tu dis : "A noter "LoadModule expires_module modules/mod_expires.so" doit être décommenté dans votre configuration apache pour que le module fonctionne."

Pourrais-tu expliquer comment modifier la config Apache ?
Par avance merci

Espinasse  31-10-2014

Bonjour,
dsl pour le retard de la réponse mais très occupé ces derniers temps.
Pour dé-commenter et donc activer ce module tu dois te connecter en ssh à ton serveur.

Ensuite tu active le module en tapant ceci dans la console :

sudo a2enmod headers
sudo a2enmod expires
sudo service apache2 restart

Et voilà! Le module est actif.

Si tu es sur un mutualisé et que tu n'a pas de connexion root au serveur ssh, voir dans les infos de ton hébergeur si cela est possible. Parfois il suffit de modifier une directive dans le php.ini placé dans les configs du site.

Phenix  15-06-2015

Merci pour cet article!
A noter aussi, pour améliorer le temps de chargement, on peut optimiser automatiquement les images (qui représentent 60% des ressources d'une page!) avec un service comme fasterimage.io

Laissez un commentaire

* Votre e-mail ne sera jamais utilisé ou donné à un tiers

Recherche

Catégories

Newsletters

Archives