You are currently viewing بارگذاری تنبل چیست؟  چرا از بارگذاری تنبل استفاده می کنیم؟  من نبودم

بارگذاری تنبل چیست؟ چرا از بارگذاری تنبل استفاده می کنیم؟ من نبودم


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

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

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

آنچه در این مقاله می خوانیم

بارگذاری تنبل چیست؟

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

اگر تا به حال از Lighthouse استفاده کرده باشید، ممکن است با پیشنهاد تاخیر در تصاویر (Delay Images Off Screen) در گزارش مواجه شده باشید.

یکی از پارامترهای سرعت در Lighthouse شناسایی تصاویر خارج از صفحه است که کاندید بارگذاری تاخیری هستند.

ممکن است قبلاً بارگذاری تنبل را در عمل دیده باشید

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

نمونه‌ای از بارگذاری تنبل را می‌توان در پلتفرم Medium یافت که تصاویر کانتینرهای کوچک را در بارگذاری صفحه بارگیری می‌کند و در حین پیمایش با تصاویر اصلی جایگزین می‌شود.

نمونه ای از بارگذاری تاخیری تصویر در عمل. زمانی که صفحه بارگیری می‌شود، تصویر مکان‌نما بارگیری می‌شود (سمت چپ)، و هنگامی که درگاه نمایش پیمایش می‌شود، تصویر نهایی در صورت نیاز بارگذاری می‌شود.

اگر با بارگذاری تنبل آشنایی ندارید، ممکن است تعجب کنید که این تکنیک چقدر مفید است و چه مزایایی دارد. در ادامه به این موضوعات خواهیم پرداخت.

چرا تنبلی بارگذاری تصاویر یا ویدیوها؟

زیرا ممکن است چیزهایی را بارگیری کنید که کاربر هرگز آنها را نبیند. این به چند دلیل مشکل ساز است:

  • این منجر به از دست دادن اطلاعات کاربر می شود. (شما باید از این پهنای باند ارزشمند برای دانلود منابع دیگری که در واقع توسط کاربر دیده می شود استفاده کنید).
  • زمان پردازش، باتری و سایر منابع سیستم را هدر می دهد. پس از دانلود یک منبع رسانه ای، مرورگر باید آن را رمزگشایی کرده و محتوای آن را در viewport نمایش دهد.

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

اجرای بارگذاری تنبل

راه های مختلفی برای اجرای بارگذاری تنبل وجود دارد. البته باید پشتیبانی مرورگر را نیز در نظر بگیرید. مرورگرهای مدرن بارگذاری تنبل را در سطح مرورگر پیاده سازی می کنند که می تواند با استفاده از آن انجام شود loading تصاویر را فعال کنید برای اطمینان از سازگاری با مرورگرهای قدیمی، می توانید برنامه خود را با جاوا اسکریپت پیاده سازی کنید. تعدادی کتابخانه نیز برای این کار وجود دارد. مقالات زیر کتابخانه های مختلفی را برای این منظور ارائه می کنند.

بارگذاری تنبل تصاویر

تنبلی بارگذاری ویدیوها

مقاله: بارگذاری تنبل تصاویر در سطح مرورگر

مزایای بارگذاری تنبل

  • بارگیری بر اساس تقاضا زمان و مصرف حافظه را کاهش می دهد و در نتیجه تحویل محتوا را بهینه می کند. زیرا ابتدا تنها بخشی از صفحه وب که مورد نیاز است بارگذاری می شود، بنابراین زمان صرف شده کمتر و بارگذاری بقیه کند می شود که باعث صرفه جویی در فضای ذخیره سازی می شود. همه اینها تجربه کاربر را بهبود می بخشد، زیرا محتوای درخواستی در کمترین زمان ممکن ارائه می شود.
  • از اجرای کدهای غیر ضروری جلوگیری می کند.
  • استفاده بهینه از منابع زمان و مکان آن را به یک رویکرد مقرون به صرفه از دیدگاه تجار تبدیل می کند. (صاحبان وب سایت)

معایب بارگذاری تنبل

  • ابتدا، خطوط اضافی کدی که باید به خطوط موجود اضافه شوند، کد را برای اجرای بارگذاری تنبل کمی پیچیده‌تر می‌کنند.
  • دوم، بارگذاری تنبل گاهی اوقات می‌تواند با فهرست‌بندی نامناسب محتوای بارگیری نشده، بر رتبه‌بندی یک وب‌سایت در موتورهای جستجو تأثیر بگذارد.

نتیجه

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

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