L'état actuel de la vidéo (partie 1)

Note : Utilisation de www-embed-player.js pour YouTube ou https://f.vimeocdn.com/p/*/js/ player.js pour Vimeo sont de bonnes empreintes digitales pour les navigateurs avec un cache vide, mais si le client a déjà visité un site avec une vidéo intégrée, ce fichier peut déjà se trouver dans le cache du navigateur et ne sera donc pas redemandé. . Mais, comme Andy Davies l'a récemment noté ce n'est pas une hypothèse sûre.

Facebook Video Counts

Il est surprenant de constater que 67% des demandes de vidéos proviennent de HTTP Archive. Le CDN de Facebook. Il s'avère que sur Chrome, les widgets Facebook tiers téléchargent 30% de toutes les vidéos publiées dans le widget (cet effet ne se produit pas dans Safari ni dans Firefox.). Il s'avère qu'un widget tiers ajouté avec seulement quelques lignes de code est responsable de 57% de toutes les vidéos affichées dans l'archive HTTP.

Types de fichiers vidéo

La majorité des vidéos sur les pages testées sont des MP4. Si nous regardons toutes les vidéos téléchargées (à l'exception de celles de Facebook), nous obtenons la vue suivante:

Les fichiers sans extension - 10k sont les fichiers googlevideo.com .

Que pouvons-nous apprendre sur ces fichiers? Examinons chaque type de fichier pour en savoir plus sur le contenu livré.

J'ai utilisé FFPROBE pour interroger les 34k fichiers MP4 uniques et obtenir des données pour 14 700 vidéos (de nombreuses vidéos avaient été modifiées ou supprimées dans les 3 semaines à partir de HTTP Archive capture to analysis).

Données vidéo MP4

Sur les 14,7k vidéos du jeu de données, 8 564 possèdent des pistes audio (58%). Les vidéos plus courtes lues automatiquement en arrière-plan ou en arrière-plan ne requièrent pas d'audio, effacer la piste audio est donc un excellent moyen de réduire la taille du fichier (et d'accélérer la diffusion) de vos vidéos.

L'aspect le plus important à prendre en compte rapidement télécharger une vidéo sont les dimensions. Plus les dimensions sont grandes (et dans le cas de la vidéo, trois dimensions sont à prendre en compte: largeur × hauteur × ), plus le fichier vidéo sera volumineux. be.

Durée de la vidéo MP4

La plupart des vidéos de 14 km étudiées sont courtes: la durée médiane (50 e centile) est de 21 s. Cependant, 10% des vidéos interrogées durent plus de 2 minutes. Les cas d'utilisation ici seront bien sûr divisés, mais pour les boucles vidéo courtes ou les vidéos d'arrière-plan, les vidéos plus courtes utiliseront moins de données et seront téléchargées plus rapidement.

Largeur et hauteur de la vidéo MP4

Les dimensions de la vidéo à l'écran déterminent le nombre de pixels que chaque image devra utiliser. Le tableau ci-dessous présente les différentes largeurs vidéo diffusées sur le périphérique mobile. (Remarque: le Moto G4 a une taille d'écran de 1080 × 1920 et les pages sont toutes visualisées en mode portrait.)

Comme le montrent les données, les deux largeurs vidéo les plus utilisées sont nettement plus grandes que l’écran G4 (en mode portrait). 49% de toutes les vidéos sont diffusées avec une largeur supérieure à 1080 pixels. L'Alcatel 1x, un nouvel appareil Android Go, dispose d'un écran de 480 × 960 pixels. 77% des vidéos diffusées dans l'ensemble d'échantillons ont une largeur supérieure à 480 pixels.

À mesure que les dimensions des vidéos diminuent, la taille des fichiers diminue (ainsi que le temps de diffusion de la vidéo). C’est la raison principale pour redimensionner les vidéos.

Pourquoi ces vidéos sont-elles si volumineuses? Si nous corrélons les vidéos diffusées sur mobile et sur le bureau, nous constatons que 18% des vidéos diffusées sur le mobile sont les mêmes vidéos diffusées sur le bureau. C’est un «problème» résolu pour les images il ya des années avec des images réactives. En diffusant des vidéos de tailles différentes sur des périphériques de tailles différentes, nous pouvons nous assurer que de superbes vidéos sont diffusées, mais dans une taille et une dimension adaptées à l'appareil.

Débit binaire vidéo MP4

Débit binaire de la vidéo transmise à l'appareil. joue un effet important sur la qualité de lecture de la vidéo. Les tests HTTP Archive sont exécutés sur une connexion 3G à une vitesse de téléchargement de 1,6 MBPS. Pour lire (sans ralentir), le téléchargement doit être plus rapide que la lecture. Fournissons 80% du débit binaire disponible aux fichiers vidéo (1,3 MBPS). 47% des vidéos de l'ensemble d'échantillons ont un débit binaire supérieur à 1,3 Mbps, ce qui signifie que, lorsque ces vidéos sont diffusées via une connexion 3G, elles ont plus de chances de rester bloquées, ce qui entraîne des clients mécontents. 27% des vidéos ont un débit supérieur à 2,5 Mbps, 10% plus de 5 Mbps et 35% des vidéos diffusées sur des appareils mobiles ont un débit> 10 Mbps. Ces vidéos plus volumineuses risquent de ne pas être bloquées sur de nombreuses connexions - fixes ou mobiles.

Ce qui entraîne des débits binaires plus élevés

Les vidéos plus volumineuses ont tendance à avoir un débit binaire plus élevé, car les vidéos aux dimensions plus grandes nécessitent beaucoup plus de données pour alimenter les pixels supplémentaires de l'appareil. Les références croisées du débit de chaque vidéo à la largeur le confirment: les vidéos de largeur 1280 (orange) et 1920 (gris) ont une distribution de débits beaucoup plus large (plus de points de données à droite dans le graphique). La colonne marquée en jaune indique les 136 vidéos de largeur 1920 et d'un débit compris entre 10 et 11 MBPS.

Si nous ne visualisons que les vidéos de plus de 1,6 Mbps, il devient évident que les résolutions d'écran plus élevées (1280 et 1920) sont responsables des vidéos à plus haut débit.

Grand aperçu )

MP4: HTTP contre HTTPS

HTTP2 a redéfini la fourniture de contenu avec des connexions multiplexées - une seule connexion par serveur étant requise. HTTP2 apporte-t-il une amélioration significative de la diffusion de contenu pour les fichiers volumineux tels que les vidéos? Si nous regardons les statistiques de l'archive HTTP:

En omettant les 116k vidéos Facebook (toutes envoyées via HTTP2), on voit qu'il s'agit d'une division 50:50 entre HTTP 1.1 et HTTP2. Cependant, HTTP1.1 peut utiliser le protocole HTTPS et, lorsque nous filtrons ce dernier, nous constatons que 81% des flux vidéo sont envoyés via HTTPS, HTTP2 étant légèrement plus utilisé que HTTPS1.1 (41%: 36%)

Comme vous pouvez le constater, la vitesse de diffusion vidéo HTTP et HTTP2 est un travail en cours.

Streaming vidéo HLS

Le streaming vidéo utilisant le débit adaptatif est un moyen idéal de diffuser la vidéo à l'utilisateur final. Plusieurs versions de chaque vidéo sont construites avec des dimensions et des débits différents. La liste des flux disponibles est présentée au périphérique de lecture et le lecteur vidéo de celui-ci peut choisir le flux le plus approprié en fonction de la taille de l'écran du périphérique et des conditions réseau disponibles. Le fichier d'archivage HTTP que j'ai examiné contient 1 065 fichiers manifestes (et 14 000 fichiers de flux vidéo).

Lecture de flux vidéo

L'un des indicateurs clés du flux vidéo consiste à faire en sorte que la vidéo démarre le plus rapidement possible. Alors que le fichier manifeste contient une liste de flux disponibles, le lecteur n'a aucune idée de la bande passante disponible du réseau au début de la lecture. Pour commencer la diffusion en continu, et parce que le lecteur doit choisir un flux, il choisit généralement le premier de la liste. Pour faciliter le démarrage rapide d'une vidéo, il est important de placer le flux approprié en haut de votre fichier manifeste.

Note : Utilisation de l'API Chrome Info réseau pour générer des fichiers manifestes sur la mouche pourrait être un bon moyen d'optimiser rapidement le contenu vidéo au démarrage.

Pour vous assurer que la vidéo démarre rapidement, commencez par le segment vidéo de qualité la plus basse, car le téléchargement sera le plus rapide. La qualité vidéo initiale peut être pixelisée, mais au fur et à mesure que le lecteur comprend mieux la qualité du réseau, il peut rapidement s'adapter à un flux vidéo plus approprié (espérons-le de meilleure qualité). Dans cet esprit, examinons les débits binaires du flux initial dans l’archive HTTP.

La ligne rouge dans le tableau ci-dessus indique 1,5 MBPS (rappelez-vous que les tests mobiles sont exécutés à 1,6 MBPS et que le contenu vidéo n'est pas le seul à être téléchargé). Nous voyons que 30,5% de tous les flux (tout à gauche de la ligne) commencent par un débit initial supérieur à 1,5 MBPS (et sont donc peu susceptibles d'être lus sur une connexion 3G) 17% démarrent au-dessus de 2 MBPS.

Donc que se passe-t-il lorsque le téléchargement de la vidéo est plus lent que la lecture réelle de la vidéo? Initialement, le lecteur tentera de télécharger les fichiers (trop) volumineux, mais, en fonction de la vitesse de téléchargement, réalisera le problème. Le lecteur passe ensuite au téléchargement d’une vidéo à débit binaire inférieur, de sorte que le téléchargement est plus rapide que la lecture. Le problème est que la tentative de téléchargement initiale prend du temps et qu’ajouter un délai au début de la lecture de la vidéo entraîne l’abandon du client.

Nous pouvons également examiner les débits les plus courants des fichiers .ts (les fichiers avoir le contenu vidéo), pour voir quels débits finissent par être téléchargés sur le mobile. Ces données incluent les débits binaires initiaux, ainsi que tout fichier téléchargé ultérieurement lors de l'exécution de WebPageTest:

Nous pouvons voir deux groupes principaux de débits binaires en flux vidéo (100 à 300 kbps et un pic plus large entre 300 et 1 000 mbps). C’est là que nous nous attendions à ce que les flux apparaissent, étant donné que la vitesse du réseau est limitée à 1,6 Mbps.

En comparant les données au poste de travail, Mobile est clairement plus élevé aux débits binaires inférieurs, et les flux de postes de travail atteignent des pics élevés dans les 500- Intervalles de 600 et 800-900 kbps, qui ne sont pas visibles sur les mobiles.

Lorsque nous comparons les débits binaires initiaux observés (en bleu) avec les fichiers réellement téléchargés, il est très clair que, pour les mobiles, le débit binaire diminue généralement pendant la lecture, ce qui indique qu'une réduction du débit binaire initial des flux vidéo pourrait améliorer les performances de démarrage vidéo. et empêcher les blocages en début de lecture de la vidéo. La vidéo sur ordinateur de bureau semble également diminuer, mais il est également possible que certaines vidéos passent à des vitesses de lecture plus élevées.

Conclusion

Le contenu vidéo sur le Web augmente l’engagement et la satisfaction des clients. Les pages qui se chargent rapidement ont le même effet. L'ajout de vidéo sur votre site Web ralentira le temps de rendu de la page, ce qui nécessitera un équilibre entre le chargement général de la page et le contenu vidéo. Pour réduire la taille de votre contenu vidéo, assurez-vous de disposer de versions adaptées aux dimensions de votre appareil mobile et utilisez des vidéos plus courtes lorsque cela est possible.

Si la lecture de vos vidéos n'est pas indispensable, suivez les indications de YouTube et de Vimeo - télécharger tout les éléments requis doivent être prêts pour la lecture, mais ne téléchargez pas de segments vidéo tant que l'utilisateur n'a pas appuyé sur le bouton Lecture. Enfin, si vous diffusez de la vidéo en continu, commencez avec le paramètre de qualité le plus bas pour assurer une lecture rapide.

Dans mon prochain post en vidéo, je vais prendre ces résultats généraux pour approfondir la résolution de problèmes potentiels à l'aide d'exemples. Restez à l'écoute!

(dm, ra, il)