Temps de chargement long sur PrestaShop : diagnostic et optimisation complète

Introduction

Un temps de chargement excessif sur la page d'accueil (typiquement la route /fr/) est l'un des problèmes les plus fréquents sur PrestaShop. Une boutique qui met plus de 3 secondes à s'afficher perd des visiteurs, dégrade son taux de conversion et subit une pénalité SEO directe depuis les Core Web Vitals de Google.

Dans cet article, je vous guide à travers une méthodologie complète de diagnostic et d'optimisation, de l'analyse du poids des assets jusqu'au choix de l'hébergement.

Étape 1 : Auditer le poids de vos assets

Avant toute optimisation, il faut mesurer. Ouvrez les DevTools de votre navigateur (F12 → onglet Network) et rechargez votre page d'accueil en cache désactivé (Ctrl+Shift+R).

Voici les seuils à ne pas dépasser pour une boutique PrestaShop performante :

RessourceSeuil acceptableSeuil critique HTML< 50 Ko> 150 Ko CSS total< 200 Ko> 400 Ko JS total< 300 Ko> 600 Ko Images< 1 Mo> 3 Mo

Si votre CSS dépasse 600 Ko et votre JavaScript frôle le mégaoctet pour une page d'accueil simple, c'est le signe que des modules inutilisés injectent massivement des assets sans que vous le sachiez.

Identifier les modules responsables

Chaque module PrestaShop peut enregistrer ses propres fichiers CSS et JS via les hooks displayHeader ou actionFrontControllerSetMedia. Pour identifier les coupables :

1. Désactivez vos modules un par un et mesurez l'impact sur le poids total
2. Ou inspectez directement le code source HTML pour repérer les fichiers chargés par chaque module

# Lister tous les CSS/JS injectés par les modules
grep -r 'registerStylesheet\|registerJavascript\|addCSS\|addJS' modules/*/views/templates/hook/ modules/*/*.php

Sur PrestaShop 8.x, utilisez la méthode registerStylesheet() et registerJavascript() du FrontController pour un contrôle fin du chargement des assets.

Étape 2 : Activer le profiling intégré

PrestaShop embarque un outil de profiling natif très puissant mais peu connu. Il permet de visualiser le temps d'exécution de chaque hook, chaque requête SQL et chaque module.

Sur PrestaShop 1.6 / 1.7

Éditez le fichier config/defines.inc.php :

// Avant
define('_PS_DEBUG_PROFILING_', false);

// Après — activer le profiling
define('_PS_DEBUG_PROFILING_', true);

Rechargez votre page d'accueil : un panneau de debug apparaît en bas de page avec :

• Le temps total de génération PHP
• Le nombre et le temps de chaque requête SQL
• Le temps d'exécution de chaque hook et de chaque module

Sur PrestaShop 8.x

Le profiling fonctionne de la même manière, mais vous pouvez aussi activer le Symfony Debug Toolbar en passant en mode développement :

// config/defines.inc.php
define('_PS_MODE_DEV_', true);

La toolbar Symfony (barre noire en bas de page) vous donne accès au profiler Doctrine, au nombre de requêtes SQL, au temps de rendu Twig et aux événements déclenchés.

Attention : Ne laissez jamais le profiling activé en production. Il ralentit considérablement le site et expose des informations sensibles.

Étape 3 : Optimiser le chargement des assets

Déplacer les scripts JavaScript en bas de page

Par défaut, certains scripts JS sont chargés dans le , ce qui bloque le rendu de la page. Dans le back-office PrestaShop :

1. Allez dans **Paramètres avancés → Performances**
2. Activez l'option **Déplacer le JavaScript vers la fin du body**
3. Activez la **combinaison des fichiers CSS** et **JS** (CCC)

Sur PrestaShop 8.x, vous pouvez contrôler le positionnement des scripts directement dans vos modules :

// Charger le JS en bas de page avec attribut defer
$this->context->controller->registerJavascript(
    'module-monmodule-front',
    'modules/'.$this->name.'/views/js/front.js',
    [
        'position' => 'bottom',
        'priority' => 200,
        'attributes' => 'defer',
    ]
);

Minifier et combiner les assets

La fonctionnalité CCC (Combine, Compress, Cache) de PrestaShop combine tous les fichiers CSS en un seul et tous les JS en un seul, réduisant drastiquement le nombre de requêtes HTTP.

Pour aller plus loin, envisagez un outil de build externe :

# Minifier CSS avec cssnano
npx postcss themes/votre-theme/assets/css/*.css --use cssnano -d themes/votre-theme/assets/css/min/

# Minifier JS avec terser
npx terser themes/votre-theme/assets/js/custom.js -o themes/votre-theme/assets/js/custom.min.js

Étape 4 : Optimiser le serveur

L'impact de l'hébergement

Le choix du serveur est souvent le facteur le plus déterminant. Un hébergement mutualisé bon marché partage ses ressources CPU et RAM entre des dizaines de sites. Pour PrestaShop, c'est rarement suffisant.

Type d'hébergementTTFB moyenRecommandation Mutualisé800 ms – 2 sÀ éviter pour le e-commerce VPS (2 Go RAM)200 – 500 msMinimum recommandé VPS optimisé (4 Go+)100 – 200 msIdéal pour la plupart des boutiques Dédié< 100 msGrands catalogues (50k+ produits)

Configuration PHP recommandée

; php.ini — paramètres recommandés pour PrestaShop
memory_limit = 512M
max_execution_time = 300
opcache.enable = 1
opcache.memory_consumption = 256
opcache.max_accelerated_files = 20000
opcache.validate_timestamps = 0  ; Désactiver en production

L'activation d'OPcache seule peut réduire le temps de génération PHP de 30 à 50 %.

Activer le cache PrestaShop

Dans Paramètres avancés → Performances :

1. **Smarty** : activez le cache et la compilation
2. **Cache** : activez le système de cache (fichier ou Memcached/Redis si disponible)
3. Sur PrestaShop 8.x : le cache Symfony est géré automatiquement, mais videz-le après chaque modification :

php bin/console cache:clear --env=prod

Étape 5 : Réduire les requêtes SQL

Le profiling révèle souvent un nombre excessif de requêtes SQL (parfois 200 à 400 par page). Les principales causes :

• **Modules mal optimisés** qui exécutent des requêtes dans des boucles
• **Catégories profondes** avec calcul récursif du nombre de produits
• **Hooks surchargés** avec trop de modules greffés

Sur PrestaShop 8.x, activez le cache de requêtes Doctrine et vérifiez vos requêtes lentes :

-- Identifier les requêtes lentes sur MySQL/MariaDB
SET GLOBAL slow_query_log = 'ON';
SET GLOBAL long_query_time = 1;
SHOW VARIABLES LIKE 'slow_query_log_file';

Étape 6 : Optimisation des images

Les images représentent souvent 60 à 80 % du poids total d'une page. PrestaShop génère automatiquement plusieurs tailles, mais les images sources doivent être optimisées avant l'import.

# Optimiser en masse les images produit avec jpegoptim et optipng
find img/p/ -name '*.jpg' -exec jpegoptim --strip-all --max=85 {} \;
find img/p/ -name '*.png' -exec optipng -o5 {} \;

Sur PrestaShop 8.x, envisagez le format WebP pour réduire le poids de 25 à 35 % supplémentaires. Des modules tiers permettent la conversion automatique.

Checklist récapitulative

• [ ] Auditer le poids HTML / CSS / JS avec les DevTools
• [ ] Désactiver les modules inutilisés
• [ ] Activer le profiling pour identifier les goulots d'étranglement
• [ ] Déplacer les JS en bas de page et activer le CCC
• [ ] Migrer vers un VPS si vous êtes en mutualisé
• [ ] Activer OPcache et configurer PHP correctement
• [ ] Activer le cache Smarty et le cache applicatif
• [ ] Optimiser et compresser les images
• [ ] Surveiller le nombre de requêtes SQL via le profiling