Lazy Loading در جوملا و وردپرس

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

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

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

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

برخی اوقات Lazy Loading  همانند اسکرول نامحدود در نظر گرفته می‌شود. صفحه‌ای که دارای اسکرول نامحدود است  از تکنیک Lazy Loading استفاده می‌کند  ولی همانند آن نیست.  اسکرول نامحدود یک جایگزین برای تکنیک قدیمی  Pagination است. در این روش یک  صفحه به بخش‌های مجزایی تقسیم می‌شد و زیر آن یک Navigation Bar با شماره صفحات < 2  3  4… > قرار می‌گرفت و  به کاربران اجازه می‌داد  که به قسمت‌های بعد بروند.  در اسکرول نامحدود نیازی نیست کاربر بر روی لینکی کلیک کند تا آیتم‌های دیگر را مشاهده کند، بلکه زمانی که به انتهای صفحه رسید، بخش بعدی پست یا تصویر به‌صورت خودکار بارگذاری می‌شود. وب‌سایت Pinterest یک نمونه کامل از اسکرول نامحدود است.
مهم‌ترین اشکال استفاده از این روش تأثیری است که بر روی سئو می‌گذارد. موتورهای جستجو مانند گوگل تا زمانی که منابع اولیه بر روی صفحه بارگذاری نشوند، این منابع را index نمی‌کنند. لذا در انتخاب منابعی که قصد دارید از Lazy Loading در آنها استفاده کنید باید دقت زیادی داشته باشید. خصوصاً زمانی که کاربر قصد دارد Scroll back   کند و یا به بخش بالایی صفحه برگردد.
در نظر داشته باشید  بارگذاری متن زمان زیادی نمی‌برد، ضمن اینکه نقش حیاتی در افزایش رتبه شما در بحث سئو  دارد و تأثیر زیادی هم در افزایش سرعت بارگذاری صفحه ندارد. لذا  گرافیک، عکس‌ها و ویدئوها انتخاب‌های بهتری برای Lazy Loading هستند.   استفاده از Lazy Loading در تصاویر و یدئو ها بیشترین تأثیر را دارد.
اولین کاری که برای راه اندازی Lazy Loading می‌توان  انجام داد قرار دادن کدهای آن در قالب فعال وردپرس یا جوملا است. اما برای استفاده مناسب‌تر از آن افزونه‌های متفاوتی وجود دارد و ضمن اینکه نیاز به دانش کد نویسی را از بین می‌برد به شما کمک می‌کند که با اعمال تنظیمات ابن کار را به‌صورت خودکار انجام دهید.
 

افزونه های Lazy Loading در  وردپرس

افزونه BJ lazy Load

محبوب‌ترین افزونه Lazy Loading  برای وردپرس BJ lazy Load است. این افزونه از Java Script برای بارگذاری Place Holder  های (بخش‌هایی که مکان تصاویر را مشخص می‌کنند) تصاویر و ویدئوها استفاده می‌کند  و این Place Holder  ها را با المان‌های مناسب که توسط مرورگر کاربر درخواست می‌شود جایگزین می‌کنند. ضمن اینکه این افزونه بررسی  می‌کند که آیا دستگاه کاربر از جاوا اسکریپت استفاده می‌کند یا خیر و بر اساس آن خود را منطبق می‌کند.
این افزونه تنظیمات زیادی را در اختیار شما قرار می‌دهد و می‌توانید نحوه عملکرد آن را به‌طور کامل در اختیار بگیرید.
 

افزونه  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 استفاده می کند. این افزونه گزینه یا تنظیماتی برای تغییر ندارد و پس از نصب  شروع به کار می کند.
 

افزونه های Lazy Loading  در جوملا

افزونه LLFJ

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

JA Lazy Load

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