التحميل الكسول للمشغل

2 دقيقة قراءة

يتم تحميل مشغل الصوت بشكل كسول افتراضياً. لا يتم تحميل JavaScript أو CSS الخاص به حتى يتمرر الزائر بالقرب منه. هذا يبقي مقياس Largest Contentful Paint (LCP) لصفحتك سريعاً.

ما يفعله التحميل الكسول

  • عند تحميل الصفحة، يُعرض عنصر نائب صغير في موضع المشغل
  • لا يتم تحميل JavaScript و CSS للمشغل الكامل بعد
  • عندما يتمرر الزائر ضمن 500 بكسل من المشغل، يتم تحميل المشغل الكامل ويحل محل العنصر النائب
  • الانتقال سلس بصرياً (عادةً أقل من 100 مللي ثانية)

لماذا يساعد في Core Web Vitals

بدون التحميل الكسول، كل صفحة تحتوي على مشغل تتحمل تكلفة JS و CSS الخاص بالمشغل عند التحميل الأولي. مع التحميل الكسول:

  • LCP: غير متأثر - المشغل ليس في المحتوى الظاهر فوق الطية
  • INP: غير متأثر - لا يعمل أي JS ثقيل عند التحميل
  • CLS: غير متأثر - العنصر النائب له نفس ارتفاع المشغل النهائي

متى تعطله

التحميل الكسول مفعّل افتراضياً. أوقفه إذا:

  • كان مشغلك دائماً فوق الطية (نادر)
  • تستخدم التشغيل التلقائي وتريد أن يكون المشغل جاهزاً فوراً (نادر جداً)
  • تريد الاختبار بدون التحميل الكسول لأغراض التصحيح

كيفية إيقاف تشغيله

  1. اذهب إلى تحويل النص إلى كلام - الإعدادات المتقدمة.
  2. اقلب التحميل الكسول للمشغل إلى إيقاف.
  3. احفظ.

كيف يعمل تقنياً

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

المتصفحات التي لا تدعم IntersectionObserver (القديمة جداً) تعود إلى تحميل السكريبتات عند تحميل الصفحة.

حالات الحافة المعروفة

المشغل داخل عنصر مخفي

إذا كان مشغلك داخل قسم display: none (مثل أكورديون مطوي)، لا يتفعل التحميل الكسول حتى يصبح القسم مرئياً. عادةً هذا هو السلوك المطلوب - لا فائدة من تحميل ما لا يُعرض.

التشغيل التلقائي للصوت

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