Core Web Vitals sur PrestaShop : comment les images dégradent le LCP et quoi corriger en premier
La vitesse d’une boutique compte deux fois : Google en tient compte pour évaluer la page, et le client pour décider s’il reste. Sur les boutiques PrestaShop, la cause la plus fréquente d’une fiche produit lente, ce sont les images : trop lourdes, trop grandes ou chargées dans le mauvais ordre. Ce guide montre comment vérifier si les images dégradent vos Core Web Vitals, et quoi corriger en premier.
Les Core Web Vitals en bref
| Indicateur | Ce qu’il mesure | Bon score | Lien avec les images |
|---|---|---|---|
| LCP – Largest Contentful Paint | Le moment où le plus grand élément apparaît à l’écran | 2,5 s ou moins | Direct : sur une fiche produit, c’est presque toujours l’image principale ; sur l’accueil, une bannière ou un slider |
| INP – Interaction to Next Paint | La rapidité de réaction aux clics | 200 ms ou moins | Indirect : sliders et zooms d’image lourds en JavaScript |
| CLS – Cumulative Layout Shift | Si la mise en page « saute » pendant le chargement | 0,1 ou moins | Direct : les images sans dimensions décalent le contenu |
Google évalue le 75e centile des visites, séparément sur mobile et sur ordinateur. La page doit donc être rapide non seulement sur votre ordinateur avec la fibre, mais aussi pour un client avec un téléphone moyen dans le bus. Soyons honnêtes : de bons Core Web Vitals ne remplacent pas un bon contenu et ne propulseront pas une boutique en tête à eux seuls. Une page lente, en revanche, perd des clients avant même qu’ils voient le prix.
Comment vérifier si les images sont en cause
- PageSpeed Insights (pagespeed.web.dev) : le haut du rapport présente les données d’utilisateurs réels des 28 derniers jours, le bas un test en laboratoire. Dans le test, cherchez l’élément « Largest Contentful Paint » : si c’est une
img, vous savez par où commencer. - Google Search Console › Signaux Web essentiels : affiche les groupes d’URL similaires qui posent problème, par exemple toutes les fiches produits d’un coup.
- Trois types de pages : accueil, catégorie et fiche produit. Chacun a un élément LCP et des problèmes différents.
Cinq problèmes d’images typiques sur PrestaShop
1. Des fichiers trop lourds
Une photo sortie de l’appareil ou du fournisseur pèse 2 à 5 Mo. PrestaShop en génère des miniatures, mais avec des réglages de compression que personne n’a touchés depuis l’installation. Et le format reste JPEG ou PNG. Selon Google, les images WebP sont 25 à 34 % plus légères que le JPEG à qualité comparable, et un PNG de photo produit peut peser plusieurs fois plus que les deux.
2. Des dimensions trop grandes
Le thème charge le format large_default (souvent 800 px) là où l’image s’affiche en 250 px. Le navigateur télécharge plusieurs fois plus de données que nécessaire. Vérifiez quel type d’image votre thème utilise sur les listes de produits et sur la fiche produit.
3. Le chargement différé de l’image principale
loading="lazy" est parfait pour les images situées sous le premier écran, mais sur l’image principale du produit, il retarde le LCP. L’image principale doit se charger immédiatement, idéalement avec fetchpriority="high". C’est un effet secondaire fréquent des modules qui ajoutent le lazy-load « à toutes les images ».
4. Des dimensions absentes
Une image sans attributs width et height (ou sans aspect-ratio en CSS) ne prend sa place qu’une fois téléchargée et pousse le texte et les boutons vers le bas. C’est ainsi que naît un CLS élevé – et des clics sur le mauvais bouton.
5. Le slider de la page d’accueil
Cinq grandes diapositives chargées en même temps, plus une bibliothèque JavaScript pour les faire défiler. La première diapositive est l’élément LCP, et les autres lui disputent la bande passante. Limitez le nombre de diapositives et chargez les suivantes seulement après la première.
Un audit rapide des images sur le serveur
Si vous avez un accès SSH, ces commandes lancées à la racine de la boutique montrent l’ampleur du problème en quelques secondes :
# espace occupé par les images produits
du -sh img/p
# nombre de fichiers JPG de plus de 300 Ko
find img/p -type f -name '*.jpg' -size +300k | wc -l
# miniatures large_default trop lourdes (20 premières)
find img/p -type f -name '*-large_default.jpg' -size +150k | head -20
# y a-t-il déjà des fichiers WebP
find img/p -type f -name '*.webp' | wc -lLes noms des types d’images (large_default, home_default, etc.) figurent dans Apparence › Images (Design › Image Settings). Si les miniatures des listes pèsent 150 Ko ou plus et qu’il n’existe aucun fichier WebP, vous savez où se trouve le gain le plus important.
L’ordre des corrections
- Image principale du produit et bannière d’accueil : bonne taille, WebP, sans lazy-load, avec
fetchpriority="high". - Miniatures des catégories : WebP et lazy-load pour tout ce qui est sous le premier écran.
- Dimensions des images dans les gabarits du thème – fini la mise en page qui saute.
- Slider : moins de diapositives, des fichiers plus légers.
- Ensuite seulement, les scripts et styles des modules.
Après les modifications, le test en laboratoire montre la différence immédiatement. Les données d’utilisateurs réels dans PageSpeed Insights et la Search Console portent sur 28 jours : vous verrez l’effet complet au bout d’environ quatre semaines.
Des images plus légères sans travail manuel
CTW Image Optimizer convertit automatiquement les images de votre boutique en WebP – existantes et nouvelles – et indique leur poids avant, après, et l’espace économisé. Il fonctionne sur PrestaShop de la 1.7 à la 9.x, y compris sur les versions où le cœur ne gère pas le WebP.