أداء الفيديو

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

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

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

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

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

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

تتضمّن إحدى طرق ضغط ملفات الفيديو استخدام 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 Observer، يمكنك إعداد صفحتك لتنزيل الفيديوهات فقط عندما تكون ضمن إطار العرض. يمكن أن تكون صورة poster عنصرًا نائبًا لصورة منخفضة الجودة، مثل الإطار الأول من الفيديو. بعد ظهور الفيديو في إطار العرض، يبدأ المتصفّح في تنزيله. يمكن أن يؤدي ذلك إلى تحسين أوقات تحميل المحتوى ضمن إطار العرض الأوّلي. من ناحية أخرى، عند استخدام صورة poster كصورة autoplay، يتلقّى المستخدمون صورة لا تظهر إلا لفترة وجيزة إلى أن يتم تحميل الفيديو ويبدأ تشغيله.

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

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

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

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

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

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

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

التحميل الكسول

loading=lazy هي سمة جديدة نسبيًا تمت إضافتها إلى "أداء الفيديو". على غرار التحميل الكسول للصور على مستوى المتصفّح والتحميل الكسول لإطارات iframe، تتيح هذه السمة التحميل الكسول للفيديوهات عند تنزيلها باستخدام poster وpreload.

يمكنك استخدام السمة poster مع preload="none" أو preload="metadata" لتجنُّب تنزيل الفيديو تلقائيًا، كما أنّ السمة loading=lazy تؤجّل تنزيل صورة الملصق والبيانات الوصفية إلى أن يصبح الفيديو في إطار العرض أو على وشك الظهور فيه.

التضمينات

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

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

فيديوهات توضيحية

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

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

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