الفكرة: صورة أولا، المشغل عند الضغط
بدلا من تحميل iframe مباشرة، نعرض صورة معاينة وزر تشغيل. عندما يضغط المستخدم، يستبدل العنصر بالمشغل الحقيقي. الصفحة الأولى تصبح أخف، والفيديو يظل متاحا في مكانه.
متى يفيد هذا الحل؟
- المقالات التي تحتوي أكثر من فيديو.
- صفحات الشرح الطويلة.
- مواقع الموبيل التي تتأثر بالاتصالات الخارجية.
- صفحات يظهر فيها الفيديو أسفل الشاشة وليس في البداية.
ماذا يتحسن؟
ينخفض عدد الطلبات عند فتح الصفحة، ويقل JavaScript القادم من YouTube قبل التفاعل. الأثر الفعلي يختلف حسب القالب والإضافات وبقية عناصر الصفحة، لذلك اختبر قبل وبعد.
لا تؤخر فيديو الهيرو بلا حساب
إذا كان الفيديو هو العنصر الأساسي الذي يراه المستخدم أولا، فالتجربة تحتاج توازنا. صورة معاينة واضحة وزر تشغيل جيد أفضل من مساحة فارغة تنتظر سكربت.
إضافة HanyBee Lazy YouTube
الإضافة تطبق الفكرة بدون الحاجة لتعديل كل فيديو يدويا. بعد التفعيل، راقب الصفحات التي تستخدم تضمين YouTube وتأكد أن زر التشغيل والصورة يعملان مع قالبك.
تحميل إضافة HanyBee Lazy YouTube
اختبر الصفحة بعد التفعيل
افتح الصفحة على الموبيل، شغّل الفيديو، جرّب أكثر من فيديو وتأكد أن المشغل يعمل مع قالبك. ثم قارن PageSpeed وNetwork في أدوات المتصفح.
تسريع الفيديو جزء من الصورة. راجع أيضا تحسين الصور واختيار قالب ووردبريس خفيف إذا كانت الصفحة ما زالت ثقيلة.
لماذا iframe ثقيل؟
المشكلة ليست الفيديو نفسه فقط. مشغل YouTube يحتاج JavaScript وCSS واتصالات إلى نطاقات خارجية. حتى لو لم يضغط المستخدم تشغيل، جزء من هذه الموارد قد يصل إلى المتصفح بمجرد تحميل الصفحة.
صورة المعاينة
يفضل أن تكون نسبة الصورة 16:9 مع زر تشغيل واضح. لا تمدد thumbnail صغيرا حتى يصبح مشوشا. ويمكن استخدام صورة مخصصة عندما يكون غلاف الفيديو الافتراضي ضعيفا.
الخصوصية والكوكيز
تضمين خدمات خارجية قد يرسل اتصالات قبل التفاعل. حسب إعدادات الخصوصية في موقعك، قد تحتاج إلى youtube-nocookie أو حجب المشغل حتى الموافقة. التحميل عند الطلب يساعد لكنه ليس سياسة خصوصية كاملة.
الفيديوهات داخل المقال الطويل
ضع الفيديو في القسم الذي يشرحه. هذا يجعل القارئ يراه في السياق المناسب ويقلل احتمال وجود مشغلات كثيرة أعلى الصفحة.
توافق القالب
بعض القوالب تلف iframe داخل div خاص للحفاظ على النسبة. الإضافة التي تستبدل iframe تحتاج أن تحافظ على هذه النسبة حتى لا يقفز المحتوى عند الضغط.
اختبار قبل وبعد
سجل عدد الطلبات وحجم النقل وLCP قبل التفعيل، ثم كرر الاختبار من نفس البيئة قدر الإمكان. إذا كانت الصفحة تحتوي فيديو واحدا أسفل المقال قد يكون الفرق بسيطا. لو فيها عدة فيديوهات سيظهر الأثر أكثر.
لا تترك بديل الصورة بلا وصول
زر التشغيل يجب أن يكون قابلا للنقر بلوحة المفاتيح وله aria-label واضح. الأداء الجيد لا يأتي على حساب الوصول.
Shortcode أم Block؟
حسب بنية الموقع يمكن للإضافة التعامل مع embed العادي أو Shortcode أو Block. الأفضل ألا تجبر المحرر على طريقة معقدة. لو لصق رابط YouTube كالمعتاد، يجب أن تعمل الوظيفة قدر الإمكان.
Cache وCDN
بعد تغيير طريقة التضمين، امسح الكاش واختبر HTML النهائي. بعض إضافات التحسين تعيد كتابة iframe أيضا، وقد تتعارض وظيفتان تقومان بالشيء نفسه.
احتياط عند فشل JavaScript
وجود رابط مباشر للفيديو داخل العنصر أو fallback مناسب أفضل من بطاقة لا تعمل إذا فشل السكربت. التحسين لا يجب أن يجعل المحتوى غير قابل للوصول.
متى لا تحتاج الإضافة؟
لو صفحة واحدة تحتوي فيديو واحدا والموقع سريع بالفعل، لا تضف وظيفة جديدة بلا سبب. كل إضافة لها كود وصيانة. استخدم الحل عندما المشكلة موجودة ويمكن قياس فائدته.