Une migration progressive vers un chargement natif paresseux
À propos de l'auteur
Andrea programme des ordinateurs depuis 30 ans et il est maintenant un accro du développement front-end qui aime créer des sites Web avec l'expérience utilisateur… Pour en savoir plus sur Andrea …
Le chargement paresseux natif arrive sur le Web. Comme il ne dépend pas de JavaScript, il va révolutionner la façon dont nous chargeons le contenu paresseux aujourd'hui, en permettant aux développeurs de charger plus facilement des images et des iframes. Mais ce n’est pas une fonctionnalité que nous pouvons polyfill, et il faudra un certain temps avant qu’elle devienne utilisable dans tous les navigateurs. Dans cet article, vous apprendrez comment cela fonctionne et comment remplacer progressivement votre chargement paresseux basé sur JavaScript par son alternative native, grâce au chargement paresseux hybride.
Au cours des dernières semaines, vous avez peut-être entendu parler de ou lu beaucoup chargement paresseux natif, qui arrivera sur le Chrome 75 dans les mois à venir.
«Oui, bonne nouvelle, mais nous devrons attendre que tous les navigateurs le supportent."
S'il s'agissait de la première chose qui vous a traversé l'esprit, continuez à lire. Je vais essayer de vous convaincre du contraire.
Commençons par une comparaison entre le chargement paresseux natif et le bon vieux script basé sur JavaScript.
Native Par rapport au chargement paresseux basé sur JavaScript
Le chargement paresseux est un moyen améliorer les performances d'un site Web ou d'une application Web en maximisant la rapidité de rendu des images et des iframes (et parfois des vidéos) ci-dessus en repliant le temps de chargement du contenu en dessous du pli.
JavaScript-Driven Lazy Loading
Pour charger paresseusement des images ou des iframes, il est très courant de les marquer en remplaçant l'attribut src approprié par un attribut de données similaire, data-src puis s'appuyer sur une solution JavaScript pour détecter le moment où les images / iframes se rapprochent de la partie visible du site Web (généralement parce que l'utilisateur a fait défiler l'écran) et copier les attributs de données dans les attributs appropriés, puis déclencher le chargement différé de leur contenu
Chargement paresseux natif
Selon la spécification de chargement paresseux natif (en cours de développement), si vous souhaitez charger paresseux des images ou des iframes à l'aide de la fonction de chargement paresseux natif, il vous suffit de ajoutez l'attribut loading = lazy sur la balise associée.
Addy Osmani a beaucoup écrit sur ce sujet dans son article “ Native Image Lazy-Loading For The Web! ”Dans laquelle il a déclaré que l'équipe de Google Chrome développait déjà cette fonctionnalité et avait l'intention de l'exporter sous Chrome 75.
D'autres navigateurs basés sur Chrome, comme Opera et Microsoft Edge, bénéficieront également de ce développement en obtenant la même fonctionnalité dans leur première mise à jour basée sur Chromium 75.
Premiers pas avec le chargement paresseux natif
Si les images de votre site Web sont téléchargées toutes en même temps lors de l'atterrissage d'une page sans chargement paresseux, vous pouvez activer le chargement paresseux natif sur votre site Web. une mer sily comme l'ajout d'un attribut HTML. L'attribut loading indique aux navigateurs quelles images il est important de charger immédiatement, et lesquelles peuvent être téléchargées paresseusement lorsque les utilisateurs font défiler l'écran. Le même attribut peut être appliqué aux iframes.
Pour indiquer aux navigateurs qu'une image particulière est importante et qu'ils puissent la charger dès que possible, vous devez ajouter l'attribut loading = "eager" sur l'étiquette img . La meilleure pratique consiste à effectuer cette opération pour les images principales, en général pour celles qui seront affichées au-dessus du pli.
Pour indiquer aux navigateurs qu'une image doit être téléchargée paresseusement, il suffit d'ajouter le loading = "paresseux" attribut. C’est une bonne pratique que si vous ne le faites que sur des images secondaires – généralement, celles-ci seront affichées sous le pli.
Ajoutez simplement l’attribut loading à vos images et iframes, vous autoriserez votre site Web à utiliser le chargement paresseux natif comme une amélioration progressive. Votre site Web en bénéficiera progressivement au fur et à mesure que les utilisateurs de notre navigateur recevront une assistance technique de la plupart des navigateurs modernes.
C’est la meilleure approche à utiliser si votre site Web n’utilise aucun type de chargement paresseux aujourd’hui, mais si vous avez déjà implémenté JavaScript. solution de chargement paresseux, vous voudrez peut-être la conserver tout en basculant progressivement vers le chargement paresseux natif
La solution idéale serait de commencer à utiliser le chargement paresseux natif immédiatement et d'utiliser un remplissage multiple pour le rendre compatible avec tous les navigateurs. Malheureusement, le chargement paresseux natif n’est pas une fonction que nous pouvons polyfiller avec JavaScript.
Aucune utilisation pour un polyfill
Lorsqu’une nouvelle technologie de navigateur est proposée à un navigateur unique, la communauté open-source publie généralement un polyfill JavaScript à fournir. la même technologie au reste des navigateurs. Par exemple, IntersectionObserver polyfill utilise des éléments JavaScript et DOM pour coordonner Element.getBoundingClientRect () pour reproduire le comportement de l'API native.
Mais le cas du chargement natif paresseux est différent parce qu'un JavaScript polyfill pour loading = "lazy" devrait empêcher les navigateurs de charger du contenu dès qu'ils trouvent une URL dans le balisage d'une image ou d'une iframe. JavaScript n’a aucun contrôle sur cette étape initiale du rendu de la page, il n’est donc pas possible de polyfiler le chargement paresseux natif.
Chargement hybride paresseux
Si vous n'êtes pas satisfait d’avoir un chargement paresseux natif uniquement comme amélioration progressive, ou ont déjà implémenté le chargement différé basé sur JavaScript et ne veulent pas perdre cette fonctionnalité dans les navigateurs moins modernes (tout en voulant activer le chargement différé natif sur les navigateurs qui le prennent en charge), vous avez besoin d'une solution différente. Introduction: chargement paresseux hybride.
Chargement paresseux hybride, vous devez marquer votre contenu paresseux en utilisant les attributs de données au lieu des attributs réels (comme dans le chargement paresseux piloté par JavaScript), puis d'ajouter les éléments loading = "lazy" attribut.
Ensuite, vous avez besoin de JavaScript. En premier lieu, vous devez détecter si le chargement paresseux natif est pris en charge par le navigateur . Effectuez ensuite l'une des opérations suivantes pour chaque élément avec l'attribut loading = "lazy" :
Si le chargement paresseux natif est pris en charge, copiez la valeur de l'attribut data-src dans le nom src attribut;
Si ce n'est pas supporté, initialisez un script de chargement paresseux JavaScript ou un plugin pour le faire lorsque les éléments entrent dans la fenêtre d'affichage.
Il n'est pas très difficile d'écrire le code JavaScript requis pour les exécuter. opérations par vous-même. Vous pouvez détecter si le chargement différé natif est pris en charge avec la condition:
if ('loading' dans HTMLImageElement.prototype)
Si c'est le cas, copiez simplement la valeur d'attribut src de data-src . Si ce n'est pas le cas, initialisez un script de chargement paresseux de votre choix.
Voici un extrait de code qui le fait.
cette démonstration en direct .
Il s'agit néanmoins d'un script très basique, et les choses peuvent devenir compliquées lorsque vous utilisez des attributs ou des balises supplémentaires pour obtenir images sensibles (comme les attributs srcset et tailles ou même les images et source )
A Little Third- Party Help
Ces quatre dernières années, j'ai mis à jour un script de chargement paresseux en code source libre intitulé « vanilla-lazyload ». Quelques jours après que Addy Osmani eut écrit sur le chargement paresseux natif , la communauté a réagi en me demandant si mon script pouvait agir comme un remplissage multiple.
Comme je l’ai déjà expliqué, vous ne pouvez pas créer de remplissage multiple pour la fonctionnalité de chargement paresseux natif. Cependant, j’ai pensé à une solution qui faciliterait la tâche des développeurs. pour commencer la transition vers le chargement paresseux natif, sans avoir besoin d'écrire le code JavaScript que j'ai
À partir de la version 12 de vanilla-lazyload vous pouvez simplement définir l'option use_native sur true pour activer le chargement hybride paresseux. Le script ne contient que 2,0 kB compressés et est déjà disponible sur GitHub npm et jsDelivr .
Demos
Vous pouvez commencer à jouer avec chargement paresseux natif aujourd'hui en téléchargeant Chrome Canary ou Microsoft Edge Insider (canal de développement ) puis en activant les options "Activer le chargement d'images paresseuses" et "Activer le chargement d'images paresseuses" ”. Pour activer ces drapeaux, entrez à propos de: drapeaux dans le champ d'adresse URL de votre navigateur et recherchez "paresseux" dans la zone de recherche.
Démonstration du chargement paresseux natif
Pour analyser le fonctionnement du chargement paresseux natif dans le outils de développement, vous pouvez commencer à jouer avec la démo suivante. Dans celui-ci, pas une seule ligne de JavaScript n'est utilisée . Oui, il s’agit simplement d’un chargement paresseux natif.
À quoi s’attendre : Toutes les images sont récupérées simultanément, mais avec des réponses HTTP différentes. Ceux avec le code de réponse 200 sont les images chargées avec empressement, alors que ceux avec le code de réponse 206 ne sont que partiellement extraits pour obtenir les informations initiales sur les images. Lorsque vous faites défiler l'écran vers le bas, ces images seront complètement récupérées avec un code de réponse 200 .
Démonstration de chargement hybride paresseux
Pour analyser le fonctionnement du chargement différé hybride, vous pouvez commencer à jouer avec la démo suivante. Ici, vanilla-lazyload@12.0.0 est utilisé et l'option use_native est définie sur true :
À quoi s'attendre : Essayez la démo sur différents navigateurs pour voir comment elle se comporte. Sur les navigateurs prenant en charge le chargement paresseux natif, le comportement serait le même que dans la démo de chargement paresseux natif. Sur les navigateurs ne prenant pas en charge le chargement paresseux natif, les images seront téléchargées au fur et à mesure que vous faites défiler la page.
Veuillez noter que vanilla-lazyload utilise l'API IntersectionObserver sous le capot, vous devez donc le polyfiller. sur Internet Explorer et les versions moins récentes de Safari. Ce n'est pas grave si un polyfill n'est pas fourni, cependant, car dans ce cas, vanilla-lazyload téléchargerait simplement toutes les images à la fois.
Essayez de charger paresseux hybride dans votre site Web
le chargement sera bientôt disponible sur certains navigateurs. Pourquoi ne lui donnez-vous pas une chance aujourd'hui en utilisant le chargement paresseux hybride? Voici ce que vous devez faire:
Balisage HTML
Le balisage d'image le plus simple est constitué de deux attributs: src et alt .
Pour ce qui est ci-dessus. images de pliage, vous devez quitter l’attribut src et ajouter l’attribut loading = "eager" .
Pour les images en dessous du pli, vous devez remplacer l'attribut src avec l'attribut data data-src et ajoutez l'attribut loading = "paresseux" .
Si vous le souhaitez pour utiliser des images sensibles, faites de même avec les attributs srcset et tailles .
Si vous préférez utiliser la balise picture changez le srcset et src également dans les balises source .
L'étiquette peut être également utilisée pour charger sélectivement le format WebP de vos images.
Note : Si vous voulez en savoir plus sur les utilisations de vanilla-lazyload veuillez lire la section HTML « Mise en route » de son fichier lisez-moi.
JavaScript Code
Tout d'abord, vous devez inclure vanilla-lazyload sur votre site Web
Vous pouvez le charger à partir d'un CDN tel que jsDelivr:
Ou vous pouvez l'installer avec npm:
npm install vanilla-lazyload @ 12
Il est également possible d’utiliser un script asynchrone à initialisation automatique; chargez-le en tant que module ES à l'aide de type = "module" ou chargez-le en tant que AMD à l'aide de RequireJS. Trouvez d'autres moyens d'inclure et d'utiliser vanilla-lazyload dans la section de script « Pour commencer » du fichier lisez-moi
Ensuite, dans le code JavaScript de votre site Web / application Web, incluez
var pageLazyLoad = new LazyLoad ({
elements_selector: "[loading=lazy]",
use_native: true // ← active le chargement hybride paresseux
});
Note : Le script contient de nombreux autres paramètres que vous pouvez utiliser pour personnaliser le comportement de vanilla-lazyload par exemple. pour augmenter la distance de la zone de défilement à partir de laquelle commencer le chargement des éléments ou pour ne charger des éléments que s'ils restent dans la fenêtre d'affichage pendant un temps donné. Vous trouverez plus de paramètres dans la section API du fichier lisez-moi .
Tous ensemble, en utilisant un script asynchrone
.
script pour optimiser les performances, veuillez vous reporter aux codes HTML et JavaScript suivants:
C’est tout! Avec ces étapes très simples et faciles, vous aurez activé le chargement paresseux hybride sur votre site Web!
Bonnes pratiques importantes
Appliquez le chargement paresseux uniquement aux images que vous savez qui seront probablement affichées sous le pli. Chargez avec impatience ceux qui se trouvent au-dessus du pli pour optimiser les performances. Si vous appliquez simplement une charge différée à toutes les images de votre page, vous ralentirez les performances de rendu.
Utilisez CSS pour réserver de l’espace aux images avant leur chargement. De cette façon, ils repousseront le reste du contenu ci-dessous. Si vous ne le faites pas, un plus grand nombre d'images seront placées au-dessus du pli avant qu'elles ne le devraient, ce qui déclenchera des téléchargements immédiats pour elles. Si vous avez besoin d'un truc CSS pour le faire, vous pouvez en trouver un dans la section du fichier Lisezmoi de vanilla-lazyload .
Pour et contre
LAZY LOADING
PROS
Pas de JavaScript requis,
Pas de configuration, ça fonctionne,
Pas besoin de réserver de la place pour les images avec des astuces CSS;
CONS
Cela ne fonctionne pas aujourd'hui.
La charge utile initiale est plus élevée en raison de la lecture anticipée des 2 kb initiaux pour chaque image.
JAVASCRIPT-DRIVEN LAZY LOADING
PROS
Il fonctionne de manière constante dans tous les navigateurs. ;
Vous pouvez réaliser des astuces d’interface utilisateur très personnalisées, telles que l’effet Flou ou le chargement retardé.
CONS
Le chargement de votre contenu par JavaScript est essentiel.
HYBRID LAZY LOADING
PROS
Il vous permet d'activer et de tester le chargement paresseux natif là où il est pris en charge.
Il permet le chargement paresseux sur tous les navigateurs. [1 9659037] Vous pouvez supprimer de manière transparente la dépendance de script dès que le support du chargement paresseux natif sera généralisé.
CONS
Le chargement de votre contenu par JavaScript est toujours obligatoire.
Enveloppant
Je suis très enthousiaste. ce chargement paresseux natif arrive aux navigateurs, et je suis impatient de l'implémenter par tous les fournisseurs de navigateurs !
Entre-temps, vous pouvez choisir d'enrichir votre balisage HTML pour une amélioration progressive et obtenir chargement paresseux natif uniquement là où il est pris en charge, ou vous pouvez opter pour le chargement paresseux hybride et obtenir un chargement paresseux natif et JavaScript jusqu'à ce que le chargement paresseux natif soit pris en charge par la grande majorité des navigateurs.
![Image paresseuse 3 [19659046] (function () {
if ("loading" dans HTMLImageElement.prototype) {
var lazyEls = document.querySelectorAll ("[loading=lazy]");
lazyEls.forEach (fonction (lazyEl) {
lazyEl.setAttribute (
"src",
lazyEl.getAttribute ("data-src")
)
});
} autre {
// Inclut dynamiquement une bibliothèque de chargement paresseux de votre choix
// Ici, y compris vanilla-lazyload
var script = document.createElement ("script");
script.async = true;
script.src =
"https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js";
window.lazyLoadOptions = {
elements_selector: "[loading=lazy]"
// éventuellement plus d'options ici
};
document.body.appendChild (script);
}
}) ();
</script>
</code></pre>
</div>
<p> Vous pouvez trouver et tester le code ci-dessus dans <a href=](lazy3.jpg)
cette démonstration en direct .
![] Éditorial éclatant](https://i0.wp.com/blog.arcoptimizer.com/wp-content/uploads/2018/04/1523030185_12_frappez-le-terrain-en-courant-avec-vue-js-et-firestore-smashing-magazine.png?w=660)
(dm, il)