Introduction

La rapidité d'une boutique PrestaShop ne se mesure pas à son score Lighthouse. La performance se définit avant tout par la rapidité avec laquelle l'utilisateur accède au contenu essentiel, interagit avec les produits et les champs du formulaire de commande, et navigue sur la page sans à-coups.

C’est là qu’intervient l’optimisation des indicateurs clés de performance web de PrestaShop.

Les Core Web Vitals se concentrent sur trois aspects de l'expérience utilisateur réelle : la vitesse de chargement, la réactivité et la stabilité visuelle. Selon les recommandations de Google, le temps de chargement idéal est inférieur à 2.5 secondes, le temps d'interaction inférieur à 200 millisecondes et le temps CLS inférieur à 0.1.

Cependant, lorsqu'il s'agit de boutiques PrestaShop, atteindre ces standards n'est pas si simple car cela ne se limite pas à la compression des images et à la mise en place du cache.

Différents éléments, tels que le thème utilisé, les modules, les scripts, les informations sur les produits et la configuration du serveur, influent sur les performances du site web et rendent difficile le respect des normes établies par Google.

Cet article décrit le processus d'optimisation des Core Web Vitals pour PrestaShop.

Que sont les éléments essentiels du Web ?

Les Core Web Vitals sont des indicateurs de Google créés pour mesurer l'efficacité d'une conception du point de vue de l'expérience utilisateur.

Les trois indicateurs actuels sont

Largest Contentful Paint (LCP) : Mesure les performances de chargement. 
Objectif idéal : ≤ 2.5 secondes.
Interaction vers la peinture suivante (INP) : Mesure la réactivité de l'interaction. 
Objectif idéal : < 200 millisecondes.
Décalage cumulatif de la mise en page (CLS) : Mesure la stabilité visuelle. 
Bonne cible : < 0.1.

Ces indicateurs ne doivent pas être considérés comme de simples chiffres SEO isolés. Ils décrivent des aspects concrets de l'expérience utilisateur sur une page. De bons indicateurs Web Core Vitals ne garantissent pas un excellent positionnement dans les résultats de recherche ; l'expérience utilisateur est un concept plus vaste que ces trois indicateurs.

Pour une boutique en ligne, cette distinction est importante. La page d'accueil peut se charger rapidement tandis que les pages produits restent lentes. Une page produit peut s'afficher rapidement mais devenir non réactive lorsque les clients modifient les combinaisons. Une page peut également paraître rapide mais subir des modifications importantes lors du chargement d'une bannière promotionnelle ou d'un widget d'avis.

Pourquoi les boutiques PrestaShop rencontrent-elles fréquemment des problèmes de performance ?

PrestaShop est rarement la seule cause de la lenteur d'une boutique en ligne. Le véritable goulot d'étranglement est souvent dû à la combinaison de la plateforme, du thème, des modules, du serveur, de la base de données, des ressources et des services tiers.

Les raisons typiques de la lenteur des performances d'un site web sont :

• Bannières grand format et images de produits
• Utilisation excessive de JavaScript
• Les modules chargent les ressources sur l'ensemble du site.
• Avoir trop de scripts d'analyse marketing
• Fonctions de thème avancées
• Le CSS provoque le blocage du rendu.
• Le cache est mal configuré.
• Traitement PHP lent
• Requêtes coûteuses adressées à la base de données
• Requêtes externes vers les API
• mauvaise qualité de l'hébergement
• Trop d'éléments DOM
• Le chargement différé est mal implémenté.
• Le contenu est ajouté dynamiquement avec une optimisation des performances. 

Pour que cela fonctionne, l'optimisation des performances doit être réalisée en mesurant et en identifiant les problèmes, en apportant les modifications nécessaires, puis en testant et en mesurant à nouveau avant de passer à l'étape suivante.

Comment améliorer les indicateurs clés de performance web dans PrestaShop

La première étape pour améliorer les indicateurs clés de performance web (Core Web Vitals) dans PrestaShop consiste à tester des pages représentatives.

Cela devrait absolument inclure :

• Homepage
• Page de catégorie
• Page produit
• Page de recherche
• Panier
• Paiement
• Pages de destination essentielles

Les performances des pages produits peuvent différer de celles de la page d'accueil. Par exemple, la bannière principale peut être l'élément LCP sur la page d'accueil, tandis que sur la page produit, elle peut être occupée par l'image principale du produit. De même, une page de catégorie à facettes peut être surchargée de JavaScript et d'utilisation du DOM.

Pour suivre précisément le processus, utilisez les outils suivants : Google PageSpeed ​​Insights, Lighthouse, Chrome DevTools, Google Search Console et les outils de surveillance des utilisateurs.

N'oubliez pas que se fier à une seule session Lighthouse ne suffit pas. Les résultats du test peuvent varier en fonction de l'appareil, du réseau, du cache, etc.

Comment améliorer le LCP sur PrestaShop

 

Largest Contentful Paint (LCP) est une mesure du moment où l'élément de contenu principal pertinent apparaît sur un écran.

Sur PrestaShop, l'élément LCP (Leader Page Element) est généralement l'image produit la plus importante, l'image principale de la page d'accueil, la bannière de catégorie ou le bloc de titre/contenu principal. Il est essentiel de ne pas présumer de ce qu'est exactement l'élément LCP ; il est nécessaire de l'identifier à l'aide d'outils de test de performance.

Trouver l'élément LCP réel

Si une page produit obtient un score LCP de 4.2 secondes, on pourrait être tenté de se demander immédiatement : « Comment optimiser au mieux l’image ? » Cependant, il convient d’abord de vérifier que le score LCP concerne bien l’image du produit. De plus, il faut également prendre en compte les éléments suivants : 

1. Le moment de l'arrivée du HTML.
2. Le moment où le navigateur identifie l'image.
3. Que les blocs CSS soient rendus ou non.
4. La taille de l'image.
5. La vitesse à laquelle l'image est téléchargée.
6. L'effet de JavaScript sur le processus de rendu.
7. La vitesse de réponse du serveur.

Ce serait bien plus avantageux que d'utiliser une simple technique de compression classique.

Optimiser l'image LCP

Dans les cas où l'élément LCP est l'image principale du produit, assurez-vous que le navigateur ne télécharge pas une ressource excessivement volumineuse.

Pour ce faire :

• Les images doivent être de taille appropriée.
• Utilisez des méthodes de diffusion d'images réactives.
• Les images doivent être compressées efficacement.
• Utilisez WebP ou AVIF si possible.
• Choisissez la qualité d'image appropriée.
• Générez correctement les vignettes.

Afficher les images de produits de 700 × 700 pixels en autant de pixels que nécessaire permettra d'éviter les téléchargements inutiles d'images volumineuses.

Idéalement, le chargement différé des images peut être appliqué aux images apparaissant en dessous de la ligne de flottaison sur la page produit.

Soyez sélectif avec le préchargement

Le préchargement d'une image essentielle peut aider le navigateur à la trouver à l'avance. Cependant, l'application d'instructions de préchargement pour plusieurs images, polices, fichiers CSS et scripts peut avoir l'effet inverse, car elles consomment de la bande passante.

Ne préchargez que les ressources qui sont réellement essentielles au rendu initial ; de même, fetchpriority="high" doit être utilisé de manière sélective et non indiscriminée.

Réduisez le temps de réponse du serveur

Pour afficher un contenu utile, un navigateur doit d'abord obtenir la réponse correspondante.

Plusieurs raisons peuvent entraîner des retards dans le temps de réponse, notamment :

 – Problèmes liés au temps d'exécution PHP

 – Requêtes de base de données coûteuses

 – Capacité serveur insuffisante

 – Mise en cache inefficace

 – Efficacité du traitement des modules

 – Utilisation d'API externes

 – Un travail important est effectué en arrière-plan pour générer une page.

Par conséquent, la nécessité de réduire le temps de réponse est corrélée à l'optimisation LCP.

Comment réduire le CLS dans PrestaShop

Le Cumulative Layout Shift (CLS) mesure les mouvements inattendus du contenu pendant le chargement de la page.

Un exemple typique est celui d'une bannière publicitaire qui se charge après l'affichage des informations produit et s'insère au-dessus. Tout ce qui se trouve en dessous se décale vers le bas, ce qui peut nuire à l'expérience utilisateur.

Les causes courantes des problèmes rencontrés avec PrestaShop sont les suivantes :

• Images sans dimensions pré-réservées.
• Galeries de produits.
• Curseurs.
• Bannières.
• Bannière de cookies.
• Newsletters
• Avis.
• Recommandations chargées dynamiquement.
• Polices Web.
• Contenu AJAX.
• Widgets tiers.

Réserver de l'espace pour les images

Les images doivent avoir des dimensions connues ou être contenues dans un conteneur au format approprié. Par exemple :

La manière précise dont cela est mis en œuvre variera en fonction du thème PrestaShop et du système d'images responsives, mais le principe de base reste le même : le navigateur doit savoir de combien d'espace l'image a besoin avant que son téléchargement soit terminé. 

Stabiliser les modules dynamiques

Si le module insère du contenu de manière dynamique, réfléchissez à la possibilité de créer un espace réservé avant l'arrivée du contenu.

Plutôt que de laisser un widget d'avis repousser la description du produit de manière excessive, veillez à lui réserver un emplacement ou à le placer de façon à ce que son chargement n'interfère pas avec le contenu important.

L'objectif de l'élimination du CLS n'est pas d'empêcher tout changement visuel, mais de stopper les modifications imprévisibles qui affectent négativement le travail de l'utilisateur.

Comment améliorer l'INP

La fonction INP est particulièrement importante pour les sites web de commerce électronique. Elle permet aux utilisateurs de choisir les options des produits, de modifier les quantités, de consulter les images, d'appliquer des filtres, de rechercher des produits, d'ajouter des articles au panier, d'ouvrir des menus déroulants, d'utiliser des bons de réduction et de modifier les options de livraison.

Lorsque JavaScript monopolise le navigateur de l'utilisateur, ces opérations peuvent être lentes.

Pourquoi l'INP peut être difficile à configurer sur PrestaShop

Une boutique PrestaShop typique peut contenir du JavaScript provenant des fonctionnalités du thème, des modules de produits, des modules de recherche, des outils d'analyse, des gestionnaires de balises, des systèmes d'avis, des applications de chat, des outils de personnalisation, des plateformes de consentement et des intégrations de paiement.

Chaque script pris individuellement peut sembler inoffensif. Cependant, le coût d'exécution combiné peut devenir considérable.

Utilisez les outils de développement Chrome pour l'analyse des performances et de la couverture afin de détecter les tâches longues, le code JavaScript inutilisé, les écouteurs d'événements, les exécutions de scripts coûteuses et les recalculs/redessinages dus aux manipulations du DOM.

Réduisez le JavaScript inutile

Lorsque vous minifiez du JavaScript, la taille du fichier diminue, mais cela ne signifie pas qu'il n'y aura pas de traitement important lors de l'exécution.

Un gestionnaire de clic peut toujours ralentir le navigateur même si les fichiers JS sont minifiés et de très petite taille.

Il faut, si possible, s'efforcer d'éliminer le code inutile, d'introduire des fonctionnalités uniquement si elles sont essentielles, de minimiser les opérations longues et de réévaluer le code écrit par des tiers.

Fonctionnalités de chargement uniquement lorsque cela est nécessaire

Une méthode pratique pour optimiser PrestaShop consiste à éviter de charger les ressources des modules sur les pages où cette fonctionnalité n'est pas requise.

Par exemple, un module qui gère la galerie de produits ne devrait pas avoir besoin de charger l'intégralité de son bundle JavaScript sur les pages du CMS où cette fonctionnalité n'est pas utilisée.

Comment optimiser les images pour de meilleures performances

Les images sont indispensables au commerce électronique, mais elles contribuent souvent à alourdir les pages.

Utilisez des dimensions appropriées, des formats efficaces tels que WebP ou AVIF lorsqu'ils sont pris en charge, une compression appropriée, une diffusion d'images réactive et un chargement différé pour les images situées sous la ligne de flottaison.

L'objectif n'est pas simplement de proposer des images plus petites. L'objectif est de fournir la bonne image, aux bonnes dimensions, au bon moment.

Comment résoudre les problèmes de blocage du rendu des ressources

Le CSS et le JavaScript peuvent ralentir l'affichage de la page par le navigateur. Une boutique PrestaShop peut contenir des ressources provenant de fichiers de thème, de fonctionnalités de base, de modules, de développements personnalisés et d'intégrations tierces.

Consultez l'onglet Réseau des outils de développement Chrome pour trouver les fichiers CSS et JavaScript volumineux, les bibliothèques redondantes, les ressources de modules chargées globalement, les scripts tiers, les polices et les requêtes bloquantes.

Identifiez les styles nécessaires à la première fenêtre d'affichage et supprimez le CSS inutile, reportez les fonctionnalités non essentielles et évitez de charger globalement le CSS des modules inutilisés.

N’utilisez pas toutes les feuilles de style sans discernement. Il peut exister des dépendances entre le thème et les modules PrestaShop, ce qui pourrait s’avérer dangereux en cas de gestion intensive des ressources.

Modules PrestaShop : Le coût caché de la performance

Les modules peuvent ajouter du traitement PHP, des requêtes de base de données, du CSS, du JavaScript, des appels AJAX, des requêtes externes, du HTML et du code de suivi.

La question pratique n'est pas de savoir si les modules sont une mauvaise chose, mais plutôt si un module doit s'exécuter sur une page particulière.

Un module d'avis peut n'avoir besoin de fonctionner que sur les pages produits, tandis qu'un widget de livraison peut n'être pertinent que lors du paiement. Si un module charge des ressources globalement, vérifiez si son implémentation peut être modifiée sans risque.

Mise en cache et performances de PrestaShop

Il est toutefois important de rappeler que la mise en cache peut être utilisée pour éviter les tâches redondantes au niveau du serveur, mais cet outil doit être compris et non pas activé aveuglément.

En fonction de l'environnement système, il est recommandé d'utiliser la mise en cache PrestaShop, la mise en cache de l'application/de la page, la mise en cache du code d'opération, la mise en cache HTTP, la mise en cache CDN et la mise en cache du navigateur.

La nature dynamique des opérations de commerce électronique rend la mise en place d'un système de cache plus complexe que pour un site statique. Certaines données, comme les informations personnelles des clients, le contenu du panier, le statut d'authentification, les prix, les niveaux de stock et la personnalisation, peuvent nécessiter un système de cache spécifique.

Tester les pages après leur mise en cache.

Comment réduire le temps de réponse du serveur

1. Établir une base de référence : collecter les détails de LCP, INP, CLS, TTFB, poids, nombre de requêtes, exécution JavaScript et temps d’utilisation des ressources importantes.
2. Testez des modèles représentatifs : page produit, page catégorie, page de recherche, page panier, page de présélection et pages de destination CMS/autres pages de destination.
3. Identifier les points problématiques : déterminer si le problème est lié à la réponse du serveur, à la diffusion des images, aux pistes CSS ou JavaScript, ou à tout service fourni par des tiers.
4. Effectuez un audit : repérez les modules référencés qui fonctionnent globalement, imposent JavaScript/CSS, effectuent des requêtes externes ou réalisent des opérations backend coûteuses.
5. Améliorer progressivement le système : systèmes de transmission d’images, transmission CSS, transmission JavaScript, réponse du serveur, etc.
6. Vérifiez les fonctionnalités : les diverses possibilités avancées du produit, toutes les fonctionnalités de recherche, les processus de panier, les modalités de paiement et l’utilisation mobile.
7. Prenez des mesures et comparez-les avec la valeur de référence initiale.

Comment améliorer la vitesse de chargement des pages mobiles

Les performances mobiles constituent un sujet à part entière. Les appareils mobiles peuvent être équipés de processeurs moins performants et d'une connexion réseau cellulaire peu fiable, ce qui rend l'exécution de JavaScript et le téléchargement d'images plus critiques.

Faire attention à:

• Images compactes et réactives
• JavaScript minimal
• Scripts tiers minimaux
• CSS efficace
• disposition stable
• Temps de réponse rapide du serveur
• DOM minimal
• Chargement différé correct
• Navigation légère

Ne présumez pas que de bonnes performances sur ordinateur de bureau équivalent à de bonnes performances sur mobile, testez-les !

Un flux de travail pratique pour l'optimisation des indicateurs clés de performance web de PrestaShop

1. Établir une base de référence : collecter les détails de LCP, INP, CLS, TTFB, poids, nombre de requêtes, exécution JavaScript et temps d’utilisation des ressources importantes.
2. Testez des modèles représentatifs : page produit, page catégorie, page de recherche, page panier, page de présélection et pages de destination CMS/autres pages de destination.
3. Identifier les points problématiques : déterminer si le problème est lié à la réponse du serveur, à la diffusion des images, aux pistes CSS ou JavaScript, ou à tout service fourni par des tiers.
4. Effectuez un audit : repérez les modules référencés qui fonctionnent globalement, imposent JavaScript/CSS, effectuent des requêtes externes ou réalisent des opérations backend coûteuses.
5. Améliorer progressivement le système : systèmes de transmission d’images, transmission CSS, transmission JavaScript, réponse du serveur, etc.
6. Vérifiez les fonctionnalités : les diverses possibilités avancées du produit, toutes les fonctionnalités de recherche, les processus de panier, les modalités de paiement et l’utilisation mobile.
7. Prenez des mesures et comparez-les avec la valeur de référence initiale.

Exemple concret PrestaShop : Page produit lente (LCP)

Supposons qu'une page produit ait un LCP de 4.5 secondes. Cette page contient une grande image du produit.

On pourrait en conclure que l'image est surdimensionnée. Cependant, après vérification, on constate que le serveur met 1.5 seconde à répondre, que le CSS bloque l'affichage, que l'image du produit est trop grande pour la page, que l'initialisation de la galerie est retardée par un module JavaScript inutile et que l'image est chargée à la demande.

Il convient de noter que la simple vérification des problèmes d'optimisation ne constitue pas une pratique efficace pour améliorer la vitesse de chargement des pages.

Exemple concret : Faible score INP provenant de plusieurs modules

Imaginez une page produit dotée de fonctionnalités telles que la logique des variantes de produits, un outil d'avis, un chat, des analyses, la gestion des balises et un moteur de suggestions.

Lorsqu'un client clique sur une taille, le navigateur peut exécuter le gestionnaire de variantes, mettre à jour les détails du produit, recalculer une partie du DOM, lancer des analyses, exécuter un autre gestionnaire d'événements et mettre à jour l'interface utilisateur.

Cependant, la meilleure solution n'est pas toujours de supprimer tous les modules du processus. Il convient d'analyser l'interaction et de déterminer quel gestionnaire d'événements est gourmand en ressources et quel script effectue des opérations longues. Il faut également vérifier si du code tiers est inclus, si des opérations inutiles sont effectuées sur le DOM et s'il est possible de simplifier ou de reporter certaines fonctionnalités.

Exemple concret : CLS à partir d’une bannière publicitaire

Imaginons qu'un détaillant place une bannière publicitaire après le chargement de la page produit. Cette bannière se positionne alors au-dessus du nom du produit, affectant ainsi le titre, l'image, le prix et l'emplacement du bouton « Ajouter au panier ». 

Une meilleure solution consisterait à pré-allouer l'espace à la bannière ou à la placer de manière à ne pas interférer avec le contenu principal de la page. 

La réponse réside donc dans la compréhension des facteurs responsables du déplacement des objets, des raisons de ce déplacement et du moment où ils arrivent à destination.

Erreurs d'optimisation des indicateurs Web Vitals communs

1. Nous visons un score PageSpeed ​​optimal. L'objectif de l'entreprise est d'offrir une meilleure expérience utilisateur, et non pas simplement d'atteindre un certain niveau de performance.
2. L’utilisation de nombreux modules d’optimisation peut engendrer des complications indésirables, notamment un recours excessif à de multiples solutions d’optimisation et de temporisation.
3. Utilisation du chargement différé pour l'ensemble des éléments. Cependant, cela peut entraîner un délai lors du chargement d'informations importantes.
4. Tout précharger. Si de nombreuses données sont jugées importantes, une concurrence pour la bande passante limitée risque de se créer.
5. Les optimisations ne sont pas compatibles avec la page d'accueil. Celles appliquées aux pages de destination ne peuvent pas être utilisées avec les modèles de catégories et de produits.
6. Suppression du JavaScript tiers. L'utilisation efficace des outils d'analyse et de marketing peut engendrer des coûts d'exécution très élevés.

Mesurer le résultat

L'optimisation des performances doit être considérée comme un effort continu. Après l'installation d'un nouveau module, la mise à jour vers un nouveau thème, le déploiement d'un outil marketing ou le chargement d'images en haute résolution, une boutique en ligne peut subir une baisse de ses performances.

Par conséquent, tout changement significatif relatif au thème, aux modules, à la mise en page ou à l'infrastructure doit être perçu comme une cause possible de dégradation des performances.

Les indicateurs Web essentiels doivent être un processus continu

L'optimisation des performances n'est pas une tâche ponctuelle. Une boutique peut devenir plus lente après l'installation d'un nouveau module, la mise à jour d'un thème, l'ajout d'un outil marketing, le chargement d'images plus volumineuses, l'ajout de scripts de suivi, le changement d'hébergement, la modification des modèles de produits ou la mise en œuvre de nouvelles fonctionnalités.

Chaque modification majeure de thème, de module, d'infrastructure ou d'interface utilisateur doit donc être considérée comme un changement potentiel de performance.

Recommandations finales

L'optimisation des indicateurs clés de performance (LCP) de PrestaShop ne se résume pas à une simple combinaison de techniques. En matière de LCP, il est nécessaire d'examiner le serveur, les ressources critiques, les images, le CSS et d'effectuer une analyse approfondie des ressources.

En ce qui concerne le CLS, l'objectif est d'identifier les éléments en mouvement et de gagner l'espace dont ils ont besoin.

Dans le cadre de l'utilisation d'INP, il sera nécessaire de réaliser un profilage des interactions réelles et de configurer le JavaScript et les événements requis pour fonctionner sur le thread principal.

L'optimisation globale des performances d'un site web implique l'audit des modules, des scripts tiers, du cache, des images, du fonctionnement de la base de données et des ressources du serveur.

Le processus de performance le plus efficace pour PrestaShop est

Mesurer → Diagnostiquer → Optimiser → Tester → Mesurer à nouveau.

Cette approche permet d'obtenir des améliorations durables sans sacrifier les fonctionnalités qui rendent une boutique en ligne utile.

Questions fréquemment posées

Quel est le meilleur LCP pour un site PrestaShop ?

Conformément aux recommandations de Google, un score LCP de 2.5 secondes ou moins est parfait.

Comment améliorer le LCP des pages produits PrestaShop ?

Pour commencer, identifiez l'élément LCP. S'il s'agit de l'image principale du produit, optimisez-la en termes de taille et de temps de chargement, afin qu'elle soit détectée rapidement et non chargée de manière différée.

Comment puis-je réduire le CLS sur PrestaShop ?
Identifiez les éléments qui se déplacent. Les causes fréquentes incluent les images sans dimensions réservées, les bannières dynamiques, les fenêtres contextuelles, les diaporamas et les widgets tiers. Réservez un espace suffisant avant le chargement du contenu dynamique.

Comment améliorer l'INP ?

Il est nécessaire d'analyser les performances réelles des utilisateurs et de détecter les tâches JavaScript coûteuses. L'étape suivante consiste à éliminer l'utilisation inutile de JavaScript, à minimiser la manipulation du DOM et à vérifier les outils et modules tiers implémentés.

L'activation de la mise en cache résoudra-t-elle automatiquement les problèmes liés aux Core Web Vitals ?

Non, la mise en cache réduit la charge de traitement côté serveur et améliore la réactivité, mais ne résout pas les problèmes liés aux images volumineuses, au CSS bloquant le rendu, à l'excès de JavaScript, au CLS et à la lenteur du comportement.

L'amélioration des performances du site web nécessite-t-elle la désinstallation de tous les modules PrestaShop ?

Non, car les modules sont essentiels pour répondre aux besoins de l'entreprise. L'objectif est de repérer les processus inutiles, et non de désinstaller le logiciel sans réfléchir.

Un score PageSpeed ​​de 100 est-il obligatoire ?

Non, car ce n'est pas l'objectif. Le seul point important est d'offrir la meilleure expérience utilisateur possible.

Que dois-je optimiser en premier ?

Première étape : identifier les modèles de page les moins performants et déterminer le principal goulot d’étranglement : LCP, INP, CLS, TTFB, images, JavaScript, CSS, modules ou côté serveur.