أداء الفيديو

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

ومع ذلك، فإن الصور ليست نوع الوسائط الوحيد الذي يشيع مشاهدته على الويب. تعد مقاطع الفيديو من أنواع الوسائط الشائعة التي يتم استخدامها غالبًا على صفحات الويب. قبل الاطّلاع على بعض التحسينات المحتمَلة، من المهم أولاً فهم آلية عمل عنصر <video>.

ملفات مصدر الفيديو

عند التعامل مع ملفات الوسائط، يُعرف الملف الذي تتعرّف عليه على نظام التشغيل على جهازك (.mp4 و.webm وغير ذلك) باسم حاوية. وتحتوي الحاوية على مصدر بيانات واحد أو أكثر. وفي معظم الحالات، قد يكون الحدث هو بث الفيديو والصوت.

يمكنك ضغط كل بث باستخدام برنامج ترميز، على سبيل المثال، يمكن أن تكون حاوية video.webm حاوية WebM تحتوي على بث فيديو يتم ضغطه باستخدام VP9، وبثًا صوتيًا مضغطًا باستخدام Vorbis.

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

من بين طرق ضغط ملفات الفيديو استخدام أداة FFmpeg:

ffmpeg -i input.mov output.webm

إنّ الأمر السابق، على الرغم من أنّه أساسي عند استخدام FFmpeg، يأخذ ملف input.mov ويخرج ملف output.webm باستخدام خيارات FFmpeg التلقائية. سيؤدي الأمر السابق إلى إخراج ملف فيديو أصغر حجمًا يعمل في جميع المتصفحات الحديثة. قد يساعدك تعديل الفيديو أو خيارات الصوت في FFmpeg في تصغير حجم ملف الفيديو بشكل أكبر. على سبيل المثال، إذا كنت تستخدم عنصر <video> لاستبدال ملف GIF، عليك إزالة المقطع الصوتي:

ffmpeg -i input.mov -an output.webm

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

تتوافق برامج الترميز، مثل H.264 وVP9، مع العلامة -crf، لكنّ استخدامها يعتمد على برنامج الترميز الذي تستخدمه. للمزيد من المعلومات، يمكنك الاطّلاع على معلومات حول عامل المعدّل الثابت لترميز الفيديوهات بتنسيق H.264، بالإضافة إلى الجودة الثابتة عند ترميز الفيديوهات بتنسيق VP9.

تنسيقات متعددة

عند التعامل مع ملفات الفيديو، يكون تحديد تنسيقات متعددة بمثابة عنصر احتياطي للمتصفّحات التي لا تتوافق مع جميع التنسيقات الحديثة.

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

بما أنّ جميع المتصفحات الحديثة تتوافق مع برنامج ترميز H.264، يمكن استخدام تنسيق MP4 كإجراء احتياطي للمتصفّحات القديمة. يمكن أن يستخدم إصدار WebM برنامج ترميز AV1 الأحدث، وهو برنامج غير متاح على نطاق واسع بعد، أو برنامج ترميز VP9 السابق، ويكون متوافقًا بشكل أفضل مع برنامج AV1، ولكنّه لا يعمل عادةً مع ضغط AV1.

السمة poster

تتم إضافة صورة ملصق الفيديو باستخدام السمة poster على العنصر <video>، لإطلاع المستخدمين على محتوى الفيديو قبل بدء التشغيل:

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

التشغيل التلقائي

وفقًا لأرشيف HTTP، تتضمّن 20% من الفيديوهات على الويب السمة autoplay. يتم استخدام autoplay عند تشغيل فيديو فورًا، مثلاً عند استخدامه كخلفية فيديو أو كبديل لملفات GIF المتحرّكة.

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

إذا كان يجب على موقعك الإلكتروني تشغيل الفيديو تلقائيًا، يمكنك استخدام السمة autoplay مباشرةً في العنصر <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>

من خلال الجمع بين السمة poster وIntersection Monitorer API، يمكنك ضبط صفحتك على تنزيل الفيديوهات فقط عندما تكون ضمن إطار العرض. قد تكون صورة poster عنصرًا نائبًا لصورة ذات جودة منخفضة، مثل الإطار الأول من الفيديو. عند ظهور الفيديو في إطار العرض، يبدأ المتصفح في تنزيل الفيديو. قد يؤدي ذلك إلى تحسين أوقات تحميل المحتوى داخل إطار العرض الأولي. وعلى الجانب السلبي، عند استخدام صورة poster في autoplay، يتلقى المستخدمون صورة يتم عرضها لفترة وجيزة فقط إلى أن يتم تحميل الفيديو ويبدأ تشغيله.

التشغيل الذي يبدأه المستخدم

بشكل عام، يبدأ المتصفح في تنزيل ملف فيديو فور اكتشاف محلل HTML العنصر <video>. إذا كانت لديك عناصر <video> يبدأ فيها المستخدم تشغيل الفيديو، هذا يعني أنّك على الأرجح لا تريد بدء تنزيل الفيديو إلى أن يتفاعل المستخدم معه.

يمكنك التأثير في المحتوى الذي يتم تنزيله لموارد الفيديو باستخدام سمة العنصر <video> preload:

• وعند ضبط السياسة preload="none"، يجب إعلام المتصفّح بأنّه يجب عدم تحميل أي من محتوى الفيديو مسبقًا.
• يؤدي ضبط السمة preload="metadata" إلى جلب البيانات الوصفية للفيديو فقط، مثل مدة الفيديو، وربما معلومات سريعة أخرى.

إنّ ضبط preload="none" هو على الأرجح الحالة الأكثر رضاءً إذا كنت تحمِّل فيديوهات يحتاج المستخدمون إلى بدء التشغيل فيها.

ويمكنك تحسين تجربة المستخدم في هذه الحالة عن طريق إضافة صورة poster. يمنح ذلك المستخدم بعض السياق حول موضوع الفيديو. بالإضافة إلى ذلك، إذا كانت صورة الملصق هي عنصر LCP، يمكنك زيادة أولوية الصورة poster باستخدام التلميح <link rel="preload"> مع fetchpriority="high":

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

مواد العرض المضمّنة

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

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

عروض فيديو تجريبية

اختبِر معلوماتك

الخطوة التالية: تحسين خطوط الويب

بعد ذلك، في تغطيتنا لتحسين أنواع معينة من الموارد، تعد الخطوط. إنّ تحسين خطوط موقعك الإلكتروني هو أمر يتم تجاهله غالبًا، ولكن قد يكون له تأثير كبير في سرعة التحميل الإجمالية لموقعك الإلكتروني وفي مقاييس مثل LCP ومتغيّرات التصميم التراكمية (CLS).