Les images hors écran sont des images qui ne sont pas visibles à l'écran au moment où elles sont chargées. Ces images peuvent se trouver sous le pli ou cachées derrière d'autres éléments de la page. Le report des images hors écran peut améliorer le temps de chargement des pages en réduisant le nombre de requêtes HTTP à effectuer et en permettant au navigateur de continuer à rendre le contenu visible. En revanche, les images hors écran sont en cours de téléchargement.
Moyens de différer les images hors écran
Lorsque vous chargez des images sur un site Web, il est essentiel de veiller à ce qu'elles ne soient chargées que lorsque cela est nécessaire. Sinon, vous risquez de ralentir inutilement le temps de chargement de vos pages.
Une façon d'optimiser le chargement des images est de 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 plusieurs façons de différer les images hors écran. L'une d'elles consiste à utiliser le CSS pour définir la visibilité de ces images comme étant caché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 différer automatiquement les images hors écran en ne les chargeant que lorsqu'elles sont nécessaires à des tailles d'écran spécifiques.
La méthode que vous choisirez dépendra de votre situation particulière et du fait que vous souhaitiez que toutes les images hors écran soient différées ou seulement certaines. Dans la plupart des cas, l'utilisation de CSS pour définir la visibilité sur caché 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 fait de différer les images hors écran signifie que le contenu au-dessus du pli est rendu immédiatement sans attendre le chargement des images sous le pli. Cela peut représenter un gain de vitesse significatif pour les utilisateurs disposant de connexions plus lentes ou de forfaits de données avec compteur.
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 l'écran et que l'image apparaisse. Cela réduit à la fois l'utilisation de la bande passante et la charge du serveur.
Globalement, 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 devez différer les images hors écran. Vous souhaitez peut-être améliorer les performances de votre site ou faire en sorte que les visiteurs dont la connexion est lente puissent quand même 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.
Vous recherchez des services d'optimisation de site? Contactez notre équipe dès aujourd'hui !
