Lazy Loading چیست

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

 

 

 

از مزایای بارگذاری تنبل می توان به موارد زیر اشاره کرد:

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

 

 

 

Eager Loading چیست ؟

Eager Loading نوعی دستور می باشد که به محض اجرای کد منبع را مقدار دهی یا بارگذار می کند در پارگراف بعدی یعنی در قسمت تفاوت  Lazy Loading و Eager Loading به صورت کامل در Eager Loading توضیح داده شده است

 

تفاوت Lazy Loading و Eager Loading

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

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

 

 

روش های اجرای بارگذاری تنبل

چندین کتابخانه منبع باز وجود دارد که می تواند برای اجرای Lazy Loading استفاده شود ، از جمله:

blazy.js : blazy.js یک کتابخانه جاوا اسکریپت سبک  برای بارگیری و بارگذاری تنبل برای تصاویر ، فریم ها ، ویدئوها و سایر منابع است.
LazyLoad : LazyLoad اسکریپتی است که با ورود به محفظه نمایش تصاویر به طور خودکار بارگیری می شود.

 

روش های اجرای بارگذاری تنبل در کد شما عبارتند از:

Lazy initialization : این روش اشیا را به حالت تهی در می آورد. داده های شی ject فقط پس از بارگیری و در هر زمان فراخوانی آنها بررسی می شود که آیا خنثی است و اگر چنین است  داده های شی object را بارگیری کند.
Virtual proxy – هنگام دسترسی به یک شی ، یک شی virtual مجازی را با همان رابط شی واقعی فراخوانی می کند. وقتی شی virtual مجازی فراخوانی شد شی real واقعی را بارگیری کنید و سپس  آن را به  تفویض می اندازد.
Ghost – فقط با استفاده از شناسه  یک شی را در حالت جزئی بارگیری می کند  اولین باری که یک خاصیت روی شی object فراخوانی می شود ، داده های کامل را بارگیری می کند.
Value holder – یک شی gen عمومی ایجاد کنید که رفتار بارگذاری تنبل را کنترل کند. این شی باید به جای قسمت های داده یک شی ظاهر شود.

 

 

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

چندین روش فنی برای بارگذاری تنبل تصاویر وجود دارد:

• برچسب های <img> درون خطی ، با استفاده از JavaScript برای پر کردن برچسب اگر تصویر در نمای نمایش است
• کنترل کننده های رویداد مانند scroll یا resize
• Intersection Observer API
• CSS background-image property

 

 

 

Lazy Loading برای  Video

برای بارگذاری تنبل ویدیویی که خودکار پخش نمی شود ، می توانید از ویژگی پیش بارگذاری برچسب ویدیوی HTML5 استفاده کنید.

برای ویدیوهایی که به صورت خودکار پخش می شوند ، Google Chrome بارگذاری تنبل را به طور خودکار فراهم می کند. در سایر مرورگرها ، باید ویژگی های زیر را در برچسب ویدیو استفاده نمایید :

 

Lazy Loading و CDN

شبکه های بارگذاری تنبل و تحویل محتوا (CDN) ، مانند Imperva’s CDN  دو روش برای بهبود زمان بارگذاری صفحه و بهینه سازی تجربه کاربری  می باشند. CDN با قرار دادن منابع در سرور حافظه پنهان نزدیک به کاربر  به آنها امکان می دهد تا خیلی سریعتر به آن دسترسی داشته باشند

 

چگونه بارگذاری تنبل با CDN برای بهینه سازی عملکرد وب سایت مقایسه می شود؟

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

 

تأثیر Lazy Loading در SEO

هدف مشترک بارگذاری تنبل  تأثیر آن در رتبه بندی یک وب سایت در موتورهای جستجو است.

بارگذاری تنبل با افزایش سرعت سایت می تواند قطعا روی سئو سایت تاثیر گذار باشد . همانگونه که می دانید سرعت سایت می تواند در بهبود سئو سایت بسیار تاثیر گذار باشد از این رو این ابزار می تواند در بهبود سئو سایت تاثیر گذار باشد