Utiliser le Mécanisme de Lazy Loading (Chargement Différé)

L'objectif est d'économiser de la puissance de traitement et de la consommation d'énergie en chargeant les médias uniquement en fonction de la navigation de l'utilisateur.

Pourquoi est-ce Essentiel ?

80%

des utilisateurs sur une page d'accueil affichent la page puis vont ailleurs sans faire défiler (scroller).

Charger des images ou des vidéos qu'ils ne verront jamais est un gaspillage important de bande passante, d'énergie (côté serveur et client) et de puissance de traitement.

Comment l'Appliquer ?

Le Principe

Le "lazy-loading" permet de charger et afficher les images qui sont sous la ligne de flottaison (c'est-à-dire hors de l'écran) uniquement lorsque celles-ci s'apprêtent à entrer dans le champ de vision de l'utilisateur (quand il commence à scroller).

Pour l'UI Designer

En tant qu'UI Designer, vous devez spécifier ce besoin sur vos maquettes. Il est utile d'indiquer la position de la "ligne de flottaison" moyenne pour aider les intégrateurs à savoir quels médias doivent être chargés immédiatement et lesquels peuvent être différés.

Pour l'Intégrateur

En tant qu'Intégrateur, la méthode la plus simple est d'utiliser l'attribut natif HTML loading="lazy".

<!-- Image au-dessus de la ligne de flottaison -->
<img src="hero-banner.jpg" alt="...">

<!-- Images en dessous de la ligne de flottaison -->
<img src="image-1.jpg" alt="..." loading="lazy">
<img src="image-2.jpg" alt="..." loading="lazy">

<!-- Idem pour les iframes -->
<iframe src="map.html" title="..." loading="lazy"></iframe>
← Retour aux Pratiques UI Page Suivante : Formats d'Image →