lazy-loading یا بارگذاری تنبل چیست؟
بارگذاری تنبل یا lazy-loading راه‌حل نهایی مشکل سرعت بارگذاری صفحات سایت است. در بارگذاری تنبل، شما بدون اینکه از تعداد یا کیفیت محتوای تصویری خود کم کنید از حجم بارگذاری اولیه صفحه خود به شدت می‌کاهید.
تصاویر و ویدئوها نقش مهمی در میزان حجم صفحات وب و بارگذاری وب‌سایت دارند و استفاده از تصاویر زیاد بر روی سرعت سایت شما تأثیر منفی خواهد گذاشت. یکی از بهترین روش‌ها برای حل این مشکل کاهش تصاویر و همچنین فشرده کردن آنها به‌قصد کاهش حجم است اما گاهی اوقات ذی‌نفعان پروژه ممکن است تمایلی به حذف منابع رسانه‌ای از برنامه‌های موجود خود نداشته باشند. چنین بن‌بست‌هایی می‌تواند بسیار خسته‌کننده و وقت‌گیر باشند، به‌خصوص زمانی که همه طرف‌های درگیر می‌خواهند عملکرد و سرعت سایت را بهبود بخشند.
بارگذاری تنبل یا lazy-loading راه‌حل نهایی این مشکل است. در بارگذاری تنبل شما بدون اینکه از تعداد یا کیفیت محتوای تصویری خود کم کنید از حجم بارگذاری اولیه صفحه خود به‌شدت می‌کاهید.
آنچه در این مقاله می‌خوانیم
بارگذاری تنبل چیست؟
Lazy-loading تکنیکی است که بارگذاری منابع غیر بحرانی را در زمان لود صفحه به تعویق می‌اندازد. در عوض، این منابع غیر بحرانی در لحظه نیاز بارگذاری می‌شوند. در مورد تصاویر، “off-screen” اغلب مترادف با “خارج از صفحه‌نمایش” است. در واقع تصاویر تا وقتی که در viewport قرار نگیرند بارگذاری نمی‌شوند.
اگر تا کنون از Lighthouse استفاده کرده باشید، ممکن است با پیشنهاد به تأخیر انداختن تصاویر (Defer offscreen images) در گزارش مواجه شده باشید.
احتما شما قبلا هم بارگذاری تنبل را در عمل دیده باشید
نمونه‌ای از بارگذاری تنبل را می‌توان در پلتفرم Medium پیدا کرد، که تصاویر نگهدارنده مکان کم حجم را در هنگام بارگذاری صفحه بارگیری می‌کند، و در حین پیمایش آنها را با تصاویر اصلی جایگزین می‌کند.
اگر با بارگذاری تنبل آشنا نیستید، ممکن است تعجب کنید که این تکنیک چقدر مفید است و مزایای آن چیست. در ادامه به این مباحث نیز می‌پردازیم.
چرا تصاویر یا ویدیوها را با lazy loading بارگذاری کنیم؟
زیرا ممکن است در حال بارگیری مواردی باشید که کاربر هرگز آن را نبیند. این به چند دلیل مشکل ساز است:
بارگذاری تنبل تصاویر و ویدئو زمان بارگذاری اولیه صفحه، حجم صفحه اولیه و استفاده از منابع سیستم را کاهش می‌دهد که همه اینها تأثیرات مثبتی بر سرعت دارند.
پیاده‌سازی lazy-loading
روش‌های مختلفی برای پیاده‌سازیی بارگذاری تنبل وجود دارد. البته باید پشتیبانی مروگرها را نیز در نظر بگیرید. مرورگرهای مدرن بارگذاری تنبلی را در سطح مرورگر پیاده‌سازی می‌کنند که می‌تواند با استفاده از ویژگی loading روی تصاویر فعال شود. برای ارائه سازگاری با مرورگرهای قدیمی می توانید خودتان با جاوا اسکریپت پیاده‌سازی کنید. همچنین تعدادی کتابخانه برای انجام این کار وجود دارد. در مقالات زیر کتابخانه‌های مختلفی برای این کار معرفی شده است.
مقاله : بارگذاری تنبل تصاویر در سطح مرورگر
مزایای بارگذاری تنبل
- بارگیری بر اساس تقاضا، مصرف زمان و استفاده از حافظه را کاهش می‌دهد و در نتیجه تحویل محتوا را بهینه می‌کند. ازآنجایی‌که تنها بخشی از صفحه وب که موردنیاز است، ابتدا بارگیری می‌شود، بنابراین زمان صرف شده کمتر و بارگذاری بقیه بخش به تأخیر افتاده که باعث صرفه‌جویی در ذخیره‌سازی می‌شود. همه اینها باعث بهبود تجربه کاربری شده زیرا محتوای درخواستی در کوتاه‌ترین زمان ارائه می‌شود.
- از اجرای کد غیر ضروری جلوگیری می‌شود.
- استفاده بهینه از منابع زمان و مکان آن را به یک رویکرد مقرون‌به‌صرفه از دیدگاه افراد تجاری تبدیل می‌کند. (صاحبان وب‌سایت)
معایب بارگذاری تنبل
- اولاً خطوط اضافی کد که باید به خطوط موجود اضافه شوند، برای پیاده‌سازی بار تنبل، کد را کمی پیچیده می‌کند.
- ثانیاً بارگذاری تنبل ممکن است گاهی اوقات به دلیل نمایه‌سازی نامناسب محتوای بارگیری نشده، بر رتبه وب‌سایت در موتورهای جستجو تأثیر بگذارد.
نتیجه‌گیری
اگر بارگذاری تنبل روی تصاویر و ویدیوها با دقت استفاده شود، می تواند به طور جدی زمان بارگذاری اولیه و بارگذاری صفحه را در سایت شما کاهش دهند. کاربران متحمل هزینه‌های شبکه و پردازش منابع تصاویری نمی‌شوند که ممکن است هرگز نبینند، اما همچنان می‌توانند آن منابع را در صورت تمایل مشاهده کنند.
تا آنجایی که تکنیک‌های بهبود سرعت و عملکرد پیش می‌رود، بارگذاری تنبل به طور منطقی بحث برانگیز است. اگر تصاویر درونی زیادی در سایت خود دارید، این یک راه بسیار خوب برای کاهش دانلودهای غیر ضروری است.