تشغيل الفيديو على الويب: الوضع الحالي للفيديو (الجزء الأول)

يتزايد استخدام الفيديو على الويب حيث تصبح الأجهزة والشبكات أسرع وأكثر قدرة على التعامل مع محتوى الفيديو. تظهر الأبحاث أن المواقع التي تحتوي على مقاطع فيديو تزيد التفاعل بنسبة 80٪. تتمتع مواقع التجارة الإلكترونية التي تحتوي على فيديو بتحويلات أعلى من المواقع التي لا تحتوي على فيديو.

لكن إضافة الفيديو يمكن أن يكون له تكلفة. تضيف مقاطع الفيديو (كونها ملفات أكبر حجمًا) إلى وقت تحميل الصفحة ، ويظهر بحث الأداء أن الصفحات الأبطأ لها تأثير معاكس لانخراط العملاء وتحويلاتهم. في هذا المقال ، سأفحص المقاييس المهمة لتحقيق التوازن بين الأداء وتشغيل الفيديو على الويب ، وإلقاء نظرة على كيفية استخدام الفيديو اليوم ، وتقديم أفضل الممارسات لتقديم الفيديو على الويب.

تتمثل إحدى الخطوات الأولى لتحسين رضا العملاء في تسريع وقت تحميل الصفحة . أظهرت Google أن صفحات الجوال التي يستغرق تحميلها أكثر من ثلاث ثوانٍ تفقد 53٪ من جمهورها بسبب التخلي عنها. وجدت دراسات أخرى أنه عند تحسين أداء الموقع وزيادة الاستخدام والمبيعات.

ستؤدي إضافة مقطع فيديو إلى موقع ويب إلى زيادة المشاركة ، ولكنها قد تؤدي أيضًا إلى إبطاء وقت التحميل بشكل كبير ، لذلك من الواضح أنه يجب إيجاد توازن بين إضافة مقاطع الفيديو إلى موقعك وعدم التأثير على وقت التحميل بشكل كبير.

القراءة الموصى بها : قائمة مراجعة أداء الواجهة الأمامية 2018 [PDF ، صفحات Apple]

فيديو على الويب اليوم

لفحص حالة الفيديو على الويب اليوم ، سأستخدم بيانات من أرشيف HTTP. يستخدم أرشيف HTTP WebPageTest لفحص أداء 1.2 مليون موقع ويب للجوال وسطح المكتب كل أسبوعين ، ثم يخزن البيانات في Google BigQuery.

عادةً ما يتم تحديد الصفحة الرئيسية فقط لكل مجال (بمعنى أنه يتم تشغيل www.cnn.com ، ولكن لا يتم تشغيل www.cnn.com/politics ). يمكن أن تساعدنا هذه البيانات في فهم كيفية تأثير استخدام الفيديو على الويب في أداء مواقع الويب. يتم تشغيل اختبارات الهاتف المحمول على Motorola G4 الذي تمت محاكاته مع اتصال إنترنت 3G (سرعة 1.6 ميجابت في الثانية ، 768 كيلوبايت في الثانية ، 300 مللي ثانية RTT) ، وتشغل اختبارات سطح المكتب Chrome على اتصال كبل (5 ميجابت في الثانية لأسفل ، 1 ميجابت في الثانية ، 28 مللي ثانية RTT). سأستخدم مجموعة البيانات اعتبارًا من 1 أغسطس 2018.

المواقع التي تقوم بتنزيل الفيديو

كخطوة أولى لدراسة المواقع بالفيديو ، يجب أن ننظر إلى المواقع التي تقوم بتنزيل ملفات الفيديو عند تحميل الصفحة. يوجد 35 ألف موقع للجوال و 55 ألف موقع لسطح المكتب مع تنزيلات لملفات الفيديو في مجموعة بيانات HTTP Archive (تمثل 3٪ من جميع مواقع الجوال و 4.5٪ من جميع مواقع سطح المكتب). بمقارنة سطح المكتب بالجوال ، وجدنا أن 30 ألفًا من هذه المواقع تحتوي على مقاطع فيديو على كل من الأجهزة المحمولة وسطح المكتب (مع ترك حوالي 5800 موقع على الهاتف المحمول بدون فيديو على سطح المكتب).

يبلغ وزن صفحة الجوّال المتوسطة مع الفيديو 7 ميجا بايت (583٪ أكبر من 1.2 ميجا بايت تم العثور عليها لموقع الجوال المتوسط). لم يتم حساب هذه الزيادة بالكامل عن طريق الفيديو وحده (2.5 ميجا بايت). نظرًا لأن المواقع التي تحتوي على مقاطع فيديو تميل إلى أن تكون أكثر ثراءً بالميزات وجذابة بصريًا ، فإنها تستخدم أيضًا المزيد من الصور (يحتوي الموقع المتوسط ​​على أكثر من 1 ميغابايت) و CSS و Javascript. يوضح الجدول أدناه أيضًا أن متوسط ​​SpeedIndex (قياس مدى سرعة ظهور المحتوى على الشاشة) للمواقع التي تحتوي على فيديو أبطأ بمقدار 3.7 ثوانٍ من موقع جوّال نموذجي ، ويستغرق تحميله 11.5 ثانية.

يوضح هذا بوضوح أن المواقع الأكثر تفاعلية والتي تحتوي على محتوى فيديو تستغرق وقتًا أطول (في المتوسط) لتحميل تلك المواقع بدون فيديو. لكن هل يمكننا تسريع تسليم الفيديو؟ ما الذي يمكن أن نتعلمه أيضًا من البيانات المتوفرة؟

استضافة الفيديو

عند فحص تسليم الفيديو ، هل يتم تقديم الملفات من CDN أو موفر الفيديو ، أم أن المطورين يستضيفون مقاطع الفيديو على خوادمهم؟ من خلال فحص مجال مقاطع الفيديو المقدمة على الهاتف المحمول ، وجدنا أنه يتم استخدام 12163 نطاقًا لتقديم الفيديو ، مما يشير إلى أن حوالي 49٪ من المواقع تقدم ملفات الفيديو الخاصة بها. إذا قمنا بتكديس المجالات حسب التردد ، فيمكننا تحديد حلول استضافة الفيديو الأكثر شيوعًا:

تتصدر شبكات CDN والمجالات مثل Facebook و Akamai و Google و Cloudinary و AWS و Cloudfront الطريق ، وهذا ليس مفاجئًا. ومع ذلك ، من المثير للاهتمام رؤية YouTube و Vimeo حتى الآن في القائمة ، حيث إنهما من أشهر مواقع مشاركة الفيديو.

لنلق نظرة على تسليم مقاطع الفيديو على YouTube و Vimeo و Facebook:

يوتيوب فيديو مهم

بشكل افتراضي ، لا تقوم الصفحات التي تحتوي على فيديو YouTube مضمن في الواقع بتنزيل أي ملفات فيديو - فقط نصوص وصورة عنصر نائب ، لذلك لا تظهر في البحث عن مواقع تحتوي على تنزيلات فيديو. أحد تنزيلات Javascript لمشغل فيديو YouTube هو www-embed-player.js . عند البحث عن هذا الملف ، نجد 69 ألف مثيل على 66647 موقعًا للجوال. تحتوي هذه المواقع على مؤشر SpeedIndex متوسط ​​يبلغ 10،700 ، واستخدام بيانات يبلغ 3.31 ميجابايت - أفضل من المواقع التي تم تنزيل الفيديو بها ، ولكنها لا تزال أبطأ من المواقع التي لا تحتوي على فيديو على الإطلاق. ترتبط الزيادة في البيانات ارتباطًا مباشرًا بمزيد من الصور وجافا سكريبت (كما هو موضح أدناه).

أهمية فيديو Vimeo

يوجد 14148 طلبًا لمقاطع فيديو Vimeo في أرشيف HTTP لتشغيل الفيديو. أرى فقط 5848 طلبًا لملف player.js (بالتنسيق https://f.vimeocdn.com/p/3.2.0/js/player.js - مما يعني أنه ربما هناك العديد من مقاطع الفيديو على صفحة واحدة ، أو ربما موقع آخر لملف مشغل الفيديو. هناك 17 نسخة مختلفة من المشغل موجودة في أرشيف HTTP ، أشهرها 3.1.5 و 3.1.4:

لا يبدو أن هناك أي مكاسب في الأداء لأي مكتبة Vimeo - كل الصفحات لها أوقات تحميل متشابهة.

ملاحظة : يعد استخدام www-embed-player.js لموقع YouTube أو https://f.vimeocdn.com/p/*/js/player.js لـ Vimeo بصمات أصابع جيدة للمتصفحات ذات ذاكرة التخزين المؤقت النظيفة ، ولكن إذا سبق للعميل فعل ذلك تصفح موقعًا يحتوي على مقطع فيديو مضمن ، فقد يكون هذا الملف موجودًا بالفعل في ذاكرة التخزين المؤقت للمتصفح ، وبالتالي لن تتم إعادة طلبه. ولكن ، كما لاحظ آندي ديفيز مؤخرًا ، هذا ليس افتراضًا آمنًا.

عدد مقاطع الفيديو على Facebook

من المدهش أنه في بيانات أرشيف HTTP ، فإن 67٪ من جميع طلبات الفيديو تأتي من شبكة CDN الخاصة بـ Facebook. اتضح أنه على Chrome ، تقوم عناصر واجهة مستخدم Facebook التابعة لجهات خارجية بتنزيل 30٪ من جميع مقاطع الفيديو المنشورة داخل الأداة (لا يحدث هذا التأثير في Safari أو في Firefox.). اتضح أن عنصر واجهة مستخدم تابع لجهة خارجية تمت إضافته ببضعة سطور من التعليمات البرمجية مسؤول عن 57٪ من إجمالي الفيديو الذي يتم مشاهدته في أرشيف HTTP.

أنواع ملفات الفيديو

غالبية مقاطع الفيديو على الصفحات التي تم اختبارها هي ملفات Mp4. إذا نظرنا إلى جميع مقاطع الفيديو التي تم تنزيلها (باستثناء تلك الموجودة في Facebook) ، فسنحصل على العرض التالي:

من الملفات التي ليس لها امتداد - 10 آلاف هي ملفات googlevideo.com .

ماذا يمكن أن نتعلم عن هذه الملفات؟ دعونا ننظر في كل نوع من أنواع الملفات لمعرفة المزيد حول المحتوى الذي يتم تسليمه.

لقد استخدمت FFPROBE للاستعلام عن ملفات MP4 الفريدة التي يبلغ حجمها 34 ألفًا ، وحصلت على بيانات لـ 14700 مقطع فيديو (تم تغيير العديد من مقاطع الفيديو أو إزالتها في غضون 3 أسابيع من التقاط أرشيف HTTP إلى التحليل).

بيانات فيديو MP4

من بين 14.7 ألف مقطع فيديو في مجموعة البيانات ، يحتوي 8.564 مقطعًا صوتيًا (58٪). لا تتطلب مقاطع الفيديو القصيرة التي يتم تشغيلها تلقائيًا أو مقاطع الفيديو التي يتم تشغيلها في الخلفية صوتًا ، لذا فإن تجريد المسار الصوتي يعد طريقة رائعة لتقليل حجم الملف (وتسريع تسليم) مقاطع الفيديو الخاصة بك.

الجانب التالي الأكثر أهمية لتنزيل مقطع فيديو سريعًا هو الأبعاد. كلما كانت الأبعاد أكبر (وفي حالة الفيديو ، هناك ثلاثة أبعاد يجب مراعاتها: width × height × time ) ، سيكون حجم ملف الفيديو أكبر.

مدة الفيديو MP4

معظم مقاطع الفيديو البالغ عددها 14 ألفًا التي تمت دراستها قصيرة: متوسط ​​المدة (النسبة المئوية الخمسون) هو 21 ثانية. ومع ذلك ، فإن 10٪ من مقاطع الفيديو التي شملها الاستطلاع تزيد مدتها عن دقيقتين. سيتم تقسيم حالات الاستخدام هنا بالطبع ، ولكن بالنسبة إلى حلقات الفيديو القصيرة أو مقاطع الفيديو الخلفية - ستستخدم مقاطع الفيديو الأقصر بيانات أقل ويتم تنزيلها بشكل أسرع.

عرض الفيديو MP4 والارتفاع

تحدد أبعاد الفيديو على الشاشة عدد وحدات البكسل التي يجب أن يستخدمها كل إطار. يوضح الرسم البياني أدناه عروض الفيديو المختلفة التي يتم عرضها على الجهاز المحمول. (كملاحظة ، تبلغ شاشة Moto G4 حجم شاشة 1080 × 1920 ، ويتم عرض جميع الصفحات في الوضع الرأسي).

كما تظهر البيانات ، فإن أكثر عرضين للفيديو استخدامًا أكبر بكثير من شاشة G4 (عند الاحتفاظ بها في الوضع الرأسي). يتم تقديم 49٪ كاملة من جميع مقاطع الفيديو بعرض أكبر من 1080 بكسل عرضًا. يحتوي Alcatel 1x ، جهاز Android Go الجديد ، على شاشة 480 × 960 بكسل. 77٪ من مقاطع الفيديو التي يتم تسليمها في مجموعة العينات أكبر من 480 بكسل.

مع تناقص أبعاد مقاطع الفيديو ، يقل حجم الملفات (وبالتالي وقت تسليم الفيديو). هذا هو السبب الأساسي لتغيير حجم مقاطع الفيديو.

لماذا هذه الفيديوهات كبيرة جدا؟ إذا ربطنا مقاطع الفيديو المعروضة على الهاتف المحمول وسطح المكتب ، فسنجد أن 18٪ من مقاطع الفيديو المعروضة على الهاتف المحمول هي نفس مقاطع الفيديو المعروضة على سطح المكتب. هذه "مشكلة" تم حلها للصور منذ سنوات باستخدام الصور المتجاوبة. من خلال تقديم مقاطع فيديو بأحجام مختلفة إلى أجهزة مختلفة الأحجام ، يمكننا ضمان تقديم مقاطع فيديو جميلة ، ولكن بحجم وأبعاد مناسبة للجهاز.

معدل نقل بيانات الفيديو MP4

يلعب معدل البت للفيديو الذي يتم تسليمه إلى الجهاز تأثيرًا كبيرًا على مدى جودة تشغيل الفيديو. يتم تشغيل اختبارات HTTP Archive على اتصال 3G بسرعة تنزيل تبلغ 1.6 ميجابايت في الثانية. للتشغيل (بدون توقف) ، يجب أن يكون التنزيل أسرع من التشغيل. دعنا نوفر 80٪ من معدل البت المتاح لملفات الفيديو (1.3 ميجا بايت في الثانية). 47٪ من مقاطع الفيديو في مجموعة العينات لديها معدل بت يزيد عن 1.3 ميجابت في الثانية ، مما يعني أنه عند تشغيل مقاطع الفيديو هذه على اتصال 3G ، فمن المرجح أن تتوقف - مما يؤدي إلى عملاء غير سعداء. 27٪ من مقاطع الفيديو ذات معدل بت أعلى من 2.5 ميجابت في الثانية ، و 10٪ أعلى من 5 ميجابت في الثانية ، و 35 من مقاطع الفيديو التي يتم عرضها على الأجهزة المحمولة ذات معدل بت> 10 ميجابت في الثانية. من غير المحتمل أن يتم تشغيل مقاطع الفيديو الكبيرة هذه دون توقف على العديد من الاتصالات - الثابتة أو المتنقلة.

ما الذي يؤدي إلى ارتفاع معدل البتات

تميل مقاطع الفيديو الأكبر حجمًا إلى حمل معدل بت أكبر ، حيث تتطلب مقاطع الفيديو الأكبر حجمًا بيانات أكثر بكثير لملء وحدات البكسل الإضافية على الجهاز. تؤكد الإشارة التبادلية لمعدل البت لكل فيديو إلى العرض على هذا: مقاطع الفيديو ذات العرض 1280 (برتقالي) و 1920 (رمادي) لها توزيع أوسع لمعدلات البت (المزيد من البيانات تشير إلى اليمين في الرسم البياني). يشير العمود المميز باللون الأصفر إلى 136 مقطع فيديو بعرض 1920 ، ومعدل بت بين 10-11 ميجابايت في الثانية.

إذا تصورنا فقط مقاطع الفيديو التي يزيد حجمها عن 1.6 ميجابايت في الثانية ، يصبح من الواضح أن دقة الشاشة الأعلى (1280 و 1920) مسؤولة عن مقاطع الفيديو ذات معدل البت الأعلى.

MP4: HTTP مقابل HTTPS

أعاد HTTP2 تعريف تسليم المحتوى باتصالات متعددة الإرسال - حيث يلزم اتصال واحد فقط لكل خادم. بالنسبة للملفات الكبيرة مثل الفيديو ، هل يوفر HTTP2 تحسينًا ذا مغزى لتسليم المحتوى؟ إذا نظرنا إلى الإحصائيات من أرشيف HTTP:

بحذف مقاطع فيديو Facebook البالغ عددها 116 ألفًا (جميعها مرسلة عبر HTTP2) ، نرى أنها تقسم بنسبة 50:50 تقريبًا بين HTTP 1.1 و HTTP2. ومع ذلك ، يمكن لـ HTTP1.1 استخدام HTTPS ، وعندما نقوم بالتصفية لاستخدام HTTPS ، نجد أن 81٪ من تدفقات الفيديو يتم إرسالها عبر HTTPS ، مع استخدام HTTP2 أكثر بقليل من HTTPS1.1 (41٪: 36٪)

كما ترى ، فإن مقارنة سرعة توصيل فيديو HTTP و HTTP2 هو عمل قيد التقدم.

دفق الفيديو HLS

يعد دفق الفيديو باستخدام معدل البت التكيفي طريقة مثالية لتقديم الفيديو إلى المستخدم النهائي. تم إنشاء إصدارات متعددة من كل فيديو بأبعاد ومعدلات بت مختلفة. يتم تقديم قائمة التدفقات المتاحة إلى جهاز التشغيل ، ويمكن لمشغل الفيديو على الجهاز اختيار البث الأكثر ملاءمة بناءً على حجم شاشة الجهاز وظروف الشبكة المتاحة. يوجد 1065 ملف بيان (وملفات دفق فيديو 14 كيلو) في مجموعة بيانات أرشيف HTTP التي قمت بفحصها.

تشغيل دفق الفيديو

أحد المقاييس الرئيسية في دفق الفيديو هو أن يبدأ الفيديو بأسرع ما يمكن. بينما يحتوي ملف البيان على قائمة بالتدفقات المتاحة ، فإن المشغل ليس لديه فكرة عن النطاق الترددي المتاح للشبكة في بداية التشغيل. لبدء البث ، ولأن اللاعب يجب أن يختار دفقًا ، فإنه عادةً ما يختار أول بث في القائمة. لتسهيل بدء تشغيل الفيديو بسرعة ، من المهم وضع الدفق الصحيح أعلى ملف البيان الخاص بك.

ملاحظة : قد يكون استخدام Chrome Network Info API لإنشاء ملفات البيانات أثناء التنقل طريقة جيدة لتحسين محتوى الفيديو بسرعة عند بدء التشغيل.

تتمثل إحدى طرق ضمان بدء تشغيل الفيديو بسرعة في البدء بأدنى مقطع فيديو جودة ، حيث سيكون التنزيل هو الأسرع. قد تكون جودة الفيديو الأولية منقطة ، ولكن نظرًا لأن المشغل يفهم جودة الشبكة بشكل أفضل ، فيمكنه التكيف بسرعة مع دفق فيديو أكثر ملاءمة (ونأمل أن يكون بجودة أعلى). مع وضع ذلك في الاعتبار ، دعونا نلقي نظرة على معدلات بت البث الأولية في أرشيف HTTP.

يشير الخط الأحمر في الرسم البياني أعلاه إلى 1.5 ميجا بايت في الثانية (تذكر أن اختبارات الأجهزة المحمولة يتم تشغيلها بسرعة 1.6 ميجا بايت في الثانية ، ولا يتم تنزيل محتوى الفيديو فقط). نرى 30.5٪ من جميع التدفقات (كل شيء على يسار الخط) تبدأ بمعدل بت أولي أعلى من 1.5 ميجابايت في الثانية (وبالتالي من غير المحتمل أن يتم التشغيل على اتصال 3G) يبدأ 17٪ أعلى من 2 ميجابت في الثانية.

إذن ماذا يحدث عندما يكون تنزيل الفيديو أبطأ من التشغيل الفعلي للفيديو؟ في البداية ، سيحاول المشغل تنزيل ملفات معدل البت الكبيرة (جدًا) ، ولكن بناءً على سرعة التنزيل ، سيدرك المشكلة. سيتحول المشغل بعد ذلك إلى تنزيل فيديو بمعدل بت أقل ، بحيث يكون التنزيل أسرع من التشغيل. تكمن المشكلة في أن محاولة التنزيل الأولية تستغرق وقتًا ، كما أن إضافة تأخير إلى بدء تشغيل الفيديو يؤدي إلى تخلي العميل عن ذلك.

يمكننا أيضًا إلقاء نظرة على معدلات البت الأكثر شيوعًا لملفات .ts (الملفات التي تحتوي على محتوى الفيديو) ، لمعرفة معدلات البت التي يتم تنزيلها في نهاية المطاف على الهاتف المحمول. تتضمن هذه البيانات معدلات البت الأولية وأي ملف لاحق تم تنزيله أثناء تشغيل WebPageTest:

يمكننا أن نرى مجموعتين رئيسيتين من معدلات بت دفق الفيديو (100-300 كيلو بايت في الثانية ، وذروة أوسع من 300-1000 ميجا بايت في الثانية). هذا هو المكان الذي نتوقع ظهور التدفقات فيه ، نظرًا لأن سرعة الشبكة محددة بـ 1.6 ميجابت في الثانية.

بمقارنة البيانات بسطح المكتب ، من الواضح أن الهاتف المحمول أعلى بمعدلات بت أقل ، وتدفقات سطح المكتب لها ذروات عالية في نطاقات 500-600 و 800-900 كيلوبت في الثانية ، والتي لا تظهر في الهاتف المحمول.

عندما نقارن معدلات البت الأولية التي تمت ملاحظتها (باللون الأزرق) مع الملفات الفعلية التي تم تنزيلها ، فمن الواضح جدًا أن معدل البت للجوال ينخفض ​​عمومًا أثناء تشغيل البث ، مما يشير إلى أن خفض معدل البت الأولي لتدفقات الفيديو قد يحسن أداء بدء تشغيل الفيديو ويمنع التوقف في التشغيل المبكر للفيديو. يبدو أيضًا أن فيديو سطح المكتب يتناقص ، ولكن من الممكن أيضًا أن ينتقل بعض الفيديو إلى سرعات تشغيل أعلى.

خاتمة

يزيد محتوى الفيديو على الويب من مشاركة العملاء ورضاهم. الصفحات التي يتم تحميلها بسرعة لها نفس التأثير. ستؤدي إضافة الفيديو إلى موقع الويب الخاص بك إلى إبطاء وقت عرض الصفحة ، مما يستلزم التوازن بين إجمالي تحميل الصفحة ومحتوى الفيديو. لتقليل حجم محتوى الفيديو الخاص بك ، تأكد من أن لديك إصدارات بحجم مناسب لأبعاد الجهاز المحمول ، واستخدم مقاطع فيديو أقصر عندما يكون ذلك ممكنًا.

إذا لم يكن تشغيل مقاطع الفيديو الخاصة بك ضروريًا ، فاتبع مسار YouTube و Vimeo - قم بتنزيل جميع القطع المطلوبة لتكون جاهزة للتشغيل ، ولكن لا تقم بالفعل بتنزيل أي مقاطع فيديو حتى يضغط المستخدم على التشغيل. أخيرًا - إذا كنت تقوم ببث الفيديو - ابدأ بإعداد أقل جودة لضمان تشغيل سريع للفيديو.

في رسالتي التالية على الفيديو ، سوف آخذ هذه النتائج العامة ، وأتعمق في كيفية حل المشكلات المحتملة بالأمثلة.