Les images hors écran sont des images qui ne sont pas visibles à l'écran au moment de leur chargement. Ces images peuvent être sous la ligne de flottaison ou cachées derrière d'autres éléments de la page. Le report des images hors écran peut améliorer les temps de chargement des pages en réduisant le nombre de requêtes HTTP à effectuer et en permettant au navigateur de continuer à restituer le contenu visible. En revanche, les images hors écran sont en cours de téléchargement.
Façons de différer les images hors écran
Lors du chargement d'images sur un site Web, il est essentiel de s'assurer qu'elles ne sont chargées qu'en cas de besoin. Sinon, vous risquez de ralentir inutilement les temps de chargement de vos pages.
Une façon d’optimiser le chargement des images consiste à différer les images hors écran. Cela signifie que les images ne sont chargées que lorsqu'elles sont visibles. Cela peut être particulièrement utile si vous avez beaucoup d’images sur une seule page.
Il existe différentes manières de différer les images hors écran. Une méthode consiste à utiliser CSS pour définir la visibilité de ces images sur masquée jusqu'à ce qu'elles deviennent visibles à l'écran. Une autre approche consiste à utiliser JavaScript pour détecter le moment où ces images deviennent visibles et déclencher leur téléchargement. Enfin, certaines solutions d'images réactives peuvent automatiquement différer les images hors écran en les chargeant uniquement lorsqu'elles sont nécessaires pour des tailles d'écran spécifiques.
La méthode que vous choisirez dépendra de votre situation particulière et si vous souhaitez que toutes les images hors écran soient différées ou seulement certaines. Dans la plupart des cas, utiliser CSS pour définir la visibilité sur masqué est la solution la plus simple. Cependant, les solutions basées sur JavaScript peuvent être meilleures si vous avez besoin de plus de contrôle sur le moment où ces images sont téléchargées.
Quels sont les avantages de différer les images hors écran ?
Visuellement, le report des images hors écran signifie que le contenu au-dessus de la ligne de flottaison est rendu immédiatement sans attendre le chargement des images situées en dessous de la ligne de flottaison. Cela peut représenter une augmentation significative de la vitesse pour les utilisateurs disposant de connexions plus lentes ou ceux disposant de forfaits de données limités.
D'un point de vue technique, le report des images hors écran empêche le navigateur d'effectuer des requêtes HTTP inutiles jusqu'à ce que l'utilisateur fasse défiler vers le bas et que l'image apparaisse. Cela réduit à la fois l'utilisation de la bande passante et la charge du serveur.
Dans l’ensemble, le report des images hors écran peut améliorer les temps de chargement des pages, réduire l’utilisation des données et améliorer les performances du serveur.
Conclusion
Il existe de nombreuses raisons pour lesquelles vous devriez différer les images hors écran. Vous souhaiterez peut-être améliorer les performances de votre site ou vous assurer que les visiteurs utilisant des connexions lentes peuvent toujours voir le contenu qui les intéresse. Quelles que soient vos raisons, nous espérons que cet article vous a aidé à comprendre comment différer les images hors écran. Si vous avez des questions ou des commentaires, veuillez les poser ci-dessous.
Recherchez-vous des services d'optimisation de site ? Contactez notre équipe dès aujourd'hui !
