Le nouveau chargement différé vidéo et audio natif de Google Chrome pourrait rendre le Web plus rapide

/fr/images/Google-Chrome-lazy-loading-for-videos-and-audio.jpg

Google Chrome et d’autres navigateurs basés sur Chromium, notamment Edge et Vivaldi, pourraient bientôt bénéficier d’une prise en charge native du chargement paresseux vidéo et audio. Ce changement a été proposé par Helmut Januschka, un développeur indépendant connu pour ses contributions passées à Chromium.

La fonctionnalité de chargement paresseux existe depuis des années dans Chrome, mais jusqu’à présent, la prise en charge native était limitée à des éléments tels que les images et les iframes, et non à la vidéo et à l’audio. Cela changera bientôt, car les navigateurs basés sur Chromium prendront en charge de manière native le chargement paresseux pour la vidéo et l’audio, ce qui pourrait rendre le Web plus rapide, surtout si vous parcourez des pages Web contenant beaucoup de médias.

/fr/images/Chromium-automatic-lazy-loading.jpg

Pour ceux qui ne le savent pas, lorsque vous chargez paresseusement une image ou une vidéo sur un site Web et que vous la visitez dans Chrome ou dans n’importe quel navigateur, il ne récupère pas ou n’initialise pas complètement le média au moment où le navigateur affiche la page. Les vidéos ou les images ne sont chargées que lorsqu’elles sont visibles près de chez vous, soit lorsque vous faites défiler jusqu’à la région où une vidéo est intégrée.

Sans chargement paresseux, Chrome peut charger les médias beaucoup plus tôt, ce qui signifie que le site Web serait beaucoup plus lent, car le navigateur doit d’abord télécharger tout ce qui se trouve sur la page. Avec chargement = “lazy”, Chrome ne charge ni ne télécharge la vidéo jusqu’à ce que vous atteigniez réellement la région où elle est intégrée. Si vous ne faites pas défiler aussi loin, le média risque de ne jamais être chargé.

La plupart des sites chargent déjà paresseusement des vidéos ou de l’audio à l’aide de JavaScript, ce qui fonctionne bien, mais ce n’est pas la meilleure pratique en termes de performances, car il ne s’intègre pas bien au scanner de préchargement natif du navigateur et à l’heuristique de chargement intégrée.

“Sans support natif, les développeurs doivent implémenter des solutions JavaScript personnalisées à l’aide d’Intersection Observer pour détecter le moment où des éléments multimédias entrent dans la fenêtre, puis définir dynamiquement l’attribut src”, a écrit le développeur Helmut Januschka dans un article sur l’état de Chrome. “Cette approche est sujette aux erreurs, ajoute de la complexité et ne peut pas s’intégrer au scanner de préchargement du navigateur.”

Comme l’a repéré pour la première fois Windows Insight, la solution d’Helmut Januschka consiste à ajouter un chargement paresseux natif à part entière pour la vidéo et l’audio à Chromium, de la même manière qu’il est déjà intégré pour les images et les iframes.

Lorsque cette fonctionnalité sera déployée dans Chrome stable, les développeurs pourront commencer à utiliser un attribut HTML à la place : loading=“lazy” directement sur ou.

Cela signifie que la vidéo et l’audio seront chargés de manière native, au lieu de s’appuyer sur JavaScript, ce qui peut constituer un goulot d’étranglement ou ne pas fonctionner correctement avec le scanner de préchargement de Chrome.

“Le chargement paresseux natif permet au navigateur d’optimiser le chargement des ressources avec des seuils sensibles au réseau, de gérer correctement l’interaction avec les attributs de lecture automatique et de préchargement et d’éviter de bloquer window.onload pour les médias hors écran”, a noté Januschka.

“Cela correspond au comportement de chargement différé existant pour ![] et