لود تنبل یا لیزی لودینگ (Lazy Loading) چیست؟

وردپرس اعلام کرد که وردپرس ۵.۴ ممکن است به طور پیش فرض دارای ویژگی لود تنبل یا لیزی لودینگ (Lazy Loading) باشد. این قابلیت، خصوصیت loading را در تمام عناصر یا تگهای IMG یا تصویر (<img>) فعال می‌کند. ناشران وردپرسی دیگر نیازی به استفاده از افزونه های جاوا اسکریپت یا پلاگین ها برای بارگذاری تنبل تصاویر ندارند.

قبل از مطالعه این مطلب توصیه می‌شود به معنی کلمات تخصصی بکار رفته در متن نگاهی بیندازید:

attribute چیست ؟

attribute: صفت، مشخصه یا خصوصیت (مثلا loading یک صفت است)

هر عنصر یا تگ در HTML می‌تواند دارای یک یا چند خصوصیت (attribute) باشد. وظیفه و کاربرد attribute ها در HTML این است که برخی از ویژگی های تکمیلی آن تگ را معرفی کنند. خصوصیات زیادی در HTML وجود دارد که با استفاده از آنها می‌توان به عنوان مثال طول و عرض یک تگ را تعیین کرد.

اکثر تگ های HTML میتوانند دارای مشخصه هایی باشند که در واقع آنها بیت های اضافی از اطلاعات هستند.

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

Lazy Loading چیست ؟

لود تنبل یا لیزی لودینگ (نام دیگر: on-demand loading) یک تکنیک بهینه سازی برای محتوای آنلاین است، چه یک وب سایت باشد و چه یک وب اپ.

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

مقادیر پشتیبانی شده برای خصوصیت loading سه نوع هستند که فقط دو مورد اول آن مهم هستند:

۱) Lazy

در حالت طبیعی وقتی سایتی در مرورگر لود شود تمام کدهای HTML و CSS و Java Script و عکس های آن صفحه ابتدا دانلود و سپس به کاربر نمایش داده می‌شود اما وقتی بر روی سایت ویژگی lazy loading فعال باشد فقط بخشی از سایت را که کاربر می بینید نمایش داده می‌شود و وقتی صفحه را اسکرول کرده و پایین بروید در آن زمان سایر کدها و عکس ها لود می‌شود. این کار باعث می‌شود که سرعت بارگذاری سایت افزایش یابد و سایت در زمان کمتری نمایش داده شود.

۲) Eager

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

۳) Auto

رفتار پیش فرض لیزی لودینگ مرورگر، که البته مشابه داشتن خصوصیت یا attribute نیست.

مزایای lazy loading چیست

مزایای استفاده از لود تنبل یا Lazy Loading عبارت اند از:

۱) کاهش زمان لود اولیه

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

۲) صرفه جویی در مصرف پهنای باند

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

۳) حفاظت از منابع سیستم

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

وردپرس lazy loading را به همه تصاویر اضافه خواهد کرد

مطابق اعلام وردپرس:

این پیاده سازی در صدد است لود تنبل را به طور پیش فرض فعال کند و مشخصه loading را با کلمه lazy را در تگهای تصویر زیر ارائه میدهد:

• تصاویر داخل محتوای صفحه
• تصاویر داخل خلاصه های مطلب
• تصاویر داخل نظرات
• تصاویر داخل محتوای ابزارک متن
• تصاویر مجزا از طریق () wp_get_attachment_image
• تصاویر آواتار از طریق () get_avatar

توجه داشته باشید که “loading=”lazy فقط در صورتی اضافه می‌شود که تگ مربوطه هنوز ویژگی loading را نداشته باشد. به عبارت دیگر، برای جلوگیری از لیزی لود شدن یک تصویر، توصیه می شود “loading=”eager را مشخص کنید.

با توجه به بیانیه وردپرس، خصوصیت lazy-loading به روشی اجرا می‌شود که حذف آنها آسان باشد. این امر در شرایطی ضروری است که مرورگرهای آینده بدون نیاز به ویژگی loading، همه تصاویر را به صورت پیش فرض بارگذاری کنند.

لیزی لود تصاویر در مرورگر

گوگل از طریق Web.dev اعلام کرده است که قصد دارد هنگامی مرورگر در حالت Lite قرار دارد لیزی لودینگ را به طور خودکار فعال کند (Lite یا حالت ساده قبلاً با عنوان Data Saver شناخته می‌شد). این ویدیو نسخه ای نمایشی از این ویژگی را نشان می‌دهد:

با شروع استفاده از Chrome 76، بدون نیاز به نوشتن کد لیزی لودینگ سفارشی یا استفاده از یک کتابخانه جاوا اسکریپت جداگانه، می‌توانید از این ویژگی استفاده کنید.

تست Lazy-Loading وردپرس

تیم وردپرس رسما یک افزونه لیزی لودینگ وردپرس را برای اهداف آزمایش طراحی کرده است. از ناشرانی که می خواهند آن را تست کنند و بازخورد بدهند خواسته شده این افزونه را دانلود و امتحان کنند.