Nous contacter

  1. Accueil
  2. Tutoriels
  3. CSS et intégration web
  4. Comment mettre en place du lazy loading sur son site web ?

Comment mettre en place du lazy loading sur son site web ?

L'amélioration des performances d'un site web est un défi constant pour les développeurs et les designers web. Parmi les stratégies d'optimisation, le "lazy loading" se démarque comme une méthode efficace pour accélérer le chargement des pages et améliorer l'expérience des utilisateurs.

Dans cet article, nous vous expliquons étape par étape comment mettre en place du lazy loading sur votre site web, que vous utilisiez HTML, CSS ou JavaScript.

Qu'est-ce que le lazy loading ?

Le lazy loading, ou chargement paresseux, est une technique qui consiste à ne charger les éléments d'une page web que lorsque l'utilisateur en a besoin, plutôt que de tout charger en une seule fois.

Par exemple, sur une page comportant de nombreuses images, le lazy loading permettra de ne charger que les images visibles à l'écran, et de ne charger les images hors de l'écran que lorsque l'utilisateur scrollera pour les atteindre.

Cela permet de réduire considérablement le temps de chargement initial de la page, offrant ainsi une meilleure expérience utilisateur.

Comment mettre en place du lazy loading avec HTML ?

La méthode la plus simple pour implémenter du lazy loading sur votre site web est d'utiliser l'attribut 'loading="lazy"' sur vos balises '<img>' ou '<iframe>'.

Voici un exemple de code HTML :

Lazy loading html

Lorsque l'utilisateur scrollera pour atteindre ces éléments, ils seront alors chargés progressivement.

  • Attention, cette méthode n'est prise en charge que par les navigateurs les plus récents. Pour une compatibilité élargie, vous pouvez utiliser des solutions JavaScript.

Mettre en place du lazy loading avec JavaScript

Une autre approche consiste à utiliser des bibliothèques JavaScript dédiées au lazy loading. Cela vous permettra de bénéficier de fonctionnalités avancées et d'une meilleure compatibilité avec les anciens navigateurs.

Voici les principales étapes pour mettre en place du lazy loading avec JavaScript :

  • Étape 1
    Choisissez une bibliothèque JavaScript adaptée à vos besoins, comme Lazysizes, Vanilla Lazyload ou Lozad.js.
  • Étape 2
    Téléchargez la bibliothèque via npm, Yarn, Bower ou CDN :
    (Dans cet exemple nous utiliserons Lozard.js)

Lazy loading js bibliotheque npm

  • Étape 3
    Incluez le script de la bibliothèque dans votre code HTML :

Lazy loading js html 1

  • Étape 4
    Dans votre code HTML ajoutez une classe à toutes les éléments que vous souhaitez charger en lazy loading :

Lazy loading js css 1

  • Étape 5
    Dans JavaScript, initialisez la bibliothèque Lozad avec les options :

Lazy loading js initialisation

  • Étape 6
    Configurez les options de la bibliothèque JavaScript selon vos besoins (seuils de chargement, préchargement, etc.).

Avec cette méthode, la bibliothèque JavaScript se chargera automatiquement des éléments marqués comme devant être chargés en lazy loading, offrant une expérience fluide à vos utilisateurs.

Bibliothèques JavaScript pour le lazy loading

Optimiser le lazy loading avec CSS

Vous pouvez également ajouter du style CSS à vos éléments en lazy loading pour les mettre en forme davantage :

Lazy loading css

Cela permettra d'obtenir un rendu plus lisse, avec une transition fluide lors du chargement des éléments.

Bonus : Préchargement et optimisation avancée

Certaines bibliothèques JavaScript de lazy loading offrent des fonctionnalités avancées, comme le préchargement des éléments à venir ou l'optimisation du chargement en fonction du type d'appareil.

Par exemple, avec Lazysizes, vous pouvez utiliser l'attribut 'data-sizes="auto"' pour charger les images dans la taille optimale en fonction de l'écran de l'utilisateur.

Améliorez les performances de votre site avec le lazy loading

Que vous optiez pour une solution HTML ou JavaScript, le lazy loading est une technique essentielle pour améliorer les performances de votre site web et offrir une meilleure expérience à vos visiteurs.

En ne chargeant que les éléments nécessaires, vous réduisez considérablement le temps de chargement initial, ce qui se traduit par une meilleure accessibilité, un meilleur référencement et une plus grande satisfaction des utilisateurs.