Lazy-loading natif sur Google Chrome et Firefox

publié le 29 avril 2019

Addy Osmani, Engineering Manager de Google travaillant sur Chrome, a récemment annoncé que, dans un futur proche, le lazy-loading sera géré nativement au sein de Chrome (mais aussi de Firefox).

Le lazy-loading : qu’est-ce que c’est ?

Tous les moteurs de recherche ont la même volonté : offrir une excellente expérience utilisateur. En effet, ils savent très bien que leur modèle économique repose sur le fait que les internautes doivent trouver rapidement ce qu’ils cherchent. Si le résultat ne correspond pas à leurs attentes ou se chargent trop lentement, ils iront voir ailleurs. C’est pour cela que Google (pour ne parler que du leader du secteur) donne de nombreuses indications aux éditeurs de sites afin d’améliorer leurs pages et, donc, intrinsèquement, leurs contenus.

Parmi les chantiers importants sur lesquels doivent travailler les webmasters, l’affichage rapide des pages, aussi bien sur desktop que sur mobile, est une priorité absolue. C’est d’ailleurs pour cette raison que la technologie AMP a été mise en place ainsi que, plus récemment, l’Exchange Signed AMP.

Pour autant, depuis quelques années, le lazy-loading fait de plus en plus parler de lui. En effet, grâce à ce procédé, l’éditeur d’un site peut demander de charger certaines images (généralement, celles situées au-dessus de la ligne de la flottaison) et certains scripts en priorité. Cela afin de favoriser un affichage rapide de la page. Ainsi, en arrivant sur un site, seuls les éléments visibles par les internautes vont se charger dans un premier temps. Puis, c’est en scrollant que la suite de la page va se charger, au fur et à mesure.

Le lazy-loading n’est d’ailleurs pas seulement intéressant pour les internautes. Mais aussi pour le web en général, car il réduit la consommation de bande passante et l’utilisation de la mémoire.

Implémentation du lazy-loading en natif : ce que ça va changer

Dans les faits, le lazy-loading ne date pas d’aujourd’hui. Cela fait, en effet, un certain temps qu’il est possible de l’implémenter sur son site (les réseaux sociaux en sont d’ailleurs les plus gros utilisateurs). Ceci étant dit, il n’était pas à la portée de tout le monde. Il était, en effet, nécessaire de devoir rentrer dans le code source de son site pour l’activer. Ce qui, en soi, n’est pas très difficile, mais demande tout de même une certaine connaissance en développement web.

En permettant aux navigateurs de le supporter nativement, l’application du lazy-loading va être bien plus facile à mettre en place. En effet, cela se passera maintenant au sein de la balise IMG. Il suffira d’ajouter l’élément loading = « lazy » pour l’activer.

De plus, Addy Osmani précise que l’attribut loading pourra supporter 3 valeurs : lazy (pour activer le lazy loading), eager (pour désactiver le lazy loading) et auto (pour laisser le navigateur choisir).

Pour plus d’informations sur le lazy-loading et savoir comment l’utiliser à pleine capacité, n’hésitez pas à nous contacter.

Articles associés :