Corriger l'avertissement 'Largest Contentful Paint image was lazily loaded' dans Lighthouse

Largest Contentful Paint image was lazily loaded : en bref

"Le lazy loading de l'image Largest Contentful Paint déclenchera un avertissement Lighthouse." Les images en lazy loading sont mises en file d'attente pour le téléchargement bien plus tard que les images eager, retardant la métrique LCP. 

Dernière révision par Arjen Karel en février 2026

"Les navigateurs sont assez intelligents pour comprendre ça tout seuls, non ? Oui, les navigateurs sont plutôt intelligents, mais pas dans ce cas !"

"Quand vous appliquez le lazy loading à un élément image, vous dites explicitement au navigateur de déprioriser cette image."

Cela signifie que les images non-lazy sont planifiées plus tôt. Quand l'image lazy est votre élément LCP, vous retarderez probablement votre LCP, potentiellement de manière significative ! Les bibliothèques JavaScript de lazy loading comme lazysizes.js aggravent le problème en nécessitant le téléchargement et l'exécution du JS avant que le lazy loading ne commence.

Selon le Web Almanac 2025, 10,4% des pages mobiles appliquent encore le lazy loading natif à leur image LCP et 5,9% supplémentaires utilisent le lazy loading basé sur JavaScript. Cela représente environ 1 page sur 6 qui retarde activement son contenu le plus important.

Corrigez l'avertissement Lighthouse en supprimant l'attribut loading="lazy" de votre image LCP ou en mettant à jour les filtres de plugin pour contourner le lazy loading pour l'image LCP.

Qu'est-ce que l'avertissement 'Largest Contentful Paint image was lazily loaded' ?

Cet avertissement apparaît lorsque l'image Largest Contentful Paint est en lazy loading. Pour la vitesse de la page, "vous devriez charger cet élément le plus tôt possible. Le lazy loading de cet élément pourrait retarder le Largest Contentful Paint."

Un rappel rapide : le lazy loading

"Le lazy loading c'est quand un élément, souvent une image, n'est pas planifié pour le téléchargement par le navigateur immédiatement pendant le chargement de la page mais plutôt quand l'élément est proche de la partie visible de l'écran." Deux méthodes existent.

Lazy loading natif

"Le lazy loading natif utilise l'API native de lazy loading du navigateur. Pour les images, c'est aussi simple que d'ajouter loading="lazy" à la balise image." Ceci est supporté par tous les navigateurs modernes.

<img loading="lazy"
     src="image.png"
     width="123"
     height="123"
     alt="a lazy loaded image"
>

Lazy loading basé sur JavaScript

"Le lazy loading basé sur JavaScript utilise une API JavaScript appelée l'Intersection Observer pour déterminer quand une image est dans ou proche du viewport visible." Quand elle est détectée, le src est échangé. Reconnaissable par l'attribut data-src. Bien que largement supporté, "il utilise JavaScript", nécessitant un téléchargement avant que le lazy loading ne commence, ce qui le rend plus lent que les approches natives.

<img data-src="image.png"
     src="small-placeholder.png"
     width="123"
     height="123"
     alt="a lazy loaded image"
>

Comment le 'lazy loading de l'image Largest Contentful Paint' affecte-t-il la vitesse de la page ?

"L'élément Largest Contentful Paint est le plus grand élément qui a été peint à l'écran, dans le viewport visible, pendant le chargement de la page." Il marque le moment où la page semble visuellement prête. Le lazy loading de cet élément retarde cette perception, donnant aux visiteurs l'impression d'un chargement plus lent.

L'image la plus importante devrait se charger immédiatement pour un affichage le plus rapide possible. Cependant, le lazy loading explicite la dépriorise, mettant d'autres ressources en file d'attente avant elle. Avec le lazy loading JavaScript, vous ajoutez des délais supplémentaires en attendant l'exécution du script.

Quand vous ajoutez loading="lazy" à une image, le scanner de préchargement du navigateur l'ignore complètement. Normalement, le scanner de préchargement découvre les images pendant l'analyse du HTML et commence à les récupérer tôt. Le lazy loading exclut cette découverte précoce, ce qui est exactement la raison pour laquelle il augmente le délai de chargement de la ressource LCP.

Dans un exemple d'onglet réseau Chrome avec une image LCP lazy et six images eager, l'image lazy commence et finit son téléchargement en dernier, démontrant l'impact en conditions réelles.

Un peu plus de détails

Les navigateurs ne peuvent pas automatiquement outrepasser les directives de lazy loading. Les raisons techniques des retards LCP incluent :

• "Les images lazy seront mises en file d'attente pour le téléchargement bien plus tard que les images non-lazy (eager)."
• Les images lazy se téléchargent généralement avec une priorité basse.
• "D'autres éléments comme les images normales, les scripts différés, les polices, etc. peuvent être planifiés pour le téléchargement avant les images lazy."
• Le lazy loading JavaScript dépend du téléchargement et de l'exécution du script.

Comment corriger 'Largest Contentful Paint image was lazily loaded'

"Corriger l'avertissement est simple : ne faites pas de lazy loading sur cette image."

En théorie

• Pour le lazy loading natif, supprimez loading="lazy" ou changez en loading="eager"
• Pour le lazy loading JavaScript, passez aux approches natives ou excluez l'image LCP.
• Pour Next.js next/image, définissez priority pour charger l'image en eager avec un indice de préchargement.

Si votre élément LCP est une image hero, consultez le guide complet sur comment corriger les images hero lentes pour des techniques d'optimisation supplémentaires incluant le preloading, fetchpriority, et les images responsive.

Dans la vraie vie

Les plugins d'optimisation appliquent souvent le lazy loading à toutes les images automatiquement sans distinguer leur importance. La plupart permettent de contourner le lazy loading via le nom de fichier, la classe ou les attributs. Consultez la documentation de votre plugin et mettez à jour vos templates en conséquence.

WordPress 6.3 et versions ultérieures n'appliquent plus le lazy loading aux premières images et ajoutent automatiquement fetchpriority="high" à l'image LCP probable. Si vous voyez toujours cet avertissement sur un site WordPress, un plugin d'optimisation tiers outrepasse probablement ce comportement. Selon le chapitre Performance du Web Almanac 2022, 72% des pages avec une image LCP en lazy loading sont des sites WordPress.

Solution de contournement pour 'Largest Contentful Paint image was lazily loaded'

Quand les restrictions du CMS empêchent de modifier les paramètres de lazy loading, des solutions de contournement minimisent l'impact :

• Appliquer le lazy loading à toutes les images pour que les images eager sous la ligne de flottaison ne se téléchargent pas en premier
• Éviter les images d'arrière-plan pour empêcher les téléchargements concurrents
• Précharger l'élément LCP pour planifier un téléchargement anticipé
• Désactiver le lazy loading JavaScript et utiliser le natif à la place
• Ajouter fetchpriority="high" à l'élément LCP pour une planification anticipée. Pour plus de détails sur la façon dont les navigateurs priorisent les ressources, consultez le guide de priorisation des ressources.
• Optimiser toutes les images en utilisant des techniques responsive et des formats de nouvelle génération pour réduire le temps de téléchargement.

Après avoir supprimé le lazy loading de votre image LCP, vérifiez l'amélioration avec le Real User Monitoring. L'avertissement Lighthouse est basé sur des données de laboratoire, mais Google utilise les données de terrain des utilisateurs réels pour les signaux de classement. Sur les sites suivis par CoreDash, les pages sans image LCP en lazy loading obtiennent 79% de 'bon' sur le LCP contre 52% pour les pages qui appliquent encore le lazy loading à leur élément LCP.