Utiliser la technique du lazy-loading : pourquoi ? comment ?

Le lazy-loading, ou chargement paresseux en français, est une réponse simple à la question simple “pourquoi charger plus de données que nous ne pouvons en afficher ?”.

Dans le cadre de notre série d’articles sur les conceptions optimisées, après les flux-tirés nous abordons le thème du lazy-loading. Cet article abordera le principe général et son utilité dans le web.  D’autres articles suivront pour illustrer ce principe dans la conception d’applications sur PC, sur mobile et encore plus sur plateformes embarquées.

Le viewport

Pour bien comprendre l’enjeu, il faut commencer par une petite définition : le viewport (ou vue en français). Ce terme désigne la partie visible d’une page web ou d’une interface graphique en général.


Comme vous pouvez le voir sur la figure ci-dessus, le rectangle bleu désigne la partie visible d’un site Internet affiché sur un téléphone mobile. La partie située dessous ne sera visible que lorsque l’utilisateur se sera déplacé dans la page.

Différer le chargement

Or cette page contient plusieurs images situées dans la partie invisible au moment du chargement. Devons-nous le charger au démarrage ? la réponse est non et ce pour plusieurs raisons :

  • l’utilisateur souhaite avant tout que la page s’affiche rapidement.
  • il n’ira peut-être même pas à cet endroit de la page.
  • s’il y va il sera toujours temps de charger les images.
  • cela représente des économies d’énergie : chaque octet non transporté sur Internet est une économie d’énergie sur le serveur, les routeurs (ils sont nombreux) et l’appareil de l’utilisateur.

Ces principes peuvent éventuellement être nuancés dans la mesure où la réactivité de l’affichage est plus importante que le temps de chargement initial. En d’autres termes les spécifications du site Internet n’autorisent pas que les images mettent du temps à s’afficher mais autorisent un temps de chargement initial plus important. Il s’agit donc d’une spécification.

Dans l’écrasante majorité des cas, les visiteurs de sites Internet souhaitent accéder à la page rapidement.

Lazy-loading

C’est alors qu’intervient la technique du lazy-loading. Globalement il s’agit de déterminer si une image est contenue partiellement ou entièrement dans le viewport. Si c’est le cas on la charge, sinon on l’ignore.

Lorsque le viewport est modifié, c’est-à-dire lorsque l’utilisateur déplace le contenu de la page sous son doigt ou fait glisser l’ascenseur de la fenêtre, le calcul est refait pour toutes les images. Celles qui n’étaient pas visibles et qui le deviennent peuvent alors être chargées depuis le réseau.

Cet algorithme peut se compliquer d’un calcul sur la visibilité des éléments cachés. Certains éléments d’une page web sont invisibles, sauf lorsque l’on clique sur un bouton ou qu’un code javascript les rend visibles. Ces éléments ne doivent pas être chargés non plus initialement. Lorsqu’ils deviennent visibles, et uniquement à ce moment, il est possible de charger les données.

Tous les CMS modernes (Content Management System) proposent une ou plusieurs extensions qui font ce travail.

Partagez cet article !

Abonnez-vous à notre newsletter !

Si vous souhaitez être notifié lorsqu'un nouvel article est publié, abonnez-vous à notre newsletter et vous recevrez un email dès qu'un article sera publié.

Articles similaires

Qt : l’influence du... Lorsqu’on développe une application mutli-plateformes il est important de se poser la question des performances sur les plateformes ciblées. A machine égale, selon le compilateur utilisé les
Qt : Traiter une liste de... Pour qu’une interface graphique reste fluide aux yeux de l’utilisateur, le thread qui la gère ne doit jamais être interrompu plus d’une poignée de millisecondes. Or le
Qt : pourquoi et quand ut... La gestion des threads dans Qt est simple mais elle mérite quelques explications car elle engendre souvent des problèmes conceptuels chez les développeurs peu expérimentés en Qt.
Adopter les flux tirés d... Nous abordons un des points essentiels de l’architecture réseau et applicative efficace et économe : les flux tirés. Partagez cet article ! Abonnez-vous à notre newsletter !
Qt : distribuer ses appli... La distribution d’une application est une étape importante de la vie d’une application, elle nécessite d’être pensée très tôt dans la conception. Cette série d’articles présente les
Qt : comment implanter un... Il existe plusieurs façons d’implanter des threads dans son application Qt.  Voici la méthode que je préconise. Partagez cet article ! Abonnez-vous à notre newsletter ! Si
Utiliser la technique du ... Le lazy-loading, ou chargement paresseux en français, est une réponse simple à la question simple “pourquoi charger plus de données que nous ne pouvons en afficher ?”.
Livre Maîtrisez Qt 5 ... La seconde édition du livre de Tristan Israël, Maîtrisez Qt 5 – Développement d’applications professionnelles, est parue. Vous pouvez le découvrir sur le site des éditions ENI.

Laisser une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *