همه چیز در مورد لیزی لودینگ (معرفی افزونه Lazy Loading)

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

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

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

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

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

تصاویر بیشترین نوع داده (بعد از ویدیوها) در هر صفحه وب هستند و به طور متوسط ​​90٪ از حجم یک صفحه را تشکیل می دهند. بارگذاری تنبل (یا بارگذاری با تاخیر) تصاویر منجر به بارگذاری سریعتر صفحات، تجربه کاربری بهتر و رتبه بندی ارگانیک بهتر برای وب سایت شما می شود. استفاده از لیزی لودینگ یک موقعیت برد-برد ایجاد می کند.

لیزی لودینگ چگونه کار می‌کند؟

لیزی لودینگ (Lazy Loading) یا لود تنبل با ایجاد تأخیر در بارگذاری محتوا، تا زمانی که کاربر درخواست دیدن آیتم‌هایی مانند تصاویر را ارسال کند آنها را در زیر لایه فلد مخفی نگه می‌دارد. بنابراین تنها برخی از تصاویر بارگذاری می‌شوند و بقیه آنها زمانی که کاربر به سمت پایین صفحه اسکرول کند بارگذاری می‌گردند.

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

برخی اوقات لیزی لودینگ (Lazy Loading) همانند اسکرول نامحدود در نظر گرفته می‌شود. صفحه‌ای که دارای اسکرول نامحدود است از تکنیک لود تنبل استفاده می‌کند ولی همانند آن نیست. اسکرول نامحدود یک جایگزین برای تکنیک قدیمی Pagination است.

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

بیشتر بخوانید : بهبود سئو سایت

مهم‌ترین اشکال استفاده از این روش تأثیری است که بر روی سئو می‌گذارد. موتورهای جستجو مانند گوگل تا زمانی که منابع اولیه بر روی صفحه بارگذاری نشوند، این منابع را index نمی‌کنند. لذا در انتخاب منابعی که قصد دارید از Lazy Loading در آنها استفاده کنید باید دقت زیادی داشته باشید. خصوصاً زمانی که کاربر قصد دارد Scroll back   کند و یا به بخش بالایی صفحه برگردد.

در نظر داشته باشید  بارگذاری متن زمان زیادی نمی‌برد، ضمن اینکه نقش حیاتی در افزایش رتبه شما در بحث سئو  دارد و تأثیر زیادی هم در افزایش سرعت بارگذاری صفحه ندارد. لذا  گرافیک، عکس‌ها و ویدئوها انتخاب‌های بهتری برای Lazy Loading هستند.   استفاده از Lazy Loading در تصاویر و یدئو ها بیشترین تأثیر را دارد.

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

چگونگی تشخیص فعال lazy loading (لود کند، لود تنبل) بودن برای صفحات سایت

برای اینکه بفهمید آیا تکنیک لود تنبل در سایت تان فعال است یا نه، چند راه ساده وجود دارد. اول از همه می‌توانید با ابزار مرورگر (Inspect Element) روی یک تصویر یا ویدئو راست کلیک کرده و بررسی کنید آیا ویژگی loading=”lazy”  در تگ آن وجود دارد یا نه. این ویژگی به مرورگر می‌گوید که فایل موردنظر را تا زمان نیاز (مثلاً بعد از اسکرول) لود نکند.

راه دوم استفاده از ابزارهای تست سرعت سایت مثل PageSpeed Insights  یا GTmetrix است. اگر در این ابزارها پیشنهاد به “defer offscreen images” یا “Enable lazy loading” داده نشود، یعنی احتمالاً این قابلیت فعال است. همچنین می‌توانید خودتان با اسکرول آرام در صفحه ببینید آیا تصاویر و ویدئوها به مرور لود می‌شوند یا همه از ابتدا بارگذاری شده‌اند. اگر لود تنبل فعال باشد، فقط محتوای قابل دیدن در صفحه به سرعت لود می‌شود و باقی موارد بعد از اسکرول ظاهر می‌شوند.

فعال سازی لیزی لودینگ در وردپرس 5.4 به بالا

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

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

افزونه های فعال سازی لیزی لودینگ (Lazy Loading) در وردپرس

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

فعال سازی لیزی لودینگ با افزونه BJ lazy Load

محبوب‌ترین افزونه لود تنبل Lazy Loading  برای وردپرس “BJ lazy Load” است. این افزونه از جاوا اسکریپت برای بارگذاری پلیس هلدرهای (بخش‌هایی که مکان تصاویر را مشخص می‌کنند) تصاویر و ویدئوها استفاده می‌کند و آنها را با المان‌های مناسب که توسط مرورگر کاربر درخواست می‌شود جایگزین می‌کند.

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

فعال سازی لیزی لودینگ با افزونه Image Lazy Load Unvei

این افزونه نسخه سبک تر افزونه Lazy Load است. این افزونه از نمایش تصاویر با کیفیت در نمایشگرهای Retina  پشتیبانی می کند و دارای تنظیمات و گزینه های مختلفی برای بارگذاری  تصاویر در دستگاه های موبایل و همچنین تنظیم تعداد پیکسلهای تصویر هنگام بارگذاری آنها ست.

فعال سازی لیزی لودینگ با افزونه Unveil Lazy Load

یک افزونه سبک بر مبنای jQuery  است که از Unveil.js نیز استفاده می کند. نصب و فعال کردن این افزونه بسیار ساده و آسان است.

فعال سازی لیزی لودینگ با افزونه Lazy Load

یک افزونه ساده است و نیاز به پیکربندی خاصی ندارد. فقط آن را نصب کرده و و فعال نمایید. این افزونه از jQuery.sonar استفاده می کند . بد نیست  بدانید lazy Load توسط تیم wordpress.com نوشته شده است.

فعال سازی لیزی لودینگ با افزونه jQuery Image Lazy Load WP

همانند نام آن ، این افزونه از jQuery   استفاده می کند. کار با آن بسیار آسان است. پس از فعال کردن آن، با اسکرول به سمت پایین صفحه،  تصاویر نمایش داده می شوند.

افزونه Rocket Lazy Load

این اسکریپت بسیار کوچک (کمتر از 2 کیلوبایت) برای نمایش تمامی تصاویر پست،ویجت ها، تصاویر بندانگشتی و  شکلک ها از Lazy Loading استفاده می کند. این افزونه گزینه یا تنظیماتی برای تغییر ندارد و پس از نصب  شروع به کار می کند.

فعالسازی لیزی لودینگ در جوملا نسخه 4 به بالا

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

افزونه های فعال سازی لیزی لودینگ (Lazy Loading)  در جوملا

اگر چیزی در مورد جوملا نمی دانید پیشنهاد می کنم مقاله آموزش جوملا برای مبتدیان را بخوانید.

فعال سازی لیزی لودینگ با افزونه LLFJ

این افزونه بسیار ساده و سبک بوده و پس از نصب به راحتی فعال می شود. در این افزونه تصاویر تنها هنگامی نمایش داده می شوند  که در محدوده visible (بخش هایی که در مانیتور کاربر قابل روئیت هستند) قرار بگیرند.

فعال سازی لیزی لودینگ با JA Lazy Load

یک افزونه بر پایه jQuery است که در Javascript نوشته شده است. استفاده از این افزونه در صفحاتی که طولانی هستند و تصاویر بزرگی دارند باعث افزایش چشمگیر سرعت بارگذاری صفحه می شود.