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

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

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

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

كيفية رصد أداة Lighthouse للتضمينات التابعة لجهات خارجية والتي يمكن تأجيلها

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

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

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

تدقيق واجهة تابعة لجهة خارجية في Lighthouse تسلّط الضوء على مشغّل Vimeo المضمّن والمحادثة المباشرة في Drift
تدقيق واجهة Lighthouse الخارجية.

طريقة تأجيل الرموز التابعة لجهات خارجية بإحدى الواجهات

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

  1. عند التحميل: إضافة واجهة إلى الصفحة

  2. عند تمرير الماوس: تتصل الواجهة مسبقًا بموارد خارجية.

  3. عند النقر: يتم استبدال الواجهة بالمنتج التابع لجهة خارجية.

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

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

مشغّل Vimeo المضمَّن

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

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

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

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

المراجِع

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