تعرَّفت في الوحدة السابقة على بعض أساليب الأداء المتعلقة والصور، وهي نوع من الموارد المستخدمة على نطاق واسع على الويب والتي يمكن أن تستهلك معدل نقل بيانات كبير إذا لم يتم الاهتمام بتحسينها ومراعاة احتياجات المستخدم إطار العرض في الاعتبار.
ومع ذلك، فإن الصور ليست نوع الوسائط الوحيد الذي يتم عرضه على الويب بشكل شائع. الفيديوهات هي
نوع وسائط شائع آخر يُستخدم غالبًا على صفحات الويب. قبل النظر إلى بعض
للتحسينات المحتملة، من المهم أولاً فهم آلية عمل <video>
العنصر الصحيح.
ملفات مصدر الفيديو
عند التعامل مع ملفات الوسائط، فإن الملف الذي تتعرف عليه في نظام التشغيل
(.mp4 و.webm وغيرهما) تُعرف باسم الحاوية. تحتوي الحاوية على
أو أكثر من ساحات المشاركات. وفي معظم الحالات، يؤدّي ذلك إلى بث الفيديو والصوت.
يمكنك ضغط كل مجموعة بث باستخدام برنامج ترميز. على سبيل المثال، يمكن أن يكون video.webm
حاوية WebM تحتوي على بث فيديو مضغوط باستخدام VP9، ومقطع صوتي
مضغوطة باستخدام Vorbis.
يعد فهم الفرق بين الحاويات وبرامج الترميز أمرًا مفيدًا، لأنه يساعدك ذلك في ضغط ملفات الوسائط باستخدام معدل نقل بيانات أقل بكثير، الأمر الذي يؤدي بدوره إلى تقليل إجمالي عدد مرات تحميل الصفحات، وقد يؤدي أيضًا إلى تحسين سرعة عرض أكبر محتوى مرئي (LCP) في الصفحة، وهو مقياس يركّز على المستخدم أحد مؤشرات أداء الويب الأساسية الثلاثة.
تتضمن إحدى طرق ضغط ملفات الفيديو استخدام FFmpeg:
ffmpeg -i input.mov output.webm
الأمر السابق - على الرغم من أنه أساسي كما يحصل عند استخدام FFmpeg - يأخذ
يتم إنشاء ملف output.webm باستخدام ملف FFmpeg التلقائي بتنسيق input.mov.
الخيارات. ينتج عن الأمر السابق ملف فيديو أصغر حجمًا يمكن استخدامه في جميع
المتصفحات الحديثة. يمكنك تعديل الفيديو أو خيارات الصوت التي يقدّمها 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 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) في الصفحة. ومع ذلك، يمكنك التوصل إلى حل وسط من خلال عدم تحميل المحتوى المضمّن مباشرةً أثناء التحميل الأوّلي للصفحة، وبدلاً من ذلك أنشِئ عنصرًا نائبًا للتضمين الذي سيتم استبداله بالعنصر المضمَّن في الفيديو. عندما يتفاعل المستخدم معه.
عروض الفيديو التوضيحية
اختبِر معلوماتك
يشير ترتيب العناصر <source> داخل
لا يحدّد العنصر <video> الرئيسي
مورد الفيديو الذي يتم تنزيله في النهاية.
السمة poster للعنصر <video>
من معايير سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP).
التالي: تحسين خطوط الويب
الخطوة التالية في تغطيتنا لتحسين أنواع معيّنة من الموارد هي الخطوط. غالبًا ما يتم تجاهل تحسين خطوط موقعك الإلكتروني، ولكنه قد تؤثر بشكل كبير في سرعة التحميل الإجمالية لموقعك الإلكتروني، وقد تتضمن مقاييس مثل مثل LCP ومتغيّرات التصميم التراكمية (CLS).