إضــافة Lazy Load Youtube لتسريع سرعة ظهور فيديوهات يوتيوب

Lazy Load Youtube لتسريع مدونة بلوجر

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

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

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

 

مزايا التحميل الكسول لفيديوهات اليوتيوب

يتميز التحميل الكسول الذي سنستعرضه بعدة ميزات هامة، منها:

• الحفاظ على سرعة تحميل الصفحة من خلال عدم تحميل الفيديو إلا بعد الضغط على زر التشغيل.
• تحميل صورة الفيديو فقط بعد ظهور الفيديو في واجهة المستخدم.
• زر التشغيل يضيء لجذب انتباه المستخدم.
• يتم تحميل الفيديو بعد الضغط على زر التشغيل، مما يعني أنه لا يبدأ التشغيل تلقائيًا.
• عرض الفيديو بشكل متجاوب وفقًا لنسبة العرض إلى الارتفاع 16:9.
• لتفعيل التشغيل من الضغطة الأولى، يمكن استخدام خاصية `autoplay = true` في كود الجافا سكريبت.

معاينة خاصية التحميل الفيديو يوتيوب

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

يمكنك بسهولة إضافة خاصية Lazy Load لفيديوهات يوتيوب على مدونتك، حيث تحتاج فقط إلى إدراج أكواد CSS وJavaScript داخل قالب بلوجر مرة واحدة. بعد ذلك، يمكنك استخدام كود HTML في المواضيع كلما رغبت في إضافة فيديو يوتيوب جديد.

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

أكواد CSS لإضافة خاصية التحميل الكسول لفيديوهات يوتيوب

من الأفضل إضافة هذه الأكواد فوق </b:skin>.       تحميل من هــنا

نظرًا لأن الإضافة تعرض فيديوهات يوتيوب بشكل متجاوب، فإن أهم ما يجب شرحه في أكواد CSS هو إمكانية تغيير نسبة العرض إلى الارتفاع (Aspect Ratio) للفيديوهات. وبما أن النسبة الأكثر شيوعًا هي 16:9، فقد قمت بإضافة القيمة 56.25% في أكواد CSS، والتي تم حسابها من العملية 9/16*100. وبالتالي، يمكنك التحكم في أبعاد الفيديو من خلال استخدام خاصية padding-top في CSS.

إضافة Lazy Load لفيديوهات اليوتيوب باستخدام أكواد JavaScript

من الأفضل وضع هذه الأكواد قبل وسم </body>       تحميل من هــنا

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

أكواد HTML المستخدمة لتأخير تحميل فيديوهات اليوتيوب.

<div class="lazy-tube" data-vcode="video_id"></div>  

 

قم بإدراج أكواد HTML في مقال بلوجر مع تعديل قيمة data-vcode لتكون أيدي الفيديو الخاص باليوتيوب الذي ترغب في تضمينه في المقال.

الأيدي هو ما يظهر بعد عنوان قناة يوتيوب. كما هو موضح بالأحمر أدناه:

youtube.com/watch?v=-EScatjDL7c

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

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

يمكن أن تسهم تقنية التحميل الكسول (Lazy Load) في تحسين سرعة تحميل مدونة Blogger وتوفير النطاق الترددي، مما يعزز تجربة المستخدم. تأكد من اتباع الخطوات البسيطة المذكورة في هذه المقالة لتطبيق تقنية التحميل الكسول بشكل صحيح ولتحقيق أفضل النتائج.