Comment la stratégie de priorisation des images de Nuvemshop a permis d'améliorer le temps LCP de 68% et d'augmenter les conversions de 8,9 %

Federico Iglesias

Jesus Biaggioni

Kaio Graco Cardamone

Lucas Demarchi

Mari Viana

Publié le 24 juin 2026

Nuvemshop (Tiendanube en Amérique latine hispanophone) est la principale plate-forme d'e-commerce de la région, avec plus de 180 000 boutiques en ligne. Les marchands personnalisent leurs vitrines à l'aide de plusieurs thèmes et de mises en page de contenu dynamiques. Il est donc difficile de garantir des chargements de page rapides dans cette diversité.

• Amélioration de 68%de la métrique Largest Contentful Paint (LCP), qui est passée de 57% à 96% en un an. Cela reflète un changement majeur dans la façon dont les boutiques affichent le contenu en haut de la fenêtre d'affichage pour les utilisateurs réels.
• Le taux de réussite des métriques Core Web Vitals est passé de 48% à 72%, ce qui signifie que près de trois boutiques sur quatre respectent désormais le seuil de performances de base de Google.
• L'engagement dans les résultats Shopping s'est amélioré de manière mesurable : l'analyse de la même cohorte de boutiques brésiliennes actives en janvier 2025 et en janvier 2026 a montré que les visiteurs mobiles issus de la recherche naturelle Google ont enregistré les résultats suivants :
  • Augmentation de 8,9% du taux de conversion (session à commande payante)
  • Augmentation de 8,4% du taux d'engagement dans le panier (session à panier)
• Les gains les plus importants ont été enregistrés sur mobile, ce qui correspond aux améliorations les plus significatives du LCP.

Ces résultats sont conformes à une étude de Deloitte commandée par Google (plus de 30 millions de sessions sur 37 marques), qui a révélé qu'une amélioration de 0,1 seconde de la vitesse de chargement peut augmenter les taux de conversion des détaillants de 8,4 %. Cela valide l'orientation de nos investissements.

Le défi : la détection du LCP dans les mises en page d'e-commerce dynamiques

Au début de l'année 2025, seuls 48% de nos boutiques respectaient les seuils des métriques Core Web Vitals, et 57% avaient des scores LCP corrects. Notre hypothèse initiale était le poids des images ou la latence du serveur. Nous avions tort.

Grâce à l'analyse PageSpeed Insights sur des milliers de boutiques, nous avons découvert que notre plate-forme permet aux marchands d'organiser dynamiquement les sections de la page d'accueil : les carrousels, les bannières, les grilles de produits et les modules personnalisés peuvent apparaître dans n'importe quel ordre.

Cette flexibilité a introduit un problème imprévu : le bon élément n'était pas toujours identifié comme LCP. Dans les boutiques avec des carrousels, qui représentaient 85 % de nos vitrines, une bannière située plus bas dans la fenêtre d'affichage était parfois marquée comme LCP au lieu de la première image du carrousel, en fonction de la façon dont la page s'affichait sur différents écrans et appareils. Cela signifiait que nos efforts d'optimisation n'avaient pas l'effet escompté : nous optimisions des éléments qui n'étaient pas réellement des éléments LCP.

Contrairement aux plates-formes SaaS classiques, nous ne pouvions pas simplement corriger la page d'accueil. Nous avions besoin d'une solution qui fonctionne avec toutes les configurations de thème, tous les arrangements de section et toutes les personnalisations de marchand possibles, sans casser les boutiques existantes ni limiter la liberté créative.

Comment les mises en page dynamiques affectent la sélection des éléments LCP

Grâce à l'analyse PageSpeed Insights et à la surveillance des utilisateurs réels, nous avons découvert que les transitions CSS sur les carrousels et les bannières étaient retardées lorsque les éléments devenaient visibles pour l'algorithme de détection LCP du navigateur. Même si les utilisateurs percevaient le carrousel comme se chargeant en premier, le navigateur marquait parfois une bannière dans la deuxième section comme élément LCP, car la visibilité de cet élément n'était pas retardée par les effets de transition.

Nous avons identifié trois causes racines :

• Les transitions CSS étaient retardées lorsque les éléments étaient considérés comme visibles, ce qui poussait la détection LCP vers le mauvais frame.
• Le chargement différé était appliqué aux images en haut de la fenêtre d'affichage qui devaient se charger immédiatement.
• L'absence de signaux de priorité signifiait que les images les plus importantes n'étaient pas chargées en premier.

Nous avons également constaté qu'une partie importante des mesures LCP provenaient des pages de catégories et de produits, et pas seulement des pages d'accueil. Cela signifie que nos corrections devaient s'appliquer de manière cohérente à tous les types de pages à fort trafic.

Implémentation : correction des trois causes racines à grande échelle

Une fois les causes identifiées, les corrections ont été simples. Nous les avons appliquées de manière cohérente à tous les thèmes et types de pages principaux, mais chacun nécessitait une définition précise pour éviter de créer de nouveaux problèmes.

• Suppression des transitions CSS pour les sections en première position. Les sections qui apparaissent en premier sur la page s'affichent désormais immédiatement, ce qui permet au navigateur de les détecter comme candidats LCP sans délai artificiel.

• Suppression du chargement différé des images en haut de la fenêtre d'affichage. Pour les images de la première section, nous supprimons conditionnellement loading="lazy" afin d'éliminer le délai de chargement des ressources. Nous avons veillé à ne cibler que la première image des sections en première position :

  <!-- Before -->
  <img src="slide-1.webp" loading="lazy" alt="Featured product">
  <!-- After -->
  <img src="slide-1.webp" alt="Featured product">
  

• Ajout de signaux de priorité explicites. En ajoutant fetchpriority="high", nous indiquons au scanner de préchargement du navigateur que l'image LCP est une ressource de priorité élevée, ce qui lui permet d'être détectée et téléchargée plus rapidement, avant la fin de la mise en page et du rendu. Nous avons ajouté une logique de validation pour nous assurer que les signaux de priorité ne s'appliquent que lorsque l'élément est réellement dans une position où il pourrait être le candidat LCP : ajouter fetchpriority="high" à trop d'images serait contre-productif, car si tout est de haute priorité, rien ne l'est.

  <!-- Before -->
  <img src="slide-1.webp" alt="Featured product">
  <!-- After -->
  <img src="slide-1.webp" fetchpriority="high" alt="Featured product">
  

• Réduction de la latence grâce à la mise en cache périphérique. La mise en cache est efficace pour réduire les temps de chargement, mais dans l'e-commerce, elle comporte un risque réel : la diffusion de données de prix et d'inventaire obsolètes affecte directement la confiance des clients et les revenus. Nous avons abordé ce problème avec soin en surveillant les métriques commerciales parallèlement aux données sur les performances, en maximisant les taux de succès de cache tout en veillant à ne jamais mettre en cache de contenu susceptible de nuire à l'expérience du marchand ou de l'acheteur.

Impact et résultats : amélioration du LCP de 57% à 96 %

Ces améliorations ont permis à Nuvemshop et Tiendanube de devenir la plate-forme d'e-commerce la plus performante au Brésil, en Argentine et au Mexique.

Points clés et réflexions post-mortem

L'architecture hautement personnalisable de Nuvemshop nous a empêchés de nous appuyer sur des playbooks d'optimisation standards. Le véritable problème n'était pas le poids des images ni la latence du serveur, mais le fait que les navigateurs sélectionnaient des éléments inattendus comme LCP en raison des transitions CSS, de l'absence de signaux de priorité et du chargement différé appliqué aux images en haut de la fenêtre d'affichage.

La correction a été simple une fois que nous avons compris les causes racines : supprimer les transitions des sections en première position, supprimer le chargement différé des images en haut de la fenêtre d'affichage et ajouter des signaux de priorité explicites. Nous avons appliqué cette correction de manière cohérente à tous les thèmes principaux, types de pages et plus de 180 000 boutiques de notre plate-forme.

Les résultats parlent d'eux-mêmes : les taux de réussite du LCP sont passés de 57% à 96%, les taux de réussite globaux des métriques Core Web Vitals ont augmenté de 48% à 72%, et les marchands ont enregistré des gains mesurables : une augmentation de 8,9% du taux de conversion et de 8,4% de l'engagement dans le panier sur mobile. Les vitrines rapides ne sont pas seulement une réussite technique, elles contribuent directement au succès des marchands.