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

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

استفاده از بارگذاری تنبل یا lazy-loading در تصاویر

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

بارگذاری تنبل یا lazy-loading راه‌حل نهایی این مشکل است. در بارگذاری تنبل شما بدون اینکه از تعداد یا کیفیت محتوای تصویری خود کم کنید از حجم بارگذاری اولیه صفحه خود به‌شدت می‌کاهید.

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

Lazy-loading تکنیکی است که بارگذاری منابع غیر بحرانی را در زمان لود صفحه به تعویق می‌اندازد. در عوض، این منابع غیر بحرانی در لحظه نیاز بارگذاری می‌شوند. در مورد تصاویر، “off-screen” اغلب مترادف با “خارج از صفحه‌نمایش” است. در واقع تصاویر تا وقتی که در viewport قرار نگیرند بارگذاری نمی‌شوند.

 اگر تا کنون از Lighthouse استفاده کرده باشید، ممکن است با پیشنهاد به تأخیر انداختن تصاویر (Defer offscreen images) در گزارش مواجه شده باشید.

به تأخیر انداختن تصاویر (Defer offscreen images) در Lighthouse
یکی از پارامترهای سرعت در Lighthouse شناسایی تصاویر خارج از صفحه است که کاندیدای بارگذاری تنبل هستند.

احتما شما قبلا هم بارگذاری تنبل را در عمل دیده باشید

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

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

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

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

چرا تصاویر یا ویدیوها را با lazy loading بارگذاری کنیم؟

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

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

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

پیاده‌سازی lazy-loading

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

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

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

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

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

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

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

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

نتیجه‌گیری

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.