بار تنبل منابع شخص ثالث با نماها

منابع شخص ثالث اغلب برای نمایش تبلیغات یا ویدیوها و ادغام با رسانه های اجتماعی استفاده می شوند. رویکرد پیش‌فرض این است که به محض بارگیری صفحه، منابع شخص ثالث را بارگیری کنید، اما این می‌تواند به طور غیرضروری بارگذاری صفحه را کاهش دهد. اگر محتوای شخص ثالث حیاتی نباشد، این هزینه عملکرد را می توان با بارگذاری تنبل آن کاهش داد.

این ممیزی تعبیه‌های شخص ثالث را برجسته می‌کند که می‌توانند به‌طور تنبلی در تعامل بارگذاری شوند. در این صورت، یک نما به جای محتوای شخص ثالث استفاده می شود تا زمانی که کاربر با آن تعامل داشته باشد.

نمونه ای از بارگیری پخش کننده جاسازی شده YouTube با نما. وزن نما 3 کیلوبایت و پخش کننده با وزن 540 کیلوبایت در تعامل بارگذاری می شود.
بارگیری پخش کننده جاسازی شده YouTube با نما.

چگونه Lighthouse جاسازی های شخص ثالث قابل تعویق را تشخیص می دهد

Lighthouse به دنبال محصولات شخص ثالثی است که می توانند به تعویق بیفتند، مانند ویجت های دکمه های اجتماعی یا جاسازی های ویدئویی (به عنوان مثال، پخش کننده جاسازی شده YouTube).

اطلاعات مربوط به محصولات معوق و نماهای موجود در وب شخص ثالث نگهداری می شود.

اگر صفحه منابع متعلق به یکی از این جاسازی‌های شخص ثالث را بارگیری کند، ممیزی با شکست مواجه می‌شود.

ممیزی نمای شخص ثالث فانوس با برجسته کردن پخش کننده جاسازی شده Vimeo و چت زنده Drift.
ممیزی نمای شخص ثالث فانوس دریایی.

اشخاص ثالث را با نما به تعویق بیندازید

به جای افزودن یک جاسازی شخص ثالث به طور مستقیم به HTML خود، صفحه را با یک عنصر ثابت بارگذاری کنید که شبیه به شخص ثالث جاسازی شده واقعی است. الگوی تعامل باید چیزی شبیه به این باشد:

  • در بارگذاری: نما را به صفحه اضافه کنید.
  • روی ماوس: نما از قبل به منابع شخص ثالث متصل می شود.
  • روی کلیک: نما خود را با محصول شخص ثالث جایگزین می کند.

به طور کلی، جاسازی‌های ویدیویی، ویجت‌های دکمه اجتماعی و ابزارک‌های چت همگی می‌توانند از الگوی نما استفاده کنند. هنگام انتخاب نما، تعادل بین اندازه و مجموعه ویژگی را در نظر بگیرید.

لیست زیر توصیه های ما را در مورد نماهای منبع باز ارائه می دهد. همچنین می توانید از لودر iframe تنبل مانند vb/lazyframe استفاده کنید.

پخش کننده تعبیه شده یوتیوب

پخش کننده جاسازی شده Vimeo

چت زنده (Intercom، Drift، Help Scout، Facebook Messenger)

نمای خود را بنویسید

شما می توانید انتخاب کنید که یک راه حل نما سفارشی بسازید که از الگوی تعاملی که قبلا ذکر شد استفاده می کند. نما باید در مقایسه با محصول شخص ثالث معوق کوچکتر باشد و فقط شامل کد کافی برای تقلید از ظاهر محصول باشد.

اگر مایلید راه حل شما در لیست گنجانده شود، مراحل ارسال را بررسی کنید.

منابع

کد منبع برای منابع شخص ثالث بارگذاری تنبل با ممیزی نما .