أداء الفيديو

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

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

التضمينات

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

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

عروض توضيحية حول الفيديوهات

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

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

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