Le chargement différé, ou lazy loading, est une technique d’optimisation des performances web qui permet de retarder le chargement des ressources non critiques, telles que les images, jusqu’à ce qu’elles soient nécessaires à l’utilisateur. Cela permet d’améliorer le temps de chargement initial de la page et de réduire la consommation de bande passante.
Depuis HTML 5.1, l’attribut loading peut être utilisé sur les éléments <img> et <iframe> pour indiquer au navigateur comment charger la ressource. La valeur lazy indique au navigateur de retarder le chargement de l’image jusqu’à ce qu’elle soit dans la zone d’affichage (viewport). Cela signifie que l’image ne sera pas chargée tant que l’utilisateur n’aura pas fait défiler la page jusqu’à ce qu’elle soit visible.
Sa fonction principale est de retarder le chargement des images jusqu’à ce qu’elles soient nécessaires, c’est-à-dire jusqu’à ce qu’elles entrent dans le champ de vision de l’utilisateur. Cette approche diffère de la méthode traditionnelle de chargement des images, où toutes les ressources sont téléchargées dès le chargement initial de la page, quelle que soit leur visibilité réelle pour l’utilisateur.
Comment utiliser lazy loading
Dans l’exemple ci-dessous, l’image image.jpg ne sera pas chargée tant que l’utilisateur n’aura pas fait défiler la page jusqu’à ce qu’elle soit visible dans la fenêtre du navigateur.
<img src="image.jpg" alt="image d'exemple de lazy loading" loading="lazy">L’ajout de l’attribut lazy à un élément <img> est simple et direct. Il suffit d’inclure l’attribut loading avec la valeur lazy dans la balise.
En ajoutant cette seule ligne à vos balises <img>, vous activez le chargement paresseux pour ces images spécifiques, ce qui entraînera une amélioration significative des performances de votre site web.
Il est important de noter que l’attribut loading est une fonctionnalité relativement récente et qu’elle n’est pas encore supportée par tous les navigateurs.
Les différentes valeurs de l’attribut loading
l’attribut loading peut avoir d’autres valeurs que lazy. Voici les différentes valeurs possibles :
| Valeur | Description |
|---|---|
eager | Valeur par défaut. Charger l’image immédiatement. |
lazy | Retarder le chargement de l’image jusqu’à ce qu’elle soit dans la zone d’affichage. |
auto | Laisser le navigateur décider de la meilleure façon de charger l’image. |
En plus des valeurs mentionnées ci-dessus, il existe également des valeurs expérimentales qui peuvent être utilisées dans certains navigateurs. Ces valeurs ne sont pas encore standardisées et ne doivent être utilisées qu’à des fins de test.
Les avantages d’utiliser un chargement différé avec lazy loading
- Amélioration du temps de chargement initial de la page : En retardant le chargement des images, le navigateur peut se concentrer sur le rendu du contenu principal de la page, ce qui permet à l’utilisateur de commencer à interagir avec la page plus rapidement.
- Réduction de la consommation de bande passante : Les images qui ne sont pas visibles pour l’utilisateur ne sont pas chargées, ce qui permet de réduire la quantité de données téléchargées. Cela est particulièrement important pour les utilisateurs mobiles qui ont des forfaits de données limités.
- Amélioration du référencement : Le temps de chargement de la page est un facteur de classement important pour les moteurs de recherche. Le chargement différé des images peut donc aider à améliorer le référencement de votre site web.
En plus des avantages mentionnés ci-dessus, le chargement différé des images peut également améliorer l’expérience utilisateur en réduisant le temps d’attente pour le chargement des images, réduire la consommation de batterie sur les appareils mobiles et améliorer la scalabilité du site web en réduisant la charge sur le serveur.
Cas concret d’utilisation
Voici quelques exemples concrets de situations où le chargement différé des images peut être utile :
- Un site web d’actualités avec des articles longs et de nombreuses vidéos. Le lazy loading peut être utilisé pour retarder le chargement des vidéos jusqu’à ce que l’utilisateur fasse défiler la page jusqu’à la vidéo.
- Un site web de e-commerce avec des pages produits volumineuses et de nombreuses images. Le lazy loading peut être utilisé pour retarder le chargement des images des produits jusqu’à ce que l’utilisateur fasse défiler la page jusqu’aux images.
- Un site web communautaire avec des forums et des discussions. Le lazy loading peut être utilisé pour retarder le chargement des avatars des utilisateurs jusqu’à ce que l’utilisateur fasse défiler la page jusqu’aux commentaires.
- Sites web avec de longues pages, où les utilisateurs doivent faire défiler beaucoup pour voir tout le contenu.
- Sites web mobiles, où la bande passante est limitée et où le temps de chargement est crucial.
Si vous envisagez d’utiliser le chargement différé des images sur votre site web, il est recommandé de faire des tests pour vous assurer qu’il fonctionne correctement et qu’il n’affecte pas l’expérience utilisateur.
Quelles sont les autres utilisation de lazy loading ?
- Vidéos : Le lazy loading peut être utilisé pour retarder le chargement des vidéos jusqu’à ce que l’utilisateur clique sur le bouton de lecture. Cela peut être utile pour les vidéos volumineuses ou pour les sites web où les vidéos ne sont pas essentielles pour la compréhension du contenu.
- Contenus iframe : Le lazy loading peut être utilisé pour retarder le chargement des contenus iframe jusqu’à ce que l’utilisateur clique sur l’iframe. Cela peut être utile pour les iframes qui ne sont pas essentiels pour la compréhension du contenu ou qui proviennent de domaines externes.
- Contenus JavaScript : Le lazy loading peut être utilisé pour retarder le chargement des fichiers JavaScript jusqu’à ce qu’ils soient nécessaires. Cela peut être utile pour les fichiers JavaScript volumineux ou pour les fichiers JavaScript qui ne sont pas essentiels pour le rendu initial de la page.
- Contenus CSS : Le lazy loading peut être utilisé pour retarder le chargement des fichiers CSS jusqu’à ce qu’ils soient nécessaires. Cela peut être utile pour les fichiers CSS volumineux ou pour les fichiers CSS qui ne sont pas essentiels pour le rendu initial de la page.
Il est important de noter que le lazy loading n’est pas toujours la meilleure solution. Pour certains types de contenu, il peut être préférable de charger le contenu immédiatement afin de fournir une meilleure expérience utilisateur. Par exemple, il est généralement préférable de charger immédiatement les images critiques, telles que le logo du site web ou l’image principale d’une page.
Le chargement différé des images est une technique simple et efficace pour améliorer les performances web. L’attribut loading est un moyen simple d’implémenter le chargement différé des images en HTML, mais il est recommandé d’utiliser une bibliothèque JavaScript pour assuré une parfaite compatibilité avec les anciens navigateurs.
