تحميل الموارد التابعة لجهات خارجية باستخدام \"التحميل الكسول\" مع الواجهات

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

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

مثال على تحميل مشغّل YouTube المضمّن مع واجهة يبلغ حجم الواجهة 3 كيلوبايت ويتم تحميل المشغّل الذي يبلغ حجمه 540 كيلوبايت عند التفاعل.
يتم تحميل مشغّل YouTube المضمّن مع واجهة.

الطريقة التي ترصد من خلالها أداة Lighthouse عمليات التضمين القابلة للتأجيل التابعة لجهات خارجية

يبحث Lighthouse عن المنتجات التابعة لجهات خارجية التي يمكن تأجيل تحميلها، مثل التطبيقات المصغّرة للأزرار الاجتماعية أو الفيديوهات المضمّنة (مثل مشغّل YouTube المضمّن).

يتم الاحتفاظ بالبيانات عن المنتجات التي يمكن تأجيلها والواجهات المتاحة على موقع إلكتروني تابع لجهة خارجية.

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

تدقيق الواجهة التابع لجهة خارجية في Lighthouse يُبرز مشغّل الفيديو المضمّن في Vimeo والمحادثة المباشرة في Drift
عملية تدقيق الواجهة التابعة لجهة خارجية في Lighthouse

تأجيل الرموز التابعة لجهات خارجية باستخدام واجهة

بدلاً من إضافة تضمين تابع لجهة خارجية مباشرةً إلى HTML، يمكنك تحميل الصفحة بعنصر ثابت يبدو مشابهًا للجهة الخارجية المضمّنة الفعلية. ينبغي أن يبدو نمط التفاعل على النحو التالي:

  • عند التحميل: أضِف واجهة إلى الصفحة.
  • عند تمرير مؤشر الماوس: تتصل الواجهة مسبقًا بالموارد التابعة لجهات خارجية.
  • عند النقر: يتم استبدال الواجهة بمنتج الجهة الخارجية.

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

تقدّم القائمة التالية اقتراحاتنا بشأن واجهات مفتوحة المصدر. يمكنك أيضًا استخدام أداة تحميل iframe بشكل بطيء، مثل vb/lazyframe.

مشغّل YouTube المضمّن

مشغّل الفيديو المضمّن في Vimeo

المحادثة المباشرة (Intercom، Drift، Help Scout، Facebook Messenger)

كتابة واجهة خاصة بك

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

إذا أردت إضافة الحلّ الذي تقدّمه إلى هذه القائمة، راجِع عملية الإرسال.

الموارد

رمز المصدر للموارد التابعة لجهات خارجية ذات التحميل الكسول مع تدقيق الواجهات.