Avertissements de performances à l'exécution

Images surdimensionnées

Lorsque des images sont chargées, la taille intrinsèque du fichier téléchargé est comparée à la taille réelle de l'image sur la page. La taille réelle est calculée à partir de la taille de rendu de l'image une fois le CSS appliqué, multipliée par le ratio de pixels de l'appareil. Si l'image téléchargée est beaucoup plus grande (plus de 1200px de trop dans l'une ou l'autre dimension), cet avertissement est déclenché. Télécharger des images surdimensionnées peut ralentir le chargement de la page et avoir un effet négatif sur les Core Web Vitals.

Élément LCP chargé en lazy loading

Le plus grand élément de contenu d'une page pendant le chargement est considéré comme l'« élément LCP », qui se rapporte au Largest Contentful Paint, l'une des Core Web Vitals. Charger un élément LCP en lazy loading a un effet très négatif sur les performances de la page. Avec cette stratégie, le navigateur doit terminer les calculs de mise en page pour déterminer si l'élément se trouve dans le viewport avant de commencer à télécharger l'image. Par conséquent, un avertissement est déclenché lorsqu'Angular détecte que l'élément LCP a reçu l'attribut loading="lazy".

Déboguer l'erreur

Utilisez l'URL de l'image fournie dans l'avertissement de la console pour trouver l'élément <img> concerné.

Corriger les images surdimensionnées

• Utilisez une image source plus petite
• Ajoutez un srcset si plusieurs tailles sont nécessaires pour différentes mises en page.
• Passez à la directive d'image intégrée d'Angular (NgOptimizedImage), qui génère les srcsets automatiquement.

Corriger un élément LCP chargé en lazy loading

• Remplacez la valeur de l'attribut loading par une autre, comme "eager".
• Passez à la directive d'image intégrée d'Angular (NgOptimizedImage), qui permet de facilement rendre prioritaires les images LCP.

Désactiver les avertissements de performances des images

Les deux avertissements peuvent être désactivés individuellement, pour tout le site, à l'aide d'un provider à la racine de votre application :

providers: [
  {
    provide: IMAGE_CONFIG,
    useValue: {
      disableImageSizeWarning: true,
      disableImageLazyLoadWarning: true
    }
  },
],