يتم غالبًا استخدام المراجع التابعة لجهات خارجية لعرض الإعلانات أو الفيديوهات والتكامل مع وسائل التواصل الاجتماعي. يتم تلقائيًا تحميل الموارد التابعة لجهات خارجية فور تحميل الصفحة، ولكن قد يؤدي ذلك إلى إبطاء عملية تحميل الصفحة بدون داعٍ. إذا لم يكن المحتوى التابع لجهة خارجية مهمًا، يمكن تقليل تكلفة الأداء هذه من خلال التحميل الكسول.
تُبرز عملية التدقيق هذه التضمينات التابعة لجهات خارجية التي يمكن تحميلها بشكل كسول عند التفاعل معها. في هذه الحالة، يتم استخدام واجهة بدلاً من المحتوى التابع لجهة خارجية إلى أن يتفاعل المستخدم معه.
كيف ترصد أداة Lighthouse عمليات التضمين التابعة لجهات خارجية والقابلة للتأجيل؟
يبحث Lighthouse عن المنتجات التابعة لجهات خارجية التي يمكن تأجيلها، مثل التطبيقات المصغّرة لأزرار المشاركة على وسائل التواصل الاجتماعي أو الفيديوهات المضمَّنة (مثل مشغّل YouTube المضمَّن).
يتم الاحتفاظ بالبيانات حول المنتجات القابلة للتأجيل والواجهات المتاحة في third-party-web.
لا تجتاز عملية التدقيق إذا حمّلت الصفحة موارد تابعة لأحد هذه المحتوى المضمّن من جهات خارجية.
تأجيل الرموز التابعة لجهات خارجية باستخدام واجهة
بدلاً من إضافة محتوى مضمّن تابع لجهة خارجية مباشرةً إلى HTML، يمكنك تحميل الصفحة باستخدام عنصر ثابت يشبه المحتوى المضمّن الفعلي التابع لجهة خارجية. يجب أن يبدو نمط التفاعل على النحو التالي:
- عند التحميل: أضِف واجهة إلى الصفحة.
- عند تمرير مؤشر الماوس فوقها: تنشئ الواجهة اتصالاً مسبقًا بالموارد التابعة لجهات خارجية.
- عند النقر: يتم استبدال الواجهة بالمنتج التابع لجهة خارجية.
الواجهات المقترَحة
بشكل عام، يمكن استخدام نمط الواجهة في كل من عمليات تضمين الفيديو وأدوات الأزرار الاجتماعية وأدوات الدردشة. عند اختيار واجهة، يجب مراعاة التوازن بين الحجم ومجموعة الميزات.
تقدّم القائمة التالية اقتراحاتنا بشأن الواجهات المفتوحة المصدر. يمكنك أيضًا استخدام أداة تحميل iframe غير متزامن، مثل vb/lazyframe.
مشغّل YouTube المضمّن
مشغّل Vimeo المضمّن
المحادثة المباشرة (Intercom وDrift وHelp Scout وFacebook Messenger)
كتابة واجهة برمجة التطبيقات الخاصة بك
يمكنك اختيار إنشاء حلّ واجهة مخصّص يستخدم نمط التفاعل الموضّح سابقًا. يجب أن تكون الواجهة أصغر بكثير مقارنةً بالمنتج المؤجّل التابع لجهة خارجية، وأن تتضمّن فقط قدرًا كافيًا من الرموز البرمجية لمحاكاة مظهر المنتج.
إذا أردت إدراج الحلّ الذي تقدّمه في القائمة، يمكنك الاطّلاع على عملية إرسال الحلول.
الموارد
رمز المصدر لفحص "تحميل الموارد التابعة لجهات خارجية ببطء مع واجهات"