John Mueller, avocat de la recherche Google, présente une nouvelle étude de cas expliquant pourquoi certaines améliorations de Largest Contentful Paint ne produisent souvent pas de résultats. Dans une présentation qui varie selon le magasin, le navigateur peut se concentrer sur le mauvais élément, ce qui amène toutes les optimisations ultérieures à cibler quelque chose qui n’a jamais été le LCP en premier lieu.
L’étude de cas a été publiée sur web.dev le 24 juin et détaille une année de travail Core Web Vitals sur la plateforme de commerce électronique Nuvemshop. Initialement, l’équipe soupçonnait le poids des images ou la latence du serveur d’être les principaux problèmes. Cependant, leur analyse les a orientés vers la manière dont le navigateur a sélectionné l’élément LCP. Après avoir optimisé la sélection des éléments, la priorité des images, le chargement différé et la mise en cache périphérique, Nuvemshop rapporte que la part de ses magasins avec de bons scores LCP est passée de 57 % à 96 %.
Comment le mauvais élément est sélectionné
Sur Nuvemshop, les commerçants peuvent organiser les sections de leur page d’accueil dans l’ordre de leur choix, ce qui entraîne des carrousels, des bannières et des grilles de produits apparaissant à différentes positions sur différents thèmes. Selon l’étude de cas, les carrousels étaient présents sur 85 % des devantures de magasins, et c’est là que la mesure a rencontré un problème.
Le problème provenait des transitions CSS sur les carrousels et les bannières. Ces transitions ont été retardées lorsque les éléments sont devenus visibles pour la détection LCP du navigateur. Alors que les acheteurs voyaient le carrousel se charger en premier, le navigateur identifiait parfois une bannière plus bas comme élément LCP, car sa visibilité n’était pas retardée par une transition. Par conséquent, selon Nuvemshop, les efforts d’optimisation précédents se sont concentrés sur des éléments qui n’ont jamais été le LCP.
L’enquête a identifié trois causes principales. Les transitions poussaient la détection vers la mauvaise image, le chargement paresseux retardait les images au-dessus de la ligne de flottaison qui devaient être chargées immédiatement et les images critiques manquaient de signaux de priorité. De plus, les mesures provenaient à la fois des pages de catégories et de produits, et pas seulement des pages d’accueil, la solution devait donc être efficace sur différents types de pages.
Les trois correctifs LCP
L’étude de cas inclut un quatrième changement, la mise en cache périphérique pour réduire la latence. Cependant, les ajustements de détection des éléments principaux impliquaient trois modifications dans la façon dont le haut de la page s’affiche et se charge. Nuvemshop a mis en œuvre les trois changements dans ses principaux thèmes et types de pages. Ces ajustements sont simples et suivent les meilleures pratiques courantes en matière de performances Web.
L’équipe a supprimé les transitions CSS des sections supérieures afin qu’elles s’affichent instantanément, permettant ainsi au navigateur de les reconnaître sans délai comme candidats LCP.
Ils ont aussi tiré loading="lazy" sur la première image dans ces sections supérieures. Les propres conseils de web.dev sont directs à ce sujet, mettant en garde contre le chargement paresseux de l’image LCP car cela ajoute toujours un délai de chargement.
Le dernier morceau était fetchpriority="high" sur l’image LCP probable, qui indique au scanner de préchargement du navigateur de la récupérer plus tôt. Nuvemshop dit avoir intégré cela dans une logique de validation afin que le signal ne se déclenche que là où l’élément pourrait réellement être le candidat LCP. Le conseil de Google est de réserver l’attribut à une ou deux images clés, car si tout est prioritaire, rien ne l’est.
Quoi d’autre rapporte Nuvemshop
Nuvemshop rapporte que son taux de réussite global Core Web Vitals s’est amélioré de 48 % à 72 % tout au long de l’année, et pas seulement le chiffre LCP.
La société a examiné les mêmes magasins brésiliens actifs en janvier 2025 et 2026. Pour les visiteurs mobiles arrivant via la recherche organique de Google, elle signale une augmentation de 8,9 % du taux de conversion et une augmentation de 8,4 % de l’engagement dans le panier.
Gardez à l’esprit qu’il s’agit de chiffres autodéclarés et que les chiffres d’achats sont une comparaison d’une année sur l’autre de cette cohorte, et non un test contrôlé. Nuvemshop lie cette direction à son travail de rapidité en s’appuyant sur une étude de Deloitte commandée par Google, qui a révélé que réduire le temps de chargement de 0,1 seconde peut augmenter la conversion au détail de 8,4 %.
Pourquoi c’est important
Avant de compresser une autre image de héros, vérifiez que vous optimisez l’élément que le navigateur traite réellement comme LCP. Ceci est particulièrement important dans les mises en page basées sur des modèles ou contenant beaucoup de carrousel, où cela peut ne pas tenir.
Notre propre couverture récente atterrit au même endroit. Dans un examen des Core Web Vitals sur les plates-formes CMS, les données HTTP Archive ont montré que le LCP du monde réel a tendance à se briser lorsqu’une plate-forme tarde à laisser le navigateur découvrir l’image principale, ou lorsqu’elle force cette image à rivaliser avec trop d’autres ressources hautement prioritaires, pas seulement lorsqu’une page est lourde. Barry Pollard a également expliqué comment tracer un problème LCP dans PageSpeed Insights avant de toucher à un code.
Le lien de conversion reflète l’interprétation des données par Nuvemshop. Les Core Web Vitals ne sont qu’un facteur de classement mineur, et Google a souligné la pertinence comme étant plus importante, de sorte qu’un magasin plus rapide est mieux lu comme un gain d’expérience d’achat que comme un levier de classement.
Regarder vers l’avenir
Il ne s’agit que de l’expérience autodéclarée d’une entreprise, il est donc préférable de considérer les gains d’achat comme directionnels. La technique elle-même n’est pas nouvelle non plus, puisque web.dev préconise depuis des années ce type de travail de découverte et de priorité. Ce que l’étude de cas ajoute est un exemple concret d’identification du véritable élément LCP dans des présentations qui varient d’un magasin à l’autre, ce qui constitue la partie la plus difficile sur toute plate-forme personnalisable.
