Différer le chargement des vidéos

Comme les images, les vidéos peuvent être chargées de manière différée pour ne pas peser sur le chargement initial de la page. Une vidéo téléchargée alors que l’utilisateur ne la regardera peut-être jamais gaspille de la bande passante et retarde l’affichage du contenu visible. Différer son chargement consiste à ne récupérer ses données qu’au moment opportun.

La méthode dépend du cas d’usage, car il n’existe pas une seule solution. Pour le SEO, l’intérêt est clair : en évitant des téléchargements superflus, vous accélérez le rendu initial, vous libérez de la bande passante pour les ressources critiques et vous améliorez les Core Web Vitals. Les vidéos hébergées sur des services tiers comme YouTube relèvent quant à elles du chargement différé des iframes.

Il est généralement préférable d’éviter la lecture automatique, qui laisse le contrôle à l’utilisateur. Pour ces vidéos, l’attribut preload est le meilleur levier. Réglé sur none, il empêche le navigateur de précharger les données vidéo. L’attribut poster fournit un espace réservé qui occupe la place pendant le chargement.

La valeur none est souvent la plus sûre : par défaut, preload vaut metadata dans la plupart des navigateurs, ce qui télécharge déjà une partie de la vidéo via l’en-tête Content-Range, parfois plus que souhaité. Avec preload= »none », aucune donnée n’est récupérée tant que l’utilisateur ne lance pas la lecture.

Vous pouvez affiner l’expérience en préchargeant les métadonnées seulement lorsque l’utilisateur survole la vidéo, grâce à un gestionnaire d’événement mouseenter. La vidéo se lance alors plus vite et affiche sa durée dès le démarrage, sans pour autant charger l’intégralité du fichier au chargement de la page.

Si l’image poster est l’élément candidat au LCP, allez plus loin : préchargez-la avec rel=preload et fetchpriority= »high ». Une image se charge plus vite qu’une vidéo, ce qui sécurise un bon Largest Contentful Paint tout en gardant la vidéo différée ; voyez aussi comment précharger l’audio et la vidéo.

Les vidéos en lecture automatique servent souvent d’alternative aux GIF, bien plus légère ; pour les préparer correctement, voyez comment optimiser les vidéos. Pour reproduire le comportement d’un GIF, l’élément video combine autoplay, muted, loop et playsinline, ce dernier étant nécessaire à la lecture automatique sur iOS. Pour différer ce type de vidéo, on stocke l’URL de chaque source dans un attribut data-src, puis on déclenche le chargement via Intersection Observer.

Le script observe les éléments video marqués, et lorsqu’ils entrent dans le viewport, il recopie data-src dans src pour chaque source, puis appelle la méthode load pour démarrer la lecture. On obtient ainsi une vidéo qui imite le GIF sans en supporter le coût en données, tout en restant chargée de manière différée.

Chaque scénario appelle une approche différente. Le tableau ci-dessous récapitule la technique la plus adaptée selon le type de vidéo à différer.