Lazy loading vidéo : définition et implémentation

Ecrit par
le

Nous avions évoqué il y a plusieurs semaines l’utilisation du lazy loading images, pour alléger les temps de chargement de vos pages.
Aujourd’hui, nous allons nous intéresser au lazy loading vidéos.
Pourquoi ce sujet ? Selon le site http archive, le poids moyen d’une page sur desktop est évalué à 1,84 MB.
Le poids d’une vidéo évolue en fonction du débit d’encodage et de sa durée. Selon cette même source, la somme des ressources nécessaires pour une vidéo est de 1,46MB, soit 79% du poids total de la page précédemment estimée ! Face à ces chiffres, assurez-vous que vos vidéos ne deviennent pas un poids dans vos performances.

Définition du lazy loading vidéos

Le principe est le même que celui appliqué aux images : une première version d’une vidéo de faible résolution se charge et lorsque le visiteur atteint la vidéo au sein de la page, une seconde vidéo de meilleure qualité est chargée.

Quels avantages ?

Pour l’utilisateur, la manœuvre est transparente. S’il souhaite accéder à la vidéo, il pourra visionner la vidéo avec la plus grande qualité. Par contre, pour les bots, l’histoire est différente. En effet ces derniers ont uniquement accès aux vidéos de qualité moindre, et donc plus légère. Ce premier chargement va permettre d’économiser sur deux tableaux :

  • Sur les datas, ce qui libérera de la bande passante pour des ressources qui seront à coup sûr vues par les visiteurs
  • Sur le temps d’interprétation : à chaque chargement de ressource, le navigateur doit décoder et afficher le contenu présent dans le viewport (partie de la page visible par l’internaute à un instant t).

Comment optimiser le chargement de vos vidéos ?

<video controls preload= »none » poster= »image-video-placeholder.jpg »>
<source src= »video.webm » type= »video/webm »>
<source src= »video.mp4″ type= »video/mp4″>
</video>
Pour la balise <video>, 2 attributs vont nous intéresser :
L’attribut poster qui permet de renseigner une image qui sera affichée à la place de la vidéo, dans le cas où celle-ci n’est pas préchargée.
L’attribut preload qui permet de contrôler le téléchargement des différentes ressources / informations de la vidéos (meta, durée, décodage de la vidéo, … )

Comment utiliser l’attribut preload selon votre type de vidéo :

  • Cas d’une vidéo sans autoplay

La première précaution à prendre sera de placer un attribut preload avec une valeur « none » qui empêchera le navigateur de précharger toute donnée relative à la vidéo. Pourquoi cette balise ? On constate selon le navigateur utilisé des différences de comportement natifs sur l’attribut preload :

  • Chrome utilise comme valeur par défaut « auto » : encourage le navigateur à procéder au téléchargement des ressources
    A l’exception de Chrome 64 qui utilise la valeur « metadata » (seules les metadonnées sont chargées au chargement de la page)
    Cependant, sur la version Desktop de Chrome, une portion de vidéo peut être préchargée par l’utilisation d’une balise Content-Range dans le <header> de la page

Le même comportement est constaté sur Firefox, Edge et Internet Explorer 11

  • Safari aura quant à lui tendance à précharger la vidéo
    La version 11.2 précharge uniquement les metadata
    La version IOS n’utilise jamais le préchargement

Même si le navigateur choisit ne précharge pas de lui-même la vidéo, indiquer la valeur « none » à l’attribut preload reste une bonne pratique. Afin de ne pas laisser l’espace de la vidéo vide, vous pouvez renseigner un visuel depuis l’attribut poster.
 

  • Cas de vidéos remplaçant des GIF animés

Bien qu’amusant, les Gifs peuvent s’avérer gourmands en bande passante comparés à une courte vidéo. Pour reproduire le même effet sur l’utilisateur, il faut s’assurer de respecter les différentes caractéristiques du GIF :

  • Aussitôt chargé, l’animation est activée > attribut autoplay
  • L’animation est jouée en boucle > attribut loop
  • L’animation n’a pas de bande son > attribut muted

Le code de votre vidéo ressemblera donc à ça :
<video autoplay muted loop playsinline>
<source src= »video.webm » type= »video/webm »>
<source src= »video.mp4″ type= »video/mp4″>
</video>

Et le lazy loading vidéo là-dedans ?

Une fois que les premières optimisations ci-dessus ont été mises en place, . Le fonctionnement est le même que celui vu pour le lazy loading image (lien article).
Il suffit de renseigner deux balises « data-src » avec les liens des deux vidéos (celle pour les bots et celle pour les utilisateurs) dans la balise <video>.
<video autoplay muted loop playsinline width= »610″ height= »254″ poster= »image-video-placeholder.jpg »>
<source data-src= »video.webm » type= »video/webm »>
<source data-src= »video.mp4″ type= »video/mp4″>
</video>
L’utilisation de Javascript permettra de définir quelle vidéo afficher (et charger) en fonction du viewport (partie de la page vue par l’internaute). Lorsque l’internaute aura atteint la vidéo en question, l’attribut data-src sera alors changé en src et la ressource sera chargée et jouée selon son attribut autoplay.