L’élément LCP est l’image ou le bloc de texte le plus grand rendu dans la fenêtre visible, pas nécessairement la première image du code. Sur une fiche produit, il s’agit souvent de l’image principale, mais parfois d’un bandeau, d’un carrousel ou d’un titre. Il faut donc mesurer l’élément réel par page type avant de toucher aux fichiers.
Pourquoi compresser tout le catalogue peut manquer la cible LCP
Le Largest Contentful Paint mesure le temps entre le début du chargement et le rendu du plus grand élément visible. Google recommande un LCP de 2,5 secondes ou moins pour au moins 75 % des visites (web.dev, Optimize LCP). Sur une fiche produit, l’élément LCP peut être une image, mais aussi un bloc de texte. Compresser toutes les images du catalogue sans avoir identifié cet élément revient à traiter des fichiers qui n’influencent peut-être pas la métrique.
Le guide officiel précise qu’il est rare qu’une correction unique améliore réellement le LCP : il faut examiner l’ensemble du chargement (web.dev, Optimize LCP). Autrement dit, la compression est une action possible, pas un point de départ automatique.
Comment identifier l’élément LCP d’une fiche produit ?
La méthode fiable consiste à mesurer, pas à supposer. Trois outils suffisent pour un diagnostic de base :
- PageSpeed Insights : indique l’élément LCP détecté dans l’analyse de laboratoire.
- Chrome DevTools : l’onglet Performance permet de visualiser le rendu et de pointer l’élément.
- WebPageTest : utile pour comparer plusieurs pages ou plusieurs régions.
La démarche recommandée par web.dev est de déterminer l’élément LCP, puis de retrouver la requête réseau correspondante dans le waterfall (web.dev, Optimize LCP). Sur une fiche produit, cela signifie vérifier si l’élément est :
- l’image principale du produit ;
- une image de bandeau ou de carrousel ;
- un titre ou un bloc de texte ;
- une image gérée par JavaScript et absente du HTML initial.
Cette distinction change tout : si l’élément est un texte, compresser les images ne résoudra pas le problème.
Exemple hypothétique de diagnostic
Prenons une fiche produit fictive avec une image principale de 1 200 × 1 200 px, un bandeau promotionnel de 1 600 × 400 px et un titre de 48 px. Si le bandeau occupe une surface plus grande que l’image produit dans la fenêtre visible, l’élément LCP peut être le bandeau, pas l’image principale. Compresser les 5 000 images du catalogue ne changerait alors rien à la métrique de cette page. Cet exemple est illustratif : il ne décrit aucune boutique réelle.
Arbre de décision avant compression
| Situation observée | Action prioritaire |
|---|---|
| L’élément LCP est l’image principale produit | Vérifier son format, sa taille et sa priorité de chargement |
| L’élément LCP est un bandeau ou un carrousel | Traiter ce composant en priorité, pas le catalogue |
| L’élément LCP est un bloc de texte | Examiner les polices et le rendu, pas les images |
| L’élément LCP est géré par JavaScript | Vérifier s’il est présent dans le HTML initial |
Ce tableau ne remplace pas une mesure : il sert à orienter la première action après avoir identifié l’élément.
Que dit le delta entre FCP et LCP ?
Un écart important entre le First Contentful Paint et le LCP indique souvent que la ressource LCP n’est pas immédiatement disponible ou que le navigateur effectue d’autres tâches avant de l’afficher (web.dev, Optimize LCP). Sur une fiche produit, cela peut signifier que l’image principale est chargée tardivement, par exemple via JavaScript ou après d’autres ressources.
À l’inverse, un écart important entre le TTFB et le FCP peut signaler des ressources bloquantes ou un rendu côté client (web.dev, Optimize LCP). Ces signaux orientent le diagnostic avant toute décision de compression.
Comment mesurer sur des pages représentatives ?
Les Core Web Vitals doivent être mesurés sur le terrain, au 75e percentile (web.dev, Web Vitals). Pour un catalogue, il est utile de choisir quelques pages types :
- une fiche produit simple ;
- une fiche avec variantes ou carrousel ;
- une fiche avec bandeau promotionnel ;
- une page de catégorie, pour comparaison.
Mesurez chaque page dans PageSpeed Insights et notez l’élément LCP identifié. Si l’élément diffère selon les pages, une compression globale du catalogue n’est pas la bonne première étape.
Quelles vérifications avant de compresser ?
Avant de lancer une compression massive, vérifiez :
- L’élément LCP réel sur au moins trois pages types.
- La présence de l’image dans le HTML initial ou son chargement via JavaScript.
- Le format et les dimensions de l’image concernée.
- La priorité de chargement : l’image LCP est-elle découverte tôt ?
- Le delta FCP-LCP pour détecter un rendu tardif.
Si l’élément LCP est bien l’image principale et qu’elle est déjà correctement servie, la compression peut être utile. Sinon, elle risque de dégrader la qualité visuelle sans améliorer la métrique.
Questions fréquentes
L’image principale d’une fiche produit est-elle toujours l’élément LCP ?
Non. L’élément LCP est le plus grand élément rendu dans la fenêtre visible. Un bandeau, un carrousel ou un titre peuvent être plus grands selon la mise en page. Il faut mesurer page par page.
Faut-il compresser toutes les images du catalogue pour améliorer le LCP ?
Pas nécessairement. La compression n’aide que si l’image concernée est l’élément LCP et si son poids ou son chargement freine le rendu. Sinon, l’effort peut être inutile pour la métrique.
Pour aller plus loin
Pour préparer des visuels produit sans dégrader la fiche, voir Images produit gratuites : 3 outils IA à bien choisir. Pour tester une vidéo produit avant tournage, Google Flow gratuit : tester une vidéo produit utile. Pour choisir des idées produit avec des signaux de recherche, Recherche produit pas chère : Trends, Semrush, NoxTools.