La Performance Web est constamment à la recherche d'optimisations pour le confort de navigation. Diminuer le temps d'attente de l'internaute est un facteur clé incontournable du succès des sites web modernes. Et ce n'est pas Google qui vous dira le contraire : Evaluating page experience for a better web.
La ligne de flottaison
De nombreuses techniques sont employées pour favoriser la performance perçue. L'une d'entres elles consiste à afficher en priorité tous les éléments situés au dessus de la Ligne de Flottaison.
La Ligne de Flottaison représente la partie visible d'une page web, directement atteignable sans nécessiter de scroller verticalement.
L'un des conseils emblématiques des outils de diagnostic des performances web est d'Éliminer les contenus (JavaScript, CSS, Polices) qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison.
Un certain nombre de techniques couvrent déjà les domaines suivants :
- JavaScript : Les attributs async et defer
- CSS : Des outils pour éliminer les styles CSS bloquants
- Polices de caractères : Les attributs rel=preload et font-display
Pour les images, soyez paresseux !
Concernant les images la technique du Lazy Loading, ou "Chargement Paresseux" (oui, ça passe mieux en anglais) permet de ne charger que les images situées au dessus de la ligne de flottaison. Les autres images ne sont alors chargées que lorsque cela devient nécessaire, au fur et à mesure que l'utilisateur scrolle (défile). On améliore ainsi le temps de chargement initial de la page.
Google Page Speed, nous conseille vivement de respecter cette consigne :
loading="lazy" à la rescousse
Pendant longtemps réalisée via JavaScript, la méthode de lazy loading est dorénavant décrite au sein d'une spécification du WhatWG sous la forme d'un attribut HTML loading dont les valeurs sont les suivantes :
eager: l'image est chargée immédiatement, qu'elle soit située dans ou hors de la fenêtre visible (valeur par défaut),lazy: le chargement est retardé jusqu'à ce que l'usager scrolle et s'approche du bas de la fenêtre du navigateur.
<img src="image.jpg" loading="lazy" width="..." height="..." alt="...">
<iframe src="video-player.html" title="..." loading="lazy"></iframe>
Déjà compatible sur de nombreux navigateurs caniuse : Lazy loading via attribute for images & iframes, l'attribut loading est parfaitement envisageable en production. Pour un support plus large, sachez qu'il existe un polyfill (une émulation) de cet attribut HTML.
Pensez dès à présent à l'intégrer pour favoriser la performance perçue de vos visiteurs.
Commentaires
L'attribut fonctionne que sur les balise img et iframe?
@vzytoi : Les spécifications en brouillon n'évoquent pour le moment que ces deux éléments en effet ("Each img and iframe element has associated lazy load resumption steps, initially null.")
Bonjour Raphael, Merci pour l'info !
Du coup, pour le tag <picture>, c'est toujours le <img> imbriqué qui doit avoir loading="lazy" ?
(a priori je dirais oui...)
Je viens de parcourir des articles sur le sujet : apparemment c'est bien cela :
https://web.dev/browser-level-image-lazy-loading/
https://stackoverflow.com/questions/24025464/lazy-loading-html5-picture-tag
Re : je viens de tester un truc : le fait de recharger une page lorsqu'on est situé au milieu.
Subir le recalcul de la page en live c'est atroce...
Attention à l'utilisation de cet attribut donc, à utiliser avec précaution.
Bonjour Raphael,
Firefox empile les images de ma galerie, contrairement à Chrome et Safari dont le rendu est nickel.
Pour le coup, je ne peux pas utiliser loading="lazy" :/
Une idée ?
Merci !
Salut Raphaël,
Pas besoin de script(s) pour utiliser "loading="lazy"" ?
Merci à toi,
P.
Bonjour,
Qu en est il de l'accessibilité des contenus qui utilisent ce chargement à la demande, comment est-ce geré sur les périphériques sans scroll (synthèse vocale, plage braille...) ?
Connaissez vos une bonne ressource pour la mise en oeuvre de cette technique respectueuse des contraintes d'accessibilités ?
Merci à vous