Le lazy loading permet d’améliorer les temps de chargement, en particulier sur les sites internet incluant de nombreuses données telles que des images et des vidéos.
Le lazy loading : Kesako ?
Par défaut, le navigateur charge toutes les ressources nécessaires pour afficher la page de la façon désirée. Les éléments sont chargés en même temps même s’ils ne se trouvent pas dans le champ de vision de l’utilisateur.
Généralement réalisé avec du Javascript, le navigateur charge uniquement les images et les autres données lorsqu’elles apparaissent dans la zone de visualisation de l’utilisateur, par exemple en faisant défiler la page ou en augmentant la taille de la fenêtre du navigateur.
Cela permet d’améliorer la vitesse d’affichage des pages d’un site Web ce qui est un critère crucial d’optimisation pour les moteurs de recherche (SEO) et permet donc d’obtenir une meilleure position dans le serp* de google.
*SERP est l’acronyme de « search engine result page » ou page de résultats des moteurs de recherche
Le lazy loading en HTML
Depuis 2018, Le lazy loading peut être utiliser sous la forme d’un attribut HTML.
Loading =
- Lazy : le chargement est retardé jusqu’à ce que l’utilisateur scroll et s’approche du bas de la fenêtre du navigateur.
- Eager : Charge les ressources immédiatement (Par défaut)
- Auto : Le navigateur décidera s’il faut ou non d’utiliser le Lazy loading
Navigateurs supportés :
Edge / Chrome / Opera / Samsung internet / Navigateur Android / Firefox supporte uniquement pour les images / Safari non supporté par défaut mais peux être activer dans les options
Comparaison avec et sans lazy loading
Comparaison avec du lorem ipsum et 3 images sur la page
Sans lazy loading :
Avec lazy loading :
Sans lazy loading :
Avec lazy loading :
Les autres images se chargent au scroll
On peut voir que la vitesse d’affichage est considérablement réduite. De plus le test a été fait avec des images qui ne sont pas du tout optimisées donc on peut aller encore plus loin dans le gain de performance.
N’hésitez pas à intégrer le lazy loading pour satisfaire vos visiteurs !
Pour plus d’info sur les navigateurs compatible : https://caniuse.com/loading-lazy-attr