Optimiser les vidéos pour la performance web

La vidéo est l’un des médias les plus consommateurs de bande passante du Web. Mal diffusée, elle alourdit les pages, retarde l’affichage et dégrade l’expérience. Bien optimisée, elle reste fluide sans compromettre la vitesse du site. Pour y parvenir, il faut d’abord comprendre comment fonctionne l’élément video et comment le navigateur télécharge ses ressources.

Pour le SEO, l’enjeu est double : réduire le poids des fichiers améliore le Largest Contentful Paint, et éviter les téléchargements superflus préserve la réactivité, donc l’INP. Maîtriser quelques attributs HTML suffit à transformer une vidéo coûteuse en média performant.

Le fichier que vous reconnaissez sur votre système (mp4, webm) est un conteneur. Il renferme un ou plusieurs flux, généralement un flux vidéo et un flux audio, chacun compressé par un codec. Un fichier webm peut ainsi contenir un flux vidéo en VP9 et un flux audio en Vorbis.

Comprendre cette distinction est essentiel, car elle permet de compresser fortement vos médias et de réduire la bande passante consommée. Avec un outil comme FFmpeg, une commande de base convertit déjà un fichier source en webm plus léger compatible avec tous les navigateurs modernes. Lorsque la vidéo remplace un GIF, pensez à supprimer la piste audio avec l’option -an : même silencieuse, elle pèse inutilement dans le fichier.

Indiquer plusieurs formats sert de solution de repli pour les navigateurs qui ne prennent pas en charge les formats les plus récents. Tous les navigateurs modernes étant compatibles avec le codec H.264, le MP4 fait un excellent repli, tandis que le WebM peut s’appuyer sur l’AV1 récent ou le VP9, mieux supporté.

L’ordre des éléments source détermine la priorité du navigateur : il retient la première source compatible. Placez donc toujours le format le plus efficace en premier, sous peine de servir un format moins optimisé que ce que l’appareil pourrait afficher.

Plusieurs attributs de l’élément video déterminent ce que le navigateur télécharge et quand. Bien combinés, ils évitent de charger une vidéo que l’utilisateur ne lancera peut-être jamais ; à l’inverse, pour les médias à lancer sans délai, voyez comment précharger l’audio et la vidéo. Le tableau suivant en résume le rôle.

Une vidéo dotée de l’attribut autoplay commence à se télécharger immédiatement, même hors écran. Pour les arrière-plans ou les remplacements de GIF, combinez autoplay avec muted, loop et playsinline. Pour ne charger ces vidéos que lorsqu’elles entrent dans le viewport, associez une image poster à l’API Intersection Observer, une technique détaillée dans notre tutoriel pour différer les vidéos.

À l’inverse, lorsque l’utilisateur doit lancer la lecture lui-même, le navigateur télécharge la vidéo dès qu’il rencontre l’élément. L’attribut preload= »none » évite ce comportement. Vous pouvez alors préchauffer l’expérience en passant à preload= »metadata » au survol, et améliorer le rendu avec une image poster. Si cette image est l’élément LCP, préchargez-la avec rel=preload et fetchpriority= »high ».