Videowiedergabe im Web: Der aktuelle Stand von Videos (Teil 1)

Die Nutzung von Videos im Internet nimmt zu, da Geräte und Netzwerke schneller und besser in der Lage sind, Videoinhalte zu verarbeiten. Untersuchungen zeigen, dass Websites mit Videos das Engagement um 80 % steigern. E-Commerce-Websites mit Video erzielen höhere Conversions als Websites ohne Video.

Das Hinzufügen von Videos kann jedoch mit Kosten verbunden sein. Videos (da es sich um größere Dateien handelt) verlängern die Ladezeit der Seite, und Leistungsuntersuchungen zeigen, dass langsamere Seiten den gegenteiligen Effekt einer geringeren Kundenbindung und Conversions haben. In diesem Artikel untersuche ich die wichtigen Metriken zum Ausgleich von Leistung und Videowiedergabe im Web, schaue mir an, wie Video heute verwendet wird, und stelle Best Practices für die Bereitstellung von Videos im Web vor.

Einer der ersten Schritte zur Verbesserung der Kundenzufriedenheit ist die Beschleunigung der Ladezeit einer Seite . Google hat gezeigt, dass mobile Seiten, deren Ladevorgang länger als drei Sekunden dauert, 53 % ihres Publikums durch Abbruch verlieren. Andere Studien zeigen, dass durch die Verbesserung der Website-Leistung die Nutzung und der Umsatz steigen.

Das Hinzufügen von Videos zu einer Website erhöht das Engagement, kann aber auch die Ladezeit drastisch verlangsamen, sodass klar ist, dass ein Gleichgewicht zwischen dem Hinzufügen von Videos zu Ihrer Website und einer nicht zu großen Beeinträchtigung der Ladezeit gefunden werden muss.

Empfohlene Lektüre : Front-End Performance Checklist 2018 [PDF, Apple Pages]

Video heute im Web

Um den aktuellen Stand von Videos im Internet zu untersuchen, verwende ich Daten aus dem HTTP-Archiv. Das HTTP-Archiv verwendet WebPageTest, um alle zwei Wochen die Leistung von 1,2 Millionen mobilen und Desktop-Websites zu scannen, und speichert die Daten dann in Google BigQuery.

Typischerweise wird nur die Hauptseite jeder Domain überprüft (was bedeutet, dass www.cnn.com ausgeführt wird, aber www.cnn.com/politics nicht). Diese Daten können uns helfen zu verstehen, wie sich die Nutzung von Videos im Internet auf die Leistung von Websites auswirkt. Mobile Tests werden auf einem emulierten Motorola G4 mit einer 3G-Internetverbindung (1,6 MBPS down, 768 KBPS up, 300 ms RTT) durchgeführt, und Desktoptests führen Chrome über eine Kabelverbindung aus (5 MBPS down, 1 MBPS up, 28 ms RTT). Ich verwende den Datensatz ab dem 1. August 2018.

Websites, die Videos herunterladen

Als ersten Schritt zum Studium von Websites mit Videos sollten wir uns Websites ansehen, die Videodateien herunterladen, wenn die Seite geladen wird. Es gibt 35.000 mobile Websites und 55.000 Desktop-Websites mit Videodatei-Downloads im HTTP-Archivdatensatz (das sind 3 % aller mobilen Websites und 4,5 % aller Desktop-Websites). Beim Vergleich von Desktop- und Mobilgeräten stellen wir fest, dass 30.000 dieser Websites Videos sowohl auf Mobilgeräten als auch auf Desktops haben (wobei etwa 5.800 Websites auf Mobilgeräten ohne Video auf dem Desktop verbleiben).

Die durchschnittliche mobile Seite mit Video wiegt satte 7 MB (583 % größer als 1,2 MB, die für die durchschnittliche mobile Website gefunden wurden). Dieser Anstieg wird nicht vollständig durch Video allein (2,5 MB) erklärt. Da Websites mit Videos in der Regel funktionsreicher und visuell ansprechender sind, verwenden sie auch mehr Bilder (die mittlere Website hat über 1 MB mehr), CSS und Javascript. Die folgende Tabelle zeigt auch, dass der mittlere SpeedIndex (ein Maß dafür, wie schnell Inhalte auf dem Bildschirm erscheinen) für Websites mit Videos 3,7 Sekunden langsamer ist als eine typische mobile Website, wobei das Laden satte 11,5 Sekunden dauert.

Dies zeigt deutlich, dass Websites, die interaktiver sind und Videoinhalte haben, (im Durchschnitt) länger brauchen, um Websites ohne Video zu laden. Aber können wir die Videobereitstellung beschleunigen? Was können wir noch aus den vorliegenden Daten lernen?

Video-Hosting

Werden die Dateien bei der Prüfung der Videobereitstellung von einem CDN oder Videoanbieter bereitgestellt oder hosten die Entwickler die Videos auf ihren eigenen Servern? Bei der Untersuchung der Domain der auf Mobilgeräten bereitgestellten Videos stellen wir fest, dass 12.163 Domains zur Bereitstellung von Videos verwendet werden, was darauf hinweist, dass ~49 % der Websites ihre eigenen Videodateien bereitstellen. Wenn wir die Domains nach Häufigkeit stapeln, können wir die gängigsten Video-Hosting-Lösungen ermitteln:

Die Top-CDNs und -Domains Facebook, Akamai, Google, Cloudinary, AWS und Cloudfront sind führend, was nicht überraschend ist. Es ist jedoch interessant, YouTube und Vimeo so weit unten in der Liste zu sehen, da sie zwei der beliebtesten Websites zum Teilen von Videos sind.

Lassen Sie uns einen Blick auf die Bereitstellung von YouTube-, Vimeo- und Facebook-Videos werfen:

YouTube-Video zählt

Standardmäßig laden Seiten mit einem eingebetteten YouTube-Video keine Videodateien herunter – nur Skripte und ein Platzhalterbild, sodass sie nicht in einer Suchanfrage angezeigt werden, die nach Websites mit Video-Downloads sucht. Einer der Javascript-Downloads für den YouTube-Videoplayer ist www-embed-player.js . Bei der Suche nach dieser Datei finden wir 69.000 Instanzen auf 66.647 mobilen Websites. Diese Seiten haben einen mittleren SpeedIndex von 10.700 und eine Datennutzung von 3,31 MB – besser als Seiten mit heruntergeladenem Video, aber immer noch langsamer als Seiten ohne Video. Die Zunahme der Daten steht in direktem Zusammenhang mit mehr Bildern und Javascript (wie unten gezeigt).

Vimeo-Video zählt

Es gibt 14.148 Anfragen für Vimeo-Videos im HTTP-Archiv für die Videowiedergabe. Ich sehe nur 5.848 Anfragen für die Datei player.js (im Format https://f.vimeocdn.com/p/3.2.0/js/player.js – was impliziert, dass es vielleicht viele Videos auf einer Seite gibt, oder vielleicht ein anderer Speicherort für die Video-Player-Datei Es sind 17 verschiedene Versionen des Players im HTTP-Archiv vorhanden, wobei die beliebtesten 3.1.5 und 3.1.4 sind:

Es scheint keinen Leistungsgewinn für irgendeine Vimeo-Bibliothek zu geben – alle Seiten haben ähnliche Ladezeiten.

Hinweis : Die Verwendung von www-embed-player.js für YouTube oder https://f.vimeocdn.com/p/*/js/player.js für Vimeo sind gute Fingerabdrücke für Browser mit einem sauberen Cache, aber wenn der Kunde dies zuvor getan hat eine Website mit einem eingebetteten Video besucht haben, befindet sich diese Datei möglicherweise bereits im Browser-Cache und wird daher nicht erneut angefordert. Aber wie Andy Davies kürzlich bemerkte, ist dies keine sichere Annahme.

Facebook-Video zählt

Es ist überraschend, dass in den HTTP-Archivdaten 67 % aller Videoanfragen vom CDN von Facebook stammen. Es stellt sich heraus, dass Facebook-Widgets von Drittanbietern in Chrome 30 % aller im Widget geposteten Videos herunterladen (dieser Effekt tritt nicht in Safari oder in Firefox auf). Es stellt sich heraus, dass ein Drittanbieter-Widget, das mit nur wenigen Codezeilen hinzugefügt wurde, für 57 % aller im HTTP-Archiv angezeigten Videos verantwortlich ist.

Videodateitypen

Die Mehrheit der Videos auf den getesteten Seiten sind Mp4s. Betrachten wir alle heruntergeladenen Videos (außer denen von Facebook), erhalten wir folgende Ansicht:

Von den Dateien ohne Erweiterung sind googlevideo.com Dateien.

Was können wir über diese Dateien erfahren? Sehen wir uns die einzelnen Dateitypen an, um mehr über die bereitgestellten Inhalte zu erfahren.

Ich habe FFPROBE verwendet, um die 34.000 eindeutigen MP4-Dateien abzufragen, und Daten für 14.700 Videos erhalten (viele der Videos wurden in den 3 Wochen von der Erfassung im HTTP-Archiv bis zur Analyse geändert oder entfernt).

MP4-Videodaten

Von den 14,7.000 Videos im Datensatz haben 8.564 Audiospuren (58 %). Kürzere Videos, die automatisch abgespielt werden, oder Videos, die im Hintergrund abgespielt werden, erfordern kein Audio, daher ist das Entfernen der Audiospur eine großartige Möglichkeit, die Dateigröße Ihrer Videos zu reduzieren (und die Bereitstellung zu beschleunigen).

Der zweitwichtigste Aspekt beim schnellen Herunterladen eines Videos sind die Abmessungen. Je größer die Abmessungen (und im Fall von Videos sind drei Abmessungen zu berücksichtigen: width × height × time ), desto größer wird die Videodatei.

MP4-Videodauer

Die meisten der untersuchten 14.000-Videos sind kurz: Die mittlere Dauer (50. Perzentil) beträgt 21 Sekunden. Allerdings sind 10 % der befragten Videos länger als 2 Minuten. Anwendungsfälle werden hier natürlich geteilt, aber für kurze Videoschleifen oder Hintergrundvideos – kürzere Videos verbrauchen weniger Daten und laden schneller herunter.

Breite und Höhe von MP4-Videos

Die Abmessungen des Videos auf dem Bildschirm entscheiden darüber, wie viele Pixel jeder Frame verwenden muss. Das folgende Diagramm zeigt die verschiedenen Videobreiten, die an das Mobilgerät geliefert werden. (Als Hinweis, das Moto G4 hat eine Bildschirmgröße von 1080 × 1920, und die Seiten werden alle im Hochformat angezeigt).

Wie die Daten zeigen, sind die beiden am häufigsten verwendeten Videobreiten deutlich größer als der G4-Bildschirm (im Hochformat gehalten). Ganze 49 % aller Videos werden mit einer Breite von mehr als 1080 Pixeln bereitgestellt. Das Alcatel 1x, ein neues Android-Go-Gerät, hat einen 480×960-Pixel-Bildschirm. 77 % der im Sample-Set gelieferten Videos sind größer als 480 Pixel breit.

Wenn die Abmessungen von Videos abnehmen, nimmt auch die Dateigröße ab (und damit die Zeit, um das Video bereitzustellen). Dies ist der Hauptgrund für die Größenänderung von Videos.

Warum sind diese Videos so groß? Wenn wir die auf Mobilgeräten und Desktops bereitgestellten Videos korrelieren, stellen wir fest, dass 18 % der auf Mobilgeräten bereitgestellten Videos dieselben Videos sind, die auf dem Desktop bereitgestellt werden. Dies ist ein „Problem“, das vor Jahren mit responsiven Bildern für Bilder gelöst wurde. Indem wir unterschiedlich große Videos auf unterschiedlich großen Geräten bereitstellen, können wir sicherstellen, dass schöne Videos bereitgestellt werden, jedoch in einer Größe und Dimension, die für das Gerät sinnvoll sind.

MP4-Video-Bitrate

Die Bitrate des an das Gerät gelieferten Videos hat einen großen Einfluss darauf, wie gut das Video wiedergegeben wird. Die HTTP-Archivtests werden auf einer 3G-Verbindung mit einer Download-Geschwindigkeit von 1,6 MBPS ausgeführt. Zur Wiedergabe (ohne Stocken) muss der Download schneller sein als die Wiedergabe. Lassen Sie uns 80 % der verfügbaren Bitrate für Videodateien bereitstellen (1,3 MBPS). 47 % der Videos in der Stichprobe haben eine Bitrate von über 1,3 MBPS, was bedeutet, dass diese Videos, wenn sie über eine 3G-Verbindung abgespielt werden, mit größerer Wahrscheinlichkeit ins Stocken geraten – was zu unzufriedenen Kunden führt. 27 % der Videos haben eine Bitrate von mehr als 2,5 MBPS, 10 % sind höher als 5 MBPS und 35 der Videos, die auf Mobilgeräten bereitgestellt werden, haben eine Bitrate von > 10 MBPS. Es ist unwahrscheinlich, dass diese größeren Videos bei vielen Verbindungen – fest oder mobil – abgespielt werden, ohne dass sie ins Stocken geraten.

Was zu höheren Bitraten führt

Größere Videos haben tendenziell eine höhere Bitrate, da Videos mit größeren Dimensionen viel mehr Daten benötigen, um die zusätzlichen Pixel auf dem Gerät zu füllen. Ein Querverweis der Bitrate jedes Videos auf die Breite bestätigt dies: Videos mit einer Breite von 1280 (orange) und 1920 (grau) haben eine viel breitere Verteilung der Bitraten (mehr Datenpunkte rechts im Diagramm). Die gelb markierte Spalte zeigt die 136 Videos mit einer Breite von 1920 und einer Bitrate zwischen 10-11 MBPS.

Visualisieren wir nur die Videos über 1,6 MBPS, wird deutlich, dass die höheren Bildschirmauflösungen (1280 und 1920) für die höherbitratigen Videos verantwortlich sind.

MP4: HTTP vs. HTTPS

HTTP2 hat die Bereitstellung von Inhalten mit Multiplex-Verbindungen neu definiert – wobei nur eine Verbindung pro Server erforderlich ist. Bietet HTTP2 für große Dateien wie Videos eine sinnvolle Verbesserung der Inhaltsbereitstellung? Wenn wir uns die Statistiken aus dem HTTP-Archiv ansehen:

Wenn wir die 116.000 Facebook-Videos (alle über HTTP2 gesendet) auslassen, sehen wir, dass es sich um eine 50:50-Aufteilung zwischen HTTP 1.1 und HTTP2 handelt. HTTP1.1 kann jedoch HTTPS verwenden, und wenn wir nach HTTPS-Nutzung filtern, stellen wir fest, dass 81 % der Videostreams über HTTPS gesendet werden, wobei HTTP2 etwas häufiger verwendet wird als HTTPS1.1 (41 %:36 %).

Wie Sie sehen können, ist der Vergleich der Geschwindigkeit der HTTP- und HTTP2-Videobereitstellung noch in Arbeit.

HLS-Video-Streaming

Video-Streaming mit adaptiver Bitrate ist ein idealer Weg, um Videos an den Endbenutzer zu liefern. Es werden mehrere Versionen jedes Videos mit unterschiedlichen Abmessungen und Bitraten erstellt. Die Liste der verfügbaren Streams wird dem Wiedergabegerät präsentiert, und der Videoplayer auf dem Gerät kann basierend auf der Größe des Gerätebildschirms und den verfügbaren Netzwerkbedingungen den am besten geeigneten Stream auswählen. Es gibt 1.065 Manifestdateien (und 14k-Videostreamdateien) im HTTP-Archivdatensatz, den ich untersucht habe.

Videostream-Wiedergabe

Eine wichtige Kennzahl beim Video-Streaming ist, dass das Video so schnell wie möglich startet. Während die Manifestdatei eine Liste der verfügbaren Streams enthält, hat der Player zu Beginn der Wiedergabe keine Ahnung von der verfügbaren Bandbreite des Netzwerks. Um mit dem Streamen zu beginnen, und da der Spieler einen Stream auswählen muss, wählt er normalerweise den ersten in der Liste. Um einen schnellen Videostart zu ermöglichen, ist es wichtig, den richtigen Stream oben in Ihrer Manifestdatei zu platzieren.

Hinweis : Die Verwendung der Chrome Network Info API zum spontanen Generieren von Manifestdateien kann eine gute Möglichkeit sein, Videoinhalte beim Start schnell zu optimieren.

Eine Möglichkeit, um sicherzustellen, dass das Video schnell startet, besteht darin, mit dem Videosegment mit der niedrigsten Qualität zu beginnen, da der Download am schnellsten ist. Die anfängliche Videoqualität kann verpixelt sein, aber da der Player die Netzwerkqualität besser versteht, kann er sich schnell auf einen angemesseneren (hoffentlich qualitativ hochwertigeren) Videostream einstellen. Schauen wir uns vor diesem Hintergrund die anfänglichen Stream-Bitraten im HTTP-Archiv an.

Die rote Linie im obigen Diagramm bezeichnet 1,5 MBPS (denken Sie daran, dass mobile Tests mit 1,6 MBPS durchgeführt werden und nicht nur Videoinhalte heruntergeladen werden). Wir sehen, dass 30,5 % aller Streams (alles links von der Linie) mit einer anfänglichen Bitrate von mehr als 1,5 MBPS beginnen (und daher wahrscheinlich nicht über eine 3G-Verbindung wiedergegeben werden), 17 % beginnen über 2 MBPS.

Was passiert also, wenn der Videodownload langsamer ist als die tatsächliche Wiedergabe des Videos? Anfänglich wird der Player versuchen, die Dateien mit (zu) großer Bitrate herunterzuladen, aber basierend auf der Download-Geschwindigkeit erkennt er das Problem. Der Player wechselt dann zum Herunterladen eines Videos mit niedrigerer Bitrate, sodass der Download schneller ist als die Wiedergabe. Das Problem besteht darin, dass der anfängliche Download-Versuch einige Zeit in Anspruch nimmt und das Hinzufügen einer Verzögerung zum Start der Videowiedergabe dazu führt, dass der Kunde aufhört.

Wir können uns auch die gängigsten Bitraten von .ts -Dateien (die Dateien mit Videoinhalten) ansehen, um zu sehen, welche Bitraten am Ende auf das Handy heruntergeladen werden. Diese Daten umfassen die anfänglichen Bitraten und alle nachfolgenden Dateien, die während des WebPageTest-Laufs heruntergeladen wurden:

Wir können zwei Hauptgruppen von Video-Streaming-Bitraten sehen (100-300 KBPS und eine breitere Spitze von 300-1.000 MBPS). Hier würden wir erwarten, dass Streams erscheinen, da die Netzwerkgeschwindigkeit auf 1,6 MBPS begrenzt ist.

Beim Vergleich der Daten mit dem Desktop ist Mobile bei den niedrigeren Bitraten eindeutig höher, und Desktop-Streams haben hohe Spitzen in den Bereichen 500-600 und 800-900 KBPS, die bei Mobile nicht zu sehen sind.

Wenn wir die anfänglich beobachteten Bitraten (blau) mit den tatsächlich heruntergeladenen Dateien vergleichen, wird deutlich, dass die Bitrate für Mobilgeräte im Allgemeinen während der Stream-Wiedergabe abnimmt, was darauf hindeutet, dass eine Verringerung der anfänglichen Bitrate für Videostreams die Leistung des Videostarts verbessern und Verzögerungen verhindern kann in der frühen Wiedergabe des Videos. Desktop-Video scheint ebenfalls abzunehmen, aber es ist auch möglich, dass einige Videos zu höheren Wiedergabegeschwindigkeiten wechseln.

Fazit

Videoinhalte im Web erhöhen die Kundenbindung und -zufriedenheit. Den gleichen Effekt haben Seiten, die schnell geladen werden. Das Hinzufügen von Videos zu Ihrer Website verlangsamt die Renderingzeit der Seite, was ein Gleichgewicht zwischen der gesamten Seitenlast und dem Videoinhalt erforderlich macht. Um die Größe Ihres Videoinhalts zu reduzieren, stellen Sie sicher, dass Sie über Versionen verfügen, die für die Abmessungen von Mobilgeräten geeignet sind, und verwenden Sie nach Möglichkeit kürzere Videos.

Wenn die Wiedergabe Ihrer Videos nicht unbedingt erforderlich ist, folgen Sie dem Pfad von YouTube und Vimeo – laden Sie alle erforderlichen Teile herunter, um für die Wiedergabe bereit zu sein, aber laden Sie keine Videosegmente tatsächlich herunter, bis der Benutzer auf „Play“ drückt. Schließlich – wenn Sie Videos streamen – beginnen Sie mit der niedrigsten Qualitätseinstellung, um eine schnelle Videowiedergabe zu gewährleisten.

In meinem nächsten Videobeitrag werde ich diese allgemeinen Erkenntnisse aufgreifen und anhand von Beispielen näher darauf eingehen, wie potenzielle Probleme gelöst werden können.