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.
<ph type="x-smartling-placeholder">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.
<ph type="x-smartling-placeholder">Démonstrations vidéo
Tester vos connaissances
Ordre des éléments <source>
à l'intérieur d'une
l'élément parent <video>
ne détermine pas
la ressource vidéo qui est finalement téléchargée.
Attribut poster
de l'élément <video>
est considéré comme un candidat au LCP.
À 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).