كيفية تضمين مقاطع الفيديو في WordPress دون المساومة على سرعة الموقع [الدليل الكامل]

في السنوات الأخيرة ، أصبحت مقاطع الفيديو هي تنسيق الوسائط المفضل للعديد من المستخدمين. وتثبت الإحصائيات ذلك:

• يؤدي وضع الفيديو على الصفحة المقصودة إلى تحسين التحويل بنسبة 86٪ مقارنة بالصفحات النصية فقط. (Wishpond)
• 62٪ من المستهلكين يشاهدون مقاطع فيديو مراجعة المنتج قبل الشراء. (Business2Community)
• يبدأ 80٪ من العملاء "رحلة العميل" من خلال مشاهدة مقاطع الفيديو ذات العلامات التجارية على YouTube. (رؤى ذكية)

لكن في حين أن هذه الأرقام مذهلة ، فأنت بحاجة إلى معرفة شيء ما عن مقاطع الفيديو:

يمكن أن تؤثر سلبًا على أداء الويب الخاص بك.

لذلك عند إضافة واحدة إلى صفحتك ، يجب أن تحقق التوازن الصحيح بين الحجم والجودة والسرعة.

في الأسطر التالية ، ستتعلم كل شيء عن أفضل الطرق لتضمين مقاطع الفيديو في موقع WordPress الخاص بك.

• هل تضمين مقاطع الفيديو يبطئ موقع الويب الخاص بك؟
• ما هي أفضل طريقة لاستضافة مقطع فيديو على WordPress؟
• كيف يمكنني تحسين مقاطع الفيديو في WordPress؟

هيا بنا نبدأ!

هل تضمين مقاطع الفيديو يبطئ موقع الويب الخاص بك؟

نظرًا لحجمها الكبير ، يمكن أن تزيد مقاطع الفيديو من وزن الصفحة وتبطئ أوقات التحميل.

ليس هناك سر في أن الصور هي أكبر المساهمين في وزن الصفحة على الإنترنت. ولكن عندما يتعلق الأمر بالحجم لكل طلب ، وفقًا لتقدير الويب:

"... أكبر المساهمين في الحجم الهائل لكل طلب هم الفيديو والصوت والخطوط. عند النسبة المئوية التسعين ، يبلغ وزن طلبات الفيديو 2.158 كيلوبايت ، أي أربع مرات أكبر من جميع الأنواع المئوية التسعين الأخرى مجتمعة. "

المصدر: Web Alamanc 2022

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

أولاً ، لتعيين بعض المعايير ، سنختبرها مع تمكين جميع تحسينات NitroPack.

فيما يلي نتائج أدوات اختبار أداء الويب الثلاثة الأكثر شيوعًا:

• PageSpeed ​​Insights (مع NitroPack)

• GTmetrix (مع NitroPack)

• Pingdom (مع NitroPack)

الآن دعنا نرى كيف تبدو نتائجنا مع عدم تطبيق تحسينات الأداء:

• PageSpeed ​​Insights (بدون NitroPack)

أولاً ، نرى انخفاضًا حادًا في مجموع نقاط الأداء:

وثانيًا ، توصي معظم التحذيرات بتحسين الفيديو الخاص بنا:

تقليل JavaScript غير المستخدمة

تقليل CSS غير المستخدمة

تقليل تأثير التعليمات البرمجية الخاصة بطرف ثالث

يمكن تحميل بعض موارد الجهات الخارجية كسولًا بواجهة

تجنب حمولات الشبكة الهائلة

• GTmetrix (بدون NitroPack)

انتقلت درجتنا من A إلى B ، وانخفضت درجة أدائنا إلى 85٪:

• Pingdom (بدون NitroPack)

الفرق في النتائج يتحدث عن نفسه:

94 ← 64
434.7 كيلوبايت ← 3.3 ميغابايت
748 مللي ثانية ← 2.55 ثانية
46 طلبًا ← 125 طلبًا

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

لذا فإن إضافة مقطع فيديو إلى موقع WordPress الخاص بك قد يبدو وكأنه سيف ذو حدين.

لكن لا يجب أن يكون كذلك.

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

تابع القراءة لمعرفة كيفية القيام بذلك.

ما هي أفضل طريقة لاستضافة مقطع فيديو على WordPress؟

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

هذا هو الجواب القصير.

دعنا نركز على كل خيار ونكشف لماذا:

• لا يوصى بتحميل مقاطع الفيديو (الاستضافة الذاتية)
• التضمين هو البديل المفضل

لماذا يجب ألا تستضيف مقاطع الفيديو الخاصة بك

عندما تقوم بتحميل / استضافة مقطع فيديو ، فإنك تقوم بتخزين ملفات الفيديو على موقع الويب الخاص بك وخادمك.

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

ونحن فقط نخدش السطح.

فيما يلي العديد من الأسباب الأخرى التي تجعلك تتجنب تحميل مقاطع الفيديو على WordPress:

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

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

ومن ثم ، فكلما زاد حجم الملفات الموجودة على صفحة الويب الخاصة بك ، زادت موارد الاستضافة التي ستحتاج إليها.

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

2. بطء التحميل وتجربة مستخدم سيئة
من المفاهيم الخاطئة الشائعة أن الخادم وحده يتحمل عبء استضافة ملفات الفيديو الكبيرة وأي ضرر ناتج عن ذلك. لسوء الحظ ، هذا ليس هو الحال دائمًا.

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

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

3. متصفحات مختلفة ، تنسيقات ملفات مختلفة
نظرًا لمواصفات HTML5 الحالية ، لا تستخدم جميع المتصفحات أي تنسيقات فيديو قياسية.

على سبيل المثال ، بينما يدعم Safari مقاطع الفيديو H.264 (MP4) ، فإنه لا يدعم WebM أو Ogg. من ناحية أخرى ، يدعم Firefox مقاطع فيديو Ogg أو WebM ولكن ليس H.264. لحسن الحظ ، يمكن لـ Chrome تشغيل جميع تنسيقات الفيديو الرئيسية.

ومع ذلك ، إذا كنت تريد التأكد من إمكانية تشغيل الفيديو الخاص بك على جميع المتصفحات الرئيسية ، فستحتاج إلى تحويل الفيديو الخاص بك إلى تنسيقات متعددة ، مثل .mp4 و .ogv و .webm.

هذا يعني أنه سيكون لديك ثلاثة ملفات فيديو منفصلة للتحميل ، كل منها يحتمل أن يكون مئات الميجابايت.

لا بوينو!

4. تفاوت الجودة عبر المتصفحات
إذا كان تحميل ثلاثة ملفات فيديو مختلفة لا يبدو كثيرًا ، فهناك المزيد.

ربما ستحتاج إلى العديد من الأدوات لتحويل مقاطع الفيديو الخاصة بك إلى التنسيقات المطلوبة.

المشكلة؟

يتعامل كل تطبيق مع عملية التحويل بطريقة مختلفة قليلاً.

وبالتالي ، قد تختلف جودة الفيديو الخاص بك اعتمادًا على تنسيقه.

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

هذه مجرد بعض العقبات التي ستواجهها إذا قررت استضافة مقاطع الفيديو الخاصة بك.

بدلاً من ذلك ، يمكنك تخطي كل الصداع والذهاب مع الخيار الأسهل - تضمين مقاطع الفيديو الخاصة بك.

لماذا يعتبر التضمين أفضل طريقة لاستضافة مقطع فيديو على WordPress

بمعرفة عيوب الاستضافة الذاتية للفيديو ، نحن على يقين من أنه يمكنك تخمين سبب كون التضمين هو المسار الموصى به. لكن مع ذلك ، دعنا نستعرض بعض الفوائد:

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

هذا هو الشكل الذي سيبدو عليه مقطع الفيديو المضمن في صفحتك:

شيء صغير:

تحصل على جميع ميزات YouTube وتزود المستخدمين بتجربة مألوفة دون زيادة التحميل على الخوادم بطلبات غير ضرورية.

كيفية تضمين مقطع فيديو في WordPress

إنه سهل للغاية.

اختر إحدى الطرق الثلاث التالية لتضمين مقطع فيديو في دقيقة واحدة:

1. الصق عنوان URL للفيديو الخاص بك في صفحتك / منشورك
نعلم أنه يبدو جيدًا لدرجة يصعب تصديقها ، ولكن نعم - كل ما عليك فعله هو لصق عنوان URL للفيديو الخاص بك حيث تريد ظهوره على صفحتك.

بعد ذلك ، سيتعرف عليه WordPress ويقوم بتضمينه لك تلقائيًا.

2. استخدم طريقة iFrame
انتقل إلى فيديو YouTube الخاص بك وانقر فوق مشاركة.

ثم ، بدلاً من نسخ عنوان URL الخاص بك ، انقر فوق تضمين.

انسخ إطار iFrame:

ارجع إلى محرر WordPress ، وقم بالتغيير من الوضع المرئي إلى الوضع النصي ، والصق كود التضمين:

هذا كل شيء.

3. إدراج كتلة الفيديو
يحتوي WordPress على خيار مدمج لتضمين مقاطع الفيديو باستخدام الكتل. ما عليك سوى إضافة كتلة جديدة والبحث عن "فيديو":

حدد النظام الأساسي التابع لجهة خارجية والصق عنوان URL لمقطع الفيديو الخاص بك. يجب أن يظهر الفيديو الخاص بك على صفحتك.

نظرًا لأنك تعرف أساسيات تحميل مقطع فيديو على WordPress ، فلنرى كيف يمكنك تحسين محتوى الفيديو الخاص بك للحصول على الأداء الأمثل للويب ، فهل نفعل ذلك؟

كيف يمكنني تحسين مقاطع الفيديو في WordPress؟ [5 نصائح حول الأداء]

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

ولكن لأكون صادقًا - كل ملف يؤثر بطريقة ما على سرعة صفحة الويب.

الاخبار الجيدة؟

يمكنك تحسين موارد موقعك لتحسين الأداء.

عندما يتعلق الأمر بتحسين مقاطع الفيديو ، ستساعدك أفضل الممارسات التالية:

1. تحميل كسول للموارد غير الحرجة

يرغب المستخدمون في رؤية المحتوى يتم رسمه بسرعة وتجربة موقع ويب يصبح تفاعليًا على الفور.

ومع ذلك ، ليست كل الموارد ضرورية لتوفير أفضل تجربة للمستخدم منذ البداية.

إذا ظهر الفيديو الخاص بك لاحقًا في الصفحة ، فلا داعي لتحميله على الفور للأسباب التالية:

1. يبطئ عملية التقديم.
2. قد لا يقوم المستخدمون بالتمرير لأسفل حتى لرؤيته.
3. يؤثر سلبًا على تجربة المستخدم بأكملها.

تأكد من التحميل البطيء لجميع الموارد غير الحرجة. يمكنك استخدام سمات التأجيل وغير المتزامن.

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

نتيجة لذلك ، ستلاحظ تحسنًا في المقاييس التالية:

• أول رسم مضمون (FCP)
• أكبر طلاء محتوى (LCP)
• أول تأخير في الإدخال (FID)
  

2. تجنب تكرار تشغيل مقاطع الفيديو تلقائيًا

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

بقدر ما تبدو رائعة ، فإنها ستزيد بشكل كبير من مجموع نقاط أكبر محتوى في المحتوى (LCP).

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

إذا كنت لا تزال ترغب في تجربته ، فاحتفظ بالفيديو قصيرًا قدر الإمكان وقم بتصدير الملفات بدون صوت.

هذا ما فعله Weglot:

وإحصائيات أدائهم أكثر من جيدة:

3. استخدم شبكة توصيل المحتوى (CDN)

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

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

4. تحميل مقاطع الفيديو الخاصة بك مسبقًا

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

يمكنك إما استخدام سمة التحميل المسبق للفيديو أو الرابط rel = preload.

استخدم سمة التحميل المسبق للفيديو لتقديم تلميح للمتصفح عن مقدار المعلومات أو المحتوى المطلوب تحميله مسبقًا:

ومع ذلك ، قد يتجاهل المتصفح تمامًا سمة التحميل المسبق للفيديو لأنها مجرد تلميح.

إذا كنت تريد فرض إرادتك ، فاستخدم الرابط rel = preload .

يعد Link rel = preload عملية جلب تعريفي تجبر المتصفح على جلب المورد الذي تعرف أنه ضروري لتجربة الصفحة.

عند استخدام rel = preload ، من الضروري إضافة قيمة "as". تخبر قيمة "as" المتصفحات بالأولوية التي تمنحها للمورد الذي تقوم بتحميله مسبقًا دون تأخير الملفات الأكثر أهمية أو التخلف عن الملفات الأقل أهمية.

5. استخدم البرنامج المساعد لتحسين سرعة الصفحة

هل يجب علي الاستضافة الذاتية أم التضمين؟ هل يجب أن أقوم بترقية موارد الاستضافة الخاصة بي أم لا؟ ما النظام الأساسي الذي يجب أن أستخدمه إذا قررت التضمين؟

بمجرد أن تقرر الطريقة التي تريد أن تسلكها ، فقد حان الوقت للخطوة المهمة التالية - ما هي أفضل طريقة لتحسين مقاطع الفيديو الخاصة بي تلقائيًا؟

ضع في اعتبارك تجربة NitroPack - حل تحسين الأداء الشامل الذي يعمل على تسريع موقع WordPress الخاص بك دون المساس بالتصميم وجودة الفيديو.

بفضل مجموعة من الميزات القوية مثل:

• تحميل الفيديو كسول
• تحديد أولويات الموارد الحرجة على غير الحرجة
• جافا سكريبت التحميل البطيء
• CSS الحرجة
• المدمج في CDN
• و اكثر…

يمكنك تضمين مقاطع فيديو Youtube بدون مخاطر وإشراك زوار موقعك من البداية.

جرب NitroPack مجانًا →

لا تنسى الاختبار

بغض النظر عن طريقة التحميل التي قررت استخدامها ، لا تنس أن:

لا ينبغي أن تكون إضافة مقطع فيديو إلى موقع الويب الخاص بك على حساب أداء موقعك.

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

لهذا السبب يعد إجراء الاختبارات قبل وبعد تحميل / تضمين مقطع فيديو أمرًا بالغ الأهمية.

لتحقيق التوازن الصحيح بين الحجم والجودة والسرعة ، يمكنك استخدام أدوات الاختبار المعروفة

• PageSpeed ​​Insights
• GTmetrix
• بينغدوم

تضمين الفيديو في الأسئلة الشائعة حول WordPress

لماذا لا يتم تضمين فيديو YouTube الخاص بي في WordPress؟

عند إنشاء موقع WordPress ، يكون لديك خيار السماح بالتضمينات أو منعها. تأكد من أنك سمحت لهم. للقيام بذلك ، انتقل إلى الإعدادات >> الوسائط ، وتحت التضمينات ، حدد الخيار "عند الإمكان ، قم بتضمين محتوى الوسائط من عنوان URL مباشرة في الصفحة".

لماذا يوجد خطأ عند تحميل مقطع فيديو على WordPress؟

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

لماذا أستمر في تلقي أخطاء في التشغيل؟

على الأرجح ، يتم تشغيل العديد من العمليات في نفس الوقت ، مما يؤدي إلى حدوث خطأ في التشغيل.