Reporter les images hors écran

La section "Opportunités" de votre rapport Lighthouse répertorie toutes les images masquées ou hors écran de votre page, ainsi que les économies potentielles en kibioctets (Kio). Envisagez de charger ces images de manière différée une fois le chargement de toutes les ressources critiques terminé afin de réduire le délai avant interactivité:

Capture d'écran de l'audit des images hors écran de Lighthouse Defer

Consultez également l'atelier de programmation sur le chargement différé d'images hors écran avec des tailles différées.

Conseils spécifiques à la pile

AMP

Chargez automatiquement les images de manière différée avec amp-img. Consultez le guide Images.

Drupal

Installez un module Drupal capable de charger les images de manière différée. Ces modules offrent la possibilité de différer le chargement des images hors écran afin d'améliorer les performances.

Joomla

Installez un plug-in Joomla de chargement différé qui permet de différer le chargement des images hors écran, ou passez à un modèle offrant cette fonctionnalité. À partir de la version 4.0 de Joomla, un plug-in de chargement différé dédié peut être activé à l'aide du plug-in "Content - LazyLoading Images" (Contenu - Images de chargement différé). Envisagez également d'utiliser un plug-in AMP.

Magento

Envisagez de modifier vos modèles de produits et de catalogue pour utiliser la fonctionnalité de chargement différé de la plate-forme Web.

WordPress

Installez un plug-in WordPress de chargement différé qui permet de différer le chargement des images hors écran, ou passez à un thème qui fournit cette fonctionnalité. Pensez également à utiliser le plug-in AMP.

Ressources