Le Lazy Loading est une technique qui permet de ne charger que certaines ressources multimédia qu’au fur et à mesure du défilement d’une page. Excellente méthode pour la performance web (et pour l’écologie), la vitesse des pages est généralement boostée par ce système qui ne vise qu’à charger ce qui est nécessaire pour la navigation des utilisateurs. Les navigateurs Google Chrome et Mozilla Firefox devraient implémenter un nouvel attribut HTML “loading” qui fera du lazy loading en natif, et donc sans code Javascript à taper (en théorie…).
L’idée de permettre le lazy loading de certains types de média nativement, sans code, est une excellente solution qui devrait ravir d’un côté les webmasters, et d’un autre côté les utilisateurs. Plusieurs firmes se sont déjà penchées sur l’idée d’un attribut appelé “lazyload”, comme Whatpr et même Microsoft (l’attribut fonctionnerait même dans Microsoft Edga à priori…) mais rien n’est officiel à ce jour (un brouillon du W3C évoquant l’attribut HTML lazyload a même été supprimé). Ici, Google Chrome et Mozilla Firefox penchent plutôt sur un attribut “load”, et non “lazyload”. Il faudra donc à terme que tout le monde se mettre d’accord sur un standard car on sent bien l’envie, mais sans la communication entre les divers acteurs… 🙂
Google Chrome s’est penché sur le sujet assez tôt, à l’image de Microsoft (dont personne ne parle mais qui était sûrement un des premiers à l’évoquer en fait…), et Firefox semble avoir rejoint les rangs. Les ingénieurs d’Apple chez Safari se sont aussi montrés intéresser par un tel attribut HTML natif depuis quelques mois. Au final, si tous les acteurs arrivent à se mettre d’accord et que le W3C se décide à créer un standard, ce sera l’idéal pour tout le monde. Voyons désormais comment cela fonctionnerait pour Chrome et Firefox (ce qui n’a rien d’une version définitive et contentant tout le monde…).
Addy Osmani de Chrome a rédigé un billet complet à ce sujet, je vous invite à le lire si vous voulez tout savoir en détail. Le fonctionnement de base est extrêmement simple, il est possible d’ajouter un attribut “loading” avec la valeur “lazy” sur des éléments multimédia afin de les charger lors du défilement (scroll). La capture suivante résume le fonctionnement de base de l’attribut HTML.
Attention toutefois aux limites de cet attribut. En effet, seuls les éléments <img> et <iframe> pourront profiter de l’attribut loading. Les autres éléments multimédia, notamment <video> ou <audio> n’en bénéficieront pas. Chrome et Firefox ont tout de même pensé à la balise <picture> et cela fonctionnera dans ce contexte, à l’image du code suivant :<picture>
<source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" loading="lazy">
</picture>
Autre limite, et non des moindres, il ne s’agit pas (encore ?) d’un standard. De ce fait, seuls deux navigateurs devraient prendre en compte l’attribut HTML, et pas sur d’anciennes versions. Il faudra donc quand même mettre en place du code Javascript, à la fois pour détecter la fonctionnalité, et pour proposer une alternative en cas d’incompatibilité. Donc pour résumer, vous ferez du lazy loading à l’ancienne et en plus le nouveau lazy loading. Mouais… Vivement un Polyfill dans ce cas…
Voici le petit code de détection que vous pouvez mettre en oeuvre :<script>
if ('loading' in HTMLImageElement.prototype) {
// Si le navigateur supporte le lazy-loading natif
} else {
// Lazy loading de remplacement, soit via un polyfill, soit par un code "fait maison"
}
</script>
Dernière limite, personne n’utilise le même attribut. D’autres navigateurs comme Microsoft Edge ont en effet déjà implanté un attribut “lazyload”. Il faudra donc que tous les navigateurs arrivent à trouver un consensus, et rien que ça, c’est peut-être parti pour une lutte de plusieurs mois ou années. Et comme nous devons penser à la rétrocompatibilité, ça n’arrange rien.
Sur ce blog, vous pouvez voir que le lazy loading est en place. Il s’agit d’un plugin WordPress que j’ai développé mais que je n’ai pas mis librement dans le repository de WordPress. Il permet de charger dynamiquement tous les éléments multimédia (pas seulement les images et iframes) au fur et à mesure du défilement de la page. Il permet également de provoquer le lazy loading quelques pixels avant que l’on atteigne l’image. Pour le moment, l’attribut load (ou lazyload pour d’autres) ne fonctionne qu’au moment de l’intersection avec une image, et pas avant…
L’idée est donc excellente mais j’attends de voir une réelle osmose entre les divers navigateurs et un standard pour éviter de multiples problèmes d’intégration de polyfills (car c’est du chargement supplémentaire au fond). Quoi qu’il en soit, on ressent la volonté de booster les performances des pages web et c’est ce qu’il faut retenir. L’avenir de l’HTML promet donc d’excellentes ressources de ce point de vue, avec d’autres attributs et balises intéressantes à ce sujet comme les prerender, preloader, etc.
C’est une excellente nouvelle ! Bravo pour ton plugin de lazyloading. Dommage que ce ne soit pas encore disponible !
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 32,00 € (345 pages)
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 32,00 € (570 pages)
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 29,90 € (522 pages)
Auteur : Mathieu Chartier
Editeur : First Interactive
Prix : 19,90 € (411 pages)
Auteur : Mathieu Chartier
Editeur : First Interactive
Prix : 29,90 € (622 pages)
Télécharger “SwipeMenu.zip”SwipeMenu.zip – Téléchargé 18073 fois – 52 Ko
Télécharger “Spider Simulator PHP”spider-simulator.zip – Téléchargé 17481 fois – 2 Ko
Télécharger “ReadingIndicator 1.0”readingIndicator-1.0.zip – Téléchargé 15920 fois – 7 Ko
Télécharger “Parseur Facebook”parser-facebook.zip – Téléchargé 17322 fois – 3 Ko
Télécharger “Pack complet – moteur de recherche PHP 5.5 – PHP 7”moteurPHP5.5.zip – Téléchargé 34890 fois – 171 Ko
Ce blog est le résultat de plusieurs années de travail mais il ne fait pas manger son homme. Découvrez l’agence web et l’organisme de formation géré par Mathieu Chartier et n’hésitez pas à prendre contact pour suivre des formations personnalisées.
Tous droits réservés © Blog Internet-Formation 2009 – 2022
B