Chargement différéLe chargement différé (lazy loading en anglais) est une stratégie d'identification des ressources non bloquantes (non critiques) afin de ne les charger qu'au moment où elles sont utiles. C'est une façon réduire le temps de chargement de la page et d'éviter des téléchargements inutiles.
Le chargement différé peut se dérouler à plusieurs moments du chargement d'une page, mais il se déroule le plus souvent lorsque l'internaute interagit avec le site, surtout avec le défilement, au moment où le contenu arrive dans le cadre visible de la page.
Les images constituent le type d'élément le plus demandé pour la plupart des sites Web et consomment généralement plus de bande passante que toute autre ressource. 90% des sites envoient plus de 5 Mo d'images sur ordinateur et sur mobile. Cela fait beaucoup de photos de chats!
Avec les versions récentes des navigateurs, un attribut est maintenant supporté sur les balises images: loading. Vous pouvez utiliser cet attribut pour différer complètement le chargement des images hors écran accessibles par défilement:
Elles ne seront donc chargées que si l'utilisateur défile jusqu'à cette image. Sinon, aucune image n'est chargée pour rien.
Attributs de dimension
Les images doivent idéalement inclure des attributs de dimension.
Lorsque le navigateur charge une image, il n'en connaît pas immédiatement les dimensions, sauf si elles sont explicitement spécifiées. Afin de permettre au navigateur de réserver suffisamment d'espace pour les images sur une page, nous vous recommandons d'inclure les attributs width et height dans toutes les balises <img>. Si les dimensions ne sont pas spécifiées, des décalages de mise en page peuvent se produire. Ces décalages sont plus visibles sur les pages qui mettent un certain temps à se charger.
ou