Après avoir ajouté la fonctionnalité native de chargement paresseux d'images à Chrome l'année dernière, Google permet désormais aux développeurs de charger paresseux des iframes lourds. Lisez la suite pour en savoir plus !
L’augmentation du trafic Web provenant d’utilisateurs mobiles et de personnes du monde entier disposant de capacités de connexion limitées a poussé les entreprises et les développeurs à optimiser considérablement les vitesses de chargement des sites Web. Traditionnellement, lorsque vous naviguez vers une page Web, il télécharge et affiche tout le contenu disponible: images, icônes, GIF, styles, scripts, etc. Comme vous pouvez l'imaginer, le chargement de tout cela entraîne un retard au démarrage du site Web, en particulier pour les utilisateurs disposant de connexions lentes. Google tente d'éliminer ce problème depuis un certain temps. L'année dernière, ils ont ajouté fonctionnalité de chargement différé d'image dans Google Chrome 76. Désormais, Google apporte la même fonctionnalité aux iframes.
Le chargement différé charge le contenu de la page Web à la demande, ce qui signifie qu'il ne sera pas téléchargé et affiché jusqu'à ce que vous fassiez défiler vers le bas et que vous les obteniez dans la vue, réduisant ainsi le démarrage initial du site Web vitesse. Comme mentionné, le chargement paresseux des images est disponible sur Chrome depuis l'année dernière, mais les développeurs peuvent désormais également utiliser la même méthode sur les iframes. Pour l'implémenter sur votre propre site web, il vous suffit d'ajouter chargement="paresseux" attribut à vos images et/ou éléments iframe. Les navigateurs comme Firefox et Safari ont déjà implémenté la fonctionnalité native de chargement différé des images. Quant aux iframes, ils travaillent toujours à corriger quelques bugs. Google a également mentionné que Chrome pour Android en mode Lite charge automatiquement les images et les iframes hors écran.
Ironiquement, lors des tests visant à déterminer comment l'intégration de vidéos YouTube (qui sont basées sur des iframes) influencerait la vitesse de chargement des pages Web en cas de chargement paresseux, l'équipe Chrome a découvert qu'ils "nous avons économisé 10 secondes sur la durée pendant laquelle nos pages pourraient être interactives sur les appareils mobiles." Inutile de préciser que le lazy-loading présente de réels avantages par rapport à la méthode traditionnelle consistant à télécharger l'intégralité du contenu d'une page Web dès que vous la visitez.
Prix : Gratuit.
4.1.
Source: web.dev
Via: Présentations techniques