Performances des vidéos

Dans le module précédent, vous avez découvert des techniques d'amélioration des performances des images, qui constituent un type de ressource Web couramment utilisé, une bande passante importante si vous ne prenez pas garde à les optimiser et à prendre la fenêtre d'affichage.

Cependant, les images ne sont pas le seul type de support couramment utilisé sur le Web. Les vidéos sont un autre type de média populaire, souvent utilisé sur les pages Web. Avant d'examiner certaines les optimisations possibles, il est important de comprendre d'abord comment le <video> .

Fichiers vidéo sources

Lorsque vous travaillez avec des fichiers multimédias, le fichier que vous reconnaissez sur votre système d'exploitation (.mp4, .webm et autres) est appelé conteneur. Un conteneur contient ou plusieurs flux. Dans la plupart des cas, il s'agit du flux vidéo et audio.

Vous pouvez compresser chaque flux à l'aide d'un codec. Par exemple, un video.webm peut être Un conteneur WebM contenant un flux vidéo compressé à l'aide de VP9, et un fichier audio le flux a été compressé à l'aide de Vorbis.

Il est utile de comprendre la différence entre conteneurs et codecs, Il vous permet de compresser vos fichiers multimédias en utilisant beaucoup moins de bande passante, ce qui permet de réduire le temps de chargement global des pages et d'améliorer potentiellement la Largest Contentful Paint (LCP) de la page, qui est une métrique centrée sur l'utilisateur. l'un des trois Core Web Vitals.

Pour compresser des fichiers vidéo, vous pouvez utiliser FFmpeg:

ffmpeg -i input.mov output.webm

La commande précédente, bien qu'elle soit aussi basique avec FFmpeg, prend le input.mov et génère un fichier output.webm en utilisant le fichier FFmpeg par défaut options. La commande précédente génère un fichier vidéo plus petit qui fonctionne les navigateurs les plus récents. Modifier les options vidéo ou audio proposées par FFmpeg pourrait vous aident à réduire davantage la taille du fichier d'une vidéo. Par exemple, si vous Si vous utilisez un élément <video> pour remplacer un GIF, vous devez supprimer la piste audio:

ffmpeg -i input.mov -an output.webm

Si vous souhaitez affiner les choses, FFmpeg propose l'indicateur -crf lorsque la compression de vidéos sans utiliser d'encodage à débit variable. -crf signifie Facteur de taux constant. Ce paramètre permet d'ajuster le niveau compression, et le fait en acceptant un entier dans une plage donnée.

Les codecs tels que H.264 et VP9 prennent en charge l'indicateur -crf, mais son utilisation dépend de le codec que vous utilisez. Pour en savoir plus, consultez Facteur de taux constant pour l'encodage des vidéos au format H.264, ainsi que la qualité constante lors de l'encodage des vidéos en VP9

Formats multiples

Lorsque vous travaillez avec des fichiers vidéo, vous pouvez spécifier plusieurs formats comme solution de remplacement pour les navigateurs qui n'acceptent pas tous les formats modernes.

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Tous les navigateurs récents sont compatibles avec le codec H.264. Vous pouvez donc utiliser le format MP4 pour les anciens navigateurs. La version WebM peut utiliser le nouveau codec AV1, qui n'est pas encore compatible, ou l'ancien codec VP9, mieux compatible qu'AV1, mais la compression est généralement inférieure à celle du fichier AV1.

Attribut poster

L'image poster d'une vidéo est ajoutée à l'aide de l'attribut poster sur la <video> , qui indique à l'utilisateur quel peut être le contenu de la vidéo avant la lecture lancée:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Lecture automatique

Selon HTTP Archive, 20% des vidéos sur le Web incluent le autoplay. autoplay est utilisé lorsqu'une vidéo doit être lue. immédiatement, comme lorsqu'elle est utilisée comme arrière-plan d'une vidéo ou comme remplacement d'une GIF animés.

Les GIF animés peuvent être très volumineux, surtout s’ils ont de nombreux cadres avec des détails complexes. Il n'est pas rare que les GIF animés consomment plusieurs mégaoctets de données, ce qui peut entraîner une consommation importante de la bande passante pour accéder à des ressources plus critiques. Vous devez généralement éviter les formats d'images animées, car les équivalents <video> sont bien plus efficaces pour ce type de support.

Si votre site Web exige la lecture automatique de vidéos, vous pouvez utiliser la Attribut autoplay directement sur l'élément <video>:

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

En combinant l'attribut poster avec l'API Intersection Observer, vous pouvez configurer votre page pour ne télécharger les vidéos que lorsqu'elles se trouvent dans la fenêtre d'affichage. L'image poster peut être un espace réservé d'image de mauvaise qualité, comme le premier cadre de la vidéo. Lorsque la vidéo apparaît dans la fenêtre d'affichage, le navigateur démarre télécharger la vidéo. Cela peut réduire les temps de chargement du contenu dans dans la fenêtre d'affichage initiale. En revanche, lorsque vous utilisez une image poster pour autoplay, vos utilisateurs reçoivent une image qui ne s'affiche que brièvement jusqu'à ce que la vidéo chargé et commence la lecture.

Lecture déclenchée par l'utilisateur

En général, le navigateur commence à télécharger un fichier vidéo dès que le code HTML l'analyseur découvre l'élément <video>. Si vous avez des éléments <video> où l'utilisateur lance la lecture, vous ne souhaitez probablement pas que le téléchargement se lance. tant que l'utilisateur n'a pas interagi avec elle.

Vous pouvez modifier le contenu téléchargé pour les ressources vidéo à l'aide de <video> l'attribut preload de l'élément:

• Si vous définissez preload="none", le navigateur informe le navigateur qu'aucun contenu de la vidéo doivent être préchargées.
• Si vous définissez preload="metadata", seules les métadonnées de la vidéo, telles que son de la durée et éventuellement d'autres informations ponctuelles.

Définir preload="none" est probablement le cas le plus intéressant si vous chargez les vidéos pour lesquelles les utilisateurs doivent lancer la lecture.

Dans ce cas, vous pouvez améliorer l'expérience utilisateur en ajoutant une image poster. Cela donne à l'utilisateur plus de contexte sur le sujet de la vidéo. De plus, si l'image poster est votre élément LCP, vous pouvez augmenter la valeur de l'image poster priorité à l'aide de l'indice <link rel="preload"> ainsi que fetchpriority="high":

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

Intégrations

Étant donné la complexité de l'optimisation et de la diffusion efficaces des contenus vidéo, il est logique de confier le problème à des services vidéo dédiés comme YouTube ou Vimeo. Ces services optimisent la diffusion des vidéos pour vous, mais l'intégration d'une vidéo à partir d'un service tiers peut avoir son propre effet sur car les lecteurs vidéo intégrés offrent souvent de nombreuses performances des ressources, comme JavaScript.

Compte tenu de cette réalité, l'intégration de vidéos tierces peut avoir un impact significatif des performances. Selon l'archive HTTP, les intégrations YouTube bloquent le thread principal pendant plus de 1,7 seconde pour le site Web médian. Blocage du thread principal pour de longues périodes est un problème sérieux d'expérience utilisateur qui peut avoir de la page INP (Interaction to Next Paint). Cependant, vous pouvez trouver un compromis En ne chargeant pas l'élément intégré immédiatement lors du chargement initial de la page, Créez un espace réservé pour l'intégration qui est remplacé par l'intégration de la vidéo. lorsque l'utilisateur interagit avec elle.

Démonstrations vidéo

Tester vos connaissances

À suivre: optimiser les polices Web

La suite de notre couverture sur l'optimisation de types de ressources spécifiques concerne les polices. L'optimisation des polices de votre site Web est souvent négligée, mais vous pouvez ont un impact significatif sur la vitesse de chargement globale de votre site Web. Les métriques telles que tels que LCP et Cumulative Layout Shift (CLS).