L'auteur du document, dont nous publions la traduction aujourd'hui, Eddie Osmani de Google, dit que dans
Chrome 75, la prise en charge du nouvel attribut des éléments de
chargement <img> et
<iframe> pourrait bien apparaître. Cela signifie que ces éléments prendront en charge les fonctionnalités standard pour le soi-disant «chargement paresseux» des données.
Si vous avez hâte de savoir à quoi ressemble l'utilisation du nouvel attribut dans le code, jetez un œil à cet exemple:
<img align="center" src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe>
Nous allons maintenant parler du fonctionnement de l'attribut de
loading .
Informations préliminaires
Les pages Web contiennent souvent de nombreuses images, ce qui affecte la taille des pages, conduit à son
augmentation excessive et affecte la vitesse de chargement des pages. De nombreuses images affichées sur les pages se trouvent en dehors de leur zone visible. Pour voir ces images, l'utilisateur doit faire défiler la page.
Historiquement, afin de limiter l'impact sur le temps de chargement des pages d'images situées en dehors de la zone visible des pages, les programmeurs devaient utiliser des bibliothèques JavaScript (comme
LazySizes ). Ces bibliothèques vous permettent de retarder le chargement de ces images jusqu'au moment où l'utilisateur, en faisant défiler la page, ne s'en rapproche pas suffisamment.
Page chargeant 211 images. Une version de page qui n'est pas utilisée pour créer un chargement d'image paresseuse charge immédiatement 10 Mo de données graphiques. La même page utilisant le chargement différé (à l'aide de LazySizes) ne précharge que 250 Ko d'informations graphiques. Tout le reste est chargé lorsque l'utilisateur se déplace sur la page. Les détails de cette expérience sont disponibles sur webpagetest.org .Et si le navigateur pouvait aider le programmeur à éviter de charger des images situées en dehors de la zone visible des pages? Cela aurait un effet bénéfique sur la vitesse de chargement des données dans la zone visible de la page, réduirait, sur les appareils de faible puissance, la quantité totale de données transmises sur le réseau, réduirait la consommation de mémoire. Tout cela sera bientôt possible grâce au nouvel attribut des éléments de
loading <img> et
<iframe> .
Attribut de chargement
L'attribut de
loading permet au navigateur de retarder le chargement du contenu des éléments
<img> et
<iframe> qui se trouvent en dehors de la zone visible de la page jusqu'à ce que l'utilisateur fasse défiler la page suffisamment près de ces éléments. Cet attribut prend en charge trois valeurs:
lazy : indique les matériaux qui sont de bons candidats pour le chargement paresseux.eager : les matériaux des éléments avec cette valeur d'attribut doivent être chargés immédiatement.auto : le navigateur décidera d'appliquer ou non le chargement différé aux matériaux avec cette valeur d'attribut.
Si vous ne spécifiez pas la valeur de l'attribut de
loading , cela équivaudra à le définir sur
auto .
Actuellement, l'attribut de chargement pour les éléments <img> et <iframe> est sous la norme HTMLDes exemples
L'attribut de
loading fonctionne avec les éléments
<img> (y compris l'attribut
srcset et à l'intérieur de l'élément
<picture> ), ainsi qu'avec les éléments
<iframe> .
<img align="center" src="unicorn.jpg" loading="lazy" alt=".."/> <img align="center" src="unicorn.jpg" loading="eager" alt=".."/> <img align="center" src="unicorn.jpg" loading="auto" alt=".."/> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img align="center" src="fallback.jpg" loading="lazy"> </picture> <img align="center" src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A rad wolf" loading="lazy"> <iframe src="video-player.html" loading="lazy"></iframe>
Il est à noter que nous utilisons ici des formulations comme celle-ci: «lorsque l'utilisateur fait défiler la page pour que sa zone visible soit proche de l'élément». Le navigateur détermine le moment exact où l'image commence à se charger. En général, nous pouvons espérer que le navigateur commencera à télécharger des documents dont le téléchargement a été retardé, un certain temps avant que la zone de la page qui les contient soit visible pour l'utilisateur. Cela augmentera les chances que le téléchargement et la sortie des documents pertinents soient terminés au moment où l'utilisateur les voit.
Veuillez noter que j'ai
suggéré que l'attribut en question soit appelé
loading , car cette approche pour le nommer correspond à celle utilisée lors du choix d'un nom pour l'attribut de
décodage . Les phrases précédentes, comme
lazyload , ne fonctionnaient pas, car il était nécessaire que cet attribut
lazyload en charge plusieurs valeurs (
lazy ,
eager et
auto ).
Vérifier la prise en charge du navigateur pour le chargement de l'attribut
Nous avons pris en compte l'importance de la possibilité d'utiliser des bibliothèques JavaScript pour organiser le chargement paresseux des matériaux (pour la prise en charge de cette fonctionnalité par plusieurs navigateurs). Vous pouvez vérifier si le navigateur prend en
loading attribut de
loading en:
<script> if ('loading' in HTMLImageElement.prototype) {
Notez que l'attribut de
loading peut être utilisé pour étendre progressivement les capacités de la page. Les navigateurs qui prennent en charge cet attribut pourront organiser le téléchargement paresseux des documents à l'aide de
loading=lazy , et les navigateurs qui ne prennent pas en charge cette fonctionnalité téléchargeront simplement ces documents comme auparavant.
Chargement d'images paresseuses entre navigateurs
Si la prise en charge multi-navigateur pour le chargement d'images paresseuses est importante, il ne suffit pas simplement de déterminer si le navigateur prend en charge cette fonctionnalité et, si ce n'est pas le cas, utilisez la bibliothèque appropriée si vous utilisez un design comme
<img align="center" src=unicorn.jpg loading=lazy /> pour décrire l'image dans le balisage
<img align="center" src=unicorn.jpg loading=lazy /> .
Dans le balisage, vous devez utiliser quelque chose comme
<img data-src=unicorn.jpg /> (plutôt que
src ,
srcset ou
<source> ) afin d'éviter le chargement normal de l'image par des navigateurs qui ne prennent pas en charge le nouvel attribut. Afin de changer ces attributs en ceux qui doivent être utilisés avec le support de l'attribut de
loading du navigateur, ou de télécharger la bibliothèque correspondante si cet attribut n'est pas pris en charge, vous pouvez utiliser JavaScript.
Voici un exemple de ce à quoi cela pourrait ressembler:
<img align="center" src="hero.jpg" alt=".."/> <img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/> <script> (async () => { if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll("img.lazyload"); images.forEach(img => { img.src = img.dataset.src; }); } else { </script>
Considérez certaines des fonctionnalités de ce code:
- Les images visibles par l'utilisateur immédiatement après le chargement de la page sont décrites à l'aide de balises
<img> normales. L'utilisation de l'attribut data-src sans src empêchera les images de s'afficher immédiatement après le chargement de la page.Par conséquent, en configurant les images qui devraient être visibles immédiatement après le chargement de la page, nous devons spécifier l'attribut src . - Lorsque nous décrivons des images qui ne sont pas immédiatement visibles par l'utilisateur après le chargement de la page, nous utilisons l'attribut
data-src . Ceci est fait afin de les empêcher de se charger normalement dans les navigateurs qui ne prennent pas en charge l'attribut de loading . Si le navigateur prend en charge cet attribut, nous changeons data-src en src . - Si l'attribut de
loading n'est pas pris en charge, nous chargeons la bibliothèque auxiliaire (lazySizes) et l'initialisons. Ici, nous utilisons class=lazyload pour pointer la bibliothèque LazySizes vers les images avec lesquelles nous voulons travailler en utilisant la technique de chargement paresseux.
Démo
Vous pouvez voir ici un exemple de page sur laquelle un chargement paresseux de 100 images de chats est effectué. Mais, si vous êtes intéressé, les téléchargements vidéo de cette page.
Fonctionnalités de mise en œuvre pour le chargement de la prise en charge des attributs dans Chrome
Nous recommandons fortement qu'avant d'utiliser l'attribut de
loading en production, attendez que son support apparaisse dans la version stable de Chrome. Si vous êtes impatient d'essayer cette opportunité, alors vous serez peut-être intéressé par ce dont nous allons parler.
Test d'attribut de chargement
Pour expérimenter le nouvel attribut en ce moment, accédez à la page des paramètres des indicateurs Chrome (
chrome://flags ), activez les options
Enable lazy frame loading et
Enable lazy image loading indicateurs de
Enable lazy image loading , puis redémarrez le navigateur.
Paramètres du navigateur
La mise en œuvre de la méthode de chargement paresseux des matériaux dans Chrome est basée non seulement sur la proximité de la zone visible de la page avec ces matériaux, mais également sur la vitesse de connexion. Les seuils de déclenchement du chargement paresseux de matériaux pour différentes vitesses de connexion sont codés en dur dans le code, mais ces valeurs peuvent être remplacées à l'aide de la ligne de commande. Voici un exemple de paramètres prioritaires pour les images:
canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=5000,lazyImageLoadingDistanceThresholdPxOffline=8000,lazyImageLoadingDistanceThresholdPxSlow2G=8000,lazyImageLoadingDistanceThresholdPx2G=6000,lazyImageLoadingDistanceThresholdPx3G=4000,lazyImageLoadingDistanceThresholdPx4G=3000 'https://mathiasbynens.be/demo/img-loading-lazy'
La commande ci-dessus correspond aux paramètres par défaut actuels. Afin de commencer à charger des images si la position de défilement de la page est à 400 pixels de l'image, toutes les valeurs de cette commande doivent être modifiées à 400. Ce qui suit est un exemple d'une variation de 1 pixel de cette commande (ce paramètre est utilisé dans la vidéo ci-dessus). )
canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=1,lazyImageLoadingDistanceThresholdPxOffline=1,lazyImageLoadingDistanceThresholdPxSlow2G=1,lazyImageLoadingDistanceThresholdPx2G=1,lazyImageLoadingDistanceThresholdPx3G=1,lazyImageLoadingDistanceThresholdPx4G=1 'https://mathiasbynens.be/demo/img-loading-lazy'
Il est très probable que la configuration standard du chargement paresseux dans Chrome change à mesure que la mise en œuvre de cette fonctionnalité se stabilise dans les semaines à venir.
Outils pour les développeurs
Les fonctionnalités de la mise en œuvre de la prise en
loading attribut de
loading dans Chrome sont que le navigateur, lors du chargement de la page, demande les 2 premiers Ko d'images au serveur s'il prend en charge la technologie de demande de plage. Les 2 premières images KB contiennent probablement des informations sur leurs tailles. Cela permet au navigateur de générer des espaces réservés dont les tailles correspondent aux tailles des images. De plus, dans ces 2K, si nous parlons de petites images comme des icônes, il est très probable que l'image entière soit incluse.
Chargement de fragments de fichiers graphiquesChrome télécharge les données d'image restantes au moment où l'utilisateur est sur le point de les voir. Lorsque vous travaillez avec des outils de développement, cela peut conduire au fait que des informations sur deux téléchargements d'images peuvent «apparaître» dans le panneau Réseau, et des informations sur deux requêtes effectuées pour télécharger chaque image seront affichées dans le panneau Temporisation des ressources.
Serveur de support du navigateur définissant l'attribut de chargement
Si nous vivions dans un monde parfait, alors pour savoir si vous devez utiliser la bibliothèque auxiliaire pour la sortie de page correcte dans un navigateur, vous ne pouvez pas vous fier à l'analyse du navigateur à l'aide de JavaScript côté client. Avec cette approche, le serveur, sachant à l'avance si une telle bibliothèque est nécessaire ou non, l'inclurait (ou non) dans la page envoyée au navigateur. Une telle vérification peut être rendue possible en utilisant la technologie
HTTP Client Hint , grâce à laquelle le client est capable de transmettre des "conseils" sur ses capacités au serveur.
Le «conseil» correspondant concernant la prise en
loading attribut de
loading est maintenant à un stade précoce de
considération .
Résumé
L'auteur de ce matériel invite tous ceux qui sont intéressés à utiliser l'attribut de
loading lorsqu'ils travaillent avec les éléments
<img> et
<iframe> à l'essayer et à partager
leurs impressions avec
lui . Il est particulièrement intéressé à savoir à quoi ressemblent, du point de vue des développeurs, les mécanismes de support multi-navigateur proposés ici pour le chargement paresseux des données, et à savoir s'il a raté certains cas limites en parlant de tels mécanismes.
Chers lecteurs! Envisagez-vous d'utiliser l'attribut de
loading dans vos projets?
