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

Largest Contentful Paint image was lazily loaded - en bref.

Le chargement différé (lazy-loading) de l'image du Largest Contentful Paint déclenchera un avertissement Lighthouse. Les images chargées en différé seront mises en file d'attente pour le téléchargement bien plus tard que les images non différées (eager). Cela provoquera un rendu plus tardif de l'image et retardera la métrique Largest Contentful Paint. 

Les navigateurs sont assez intelligents pour comprendre cela, n'est-ce pas ? Oui, les navigateurs sont plutôt intelligents, mais pas dans ce cas !

Lorsque vous chargez un élément image en différé, vous dites explicitement au navigateur de déprioriser cette image.

Cela signifie que toutes les autres images non différées seront planifiées pour le téléchargement plus tôt que vos images différées. Lorsque cette image différée est votre élément LCP, vous retarderez probablement votre LCP. Peut-être même de beaucoup !

Les choses empirent lorsque vous utilisez des bibliothèques de chargement différé basées sur JavaScript comme lazysizes.js. Maintenant, le navigateur ne retarde pas seulement votre élément image LCP, vous devez même attendre que le JavaScript soit téléchargé et exécuté.

Corrigez l'avertissement Lighthouse en supprimant l'attribut loading="lazy" de votre image LCP ou en mettant à jour les filtres de vos plugins pour contourner le chargement différé pour l'image LCP.

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

Cet avertissement est donné lorsque l'image du Largest Contentful Paint est chargée en différé par le navigateur. Pourquoi ? Parce que le chargement différé de l'image la plus importante de la page (l'élément Largest Contenful Paint) est une mauvaise idée. Pour des raisons de vitesse de page, vous devriez charger cet élément le plus tôt possible. Le chargement différé de cet élément pourrait retarder le Largest Contentful Paint.

Un rappel rapide : le chargement différé (lazy loading)

Le chargement différé est le moment où 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 lorsque l'élément est proche de la partie visible de l'écran. Il existe 2 méthodes de chargement différé.

Chargement différé natif

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

<img  
     src="image.png" 
     width="123" 
     height="123" 
     alt="une image chargée en différé"
>

Chargement différé basé sur JavaScript

Le chargement différé basé sur JavaScript utilise une API JavaScript appelée intersection observer pour déterminer quand une image est dans ou proche de la fenêtre visible (viewport). Lorsqu'une image est dans la fenêtre visible, la source de l'image est échangée pour l'image finale. Habituellement, vous pouvez reconnaître le chargement différé basé sur JavaScript par l'attribut data-src sur l'image. Le chargement différé JavaScript est supporté par encore plus de navigateurs mais a un inconvénient sérieux : 'il utilise JavaScript'. Pour que le chargement différé commence même, un fichier JavaScript doit être téléchargé. Cela signifie que le chargement différé basé sur JavaScript ne peut jamais être aussi rapide et efficace que le chargement différé natif

<img  
     src="small-placeholder.png" 
     width="123" 
     height="123" 
     alt="une image chargée en différé"
>

Comment un 'Largest Contentful Paint image chargé en différé' affecte-t-il la vitesse de la page ?

Le chargement différé de cet élément retardera le moment où l'image LCP est peinte sur l'écran. Cela amènera un visiteur à croire que la page se charge plus lentement car cela prend plus de temps pour être 'visuellement prêt'

L'image la plus importante, souvent l'élément LCP, devrait être chargée immédiatement pour s'assurer qu'elle puisse être peinte sur l'écran le plus vite possible.

Maintenant, vous pourriez penser qu'un navigateur serait assez intelligent pour comprendre cela ? Vous vous trompez ! Lorsque vous chargez un élément image en différé, vous dites explicitement au navigateur de déprioriser cette image. Cela signifie que toutes les autres images non différées seront planifiées pour le téléchargement plus tôt que vos images différées. Lorsque cette image différée est votre élément LCP, vous retarderez probablement votre LCP. Peut-être même de beaucoup !

Les choses empirent lorsque vous utilisez des bibliothèques de chargement différé basées sur JavaScript comme lazysizes.js. Maintenant, le navigateur ne retarde pas seulement votre élément image LCP, vous devez même attendre que le JavaScript soit téléchargé et exécuté.

Jetez simplement un œil à cet onglet réseau de Chrome où j'ai chargé en différé l'image LCP (HERO.jpg) et chargé immédiatement (eager) 6 autres images. Vous verrez que l'image HERO est la dernière image à commencer le téléchargement et aussi la dernière image à finir le téléchargement !

Un peu plus de détails

Maintenant, devenons un peu plus techniques. Pourquoi un navigateur ne peut-il pas comprendre cela tout seul ? C'est que, avec le chargement différé, vous instruisez spécifiquement un navigateur de déprioriser une image. Dans de nombreux cas, cela signifiera qu'un navigateur commencera à télécharger d'autres ressources en premier. Et c'est exactement ce qui cause le retard dans le LCP.

• Les images différées seront mises en file d'attente pour le téléchargement bien plus tard que les images non différées (eager).
• Les images différées sont souvent téléchargées avec une priorité basse.
• D'autres éléments comme les images normales, les scripts différés, les polices, etc. pourraient être planifiés pour le téléchargement plus tôt que les images différées.
• Le chargement différé basé sur JavaScript dépend d'un JavaScript qui doit se télécharger et s'exécuter avant que le chargement différé ne puisse même commencer.
  

Comment corriger 'Largest Contentful Paint image was lazily loaded'

Corriger l'avertissement concernant l'image Largest Contentful Paint différée est simple. Ne chargez simplement pas cette image en différé.

En théorie

• Si vous utilisez le chargement différé natif, supprimez le loading="lazy" de l'élément LCP ou changez-le en loading="eager"
• Si vous utilisez le chargement différé basé sur JavaScript, vous pourriez envisager de passer au chargement différé natif plus rapide ou simplement omettre l'image LCP du chargement différé.
• Si vous utilisez une sorte de composant image comme next/image, définissez la strategy="eager".

Dans la vraie vie

Dans la vraie vie, cela pourrait causer quelques maux de tête. De nombreux sites utilisent des plugins d'optimisation qui chargeront en différé toutes les images sur l'écran pour vous. Ces plugins ne font pas la distinction entre les images importantes, toujours visibles et les images en dessous de la ligne de flottaison.

La plupart des plugins vous permettront de 'contourner le chargement différé' basé sur le nom de fichier, le nom de classe ou d'autres attributs. Cela signifie que vous devrez lire la documentation de votre plugin ou simplement chercher sur Google '[nom de votre plugin] + bypass lazy loading'. Ensuite, modifiez votre fichier de modèle et changez votre image principale en conséquence ou changez les images dans votre éditeur de page.

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

Parfois, votre CMS ne vous permettra pas de changer les paramètres de chargement différé des images. Dans ce cas, il existe encore des solutions de contournement que vous pouvez utiliser pour minimiser l'impact.

• Chargez en différé toutes les images pour vous assurer que les images 'eager' en dessous de la ligne de flottaison ne sont pas téléchargées avant l'image LCP
  
• Évitez les images d'arrière-plan pour vous assurer qu'aucune image d'arrière-plan n'est téléchargée avant l'élément LCP
  
• Préchargez l'élément LCP. Cela s'assurera que l'image LCP est planifiée pour le téléchargement le plus tôt possible
  
• Désactivez le chargement différé basé sur JavaScript et passez au chargement différé natif. Cela supprimera au moins le délai JavaScript
  
• Ajoutez fetchpriority = "high" à l'élément LCP. Cela planifiera l'image pour un téléchargement précoce
  
• Optimisez toutes vos images. Utilisez des images réactives et des formats d'image Next-gen pour réduire le temps nécessaire au téléchargement des images.