درباره lazy loading باید گفت وب سایت هایی که تصاویر زیادی دارند، زمان بارگذاری آنها نیز طولانی تر خواهد بود. در نظر داشته باشید که برای هر تصویر، درخواست HTTP جداگانه ای ارسال می شود و کاربران باید مدت زمان بیشتری را منتظر بمانند. بنابراین، هر ثانیه اضافی ممکن است باعث خروج آنها از وب سایت شود. این تکنیک به شما کمک می کند تا وب سایتی سبک تر و سریع تری داشته باشید. Lazy Loading به سادگی به این معنی است که منابع صفحه تا زمانی که کاربر به آنها نیاز پیدا نکرده است، بارگذاری نشوند.
راه حل lazy loading چیست ؟
(Lazy Loading) با ایجاد تأخیر در لود محتوا، آیتم‌هایی مانند تصاویر را تا زمانی که کاربر درخواست مشاهده آنها را داشته باشد، در زیر لایه Fold مخفی نگه می‌دارد. به این ترتیب، تنها تعدادی از تصاویر لود می‌شوند و بقیه تصاویر زمانی که کاربر به پایین صفحه اسکرول کند، بارگذاری خواهند شد.
برای مثال، تصور کنید یک صفحه اصلی با تعداد زیادی تصویر و حتی یک ویدیو دارید. در زمان بارگذاری اولیه، کاربر این تصاویر و ویدئو را نمی‌بیند. در عوض، این محتوا فقط پس از اسکرول کردن کاربر به پایین صفحه نمایش داده می‌شود، یعنی زمانی که واقعاً به آن نیاز است.
گاهی اوقات بارگذاری تنبل مشابه با اسکرول نامحدود در نظر گرفته می‌شود. صفحه‌ای که دارای اسکرول نامحدود است از تکنیک بارگذاری تنبل استفاده می‌کند، اما کاملاً شبیه آن نیست. اسکرول نامحدود جایگزینی برای تکنیک قدیمی صفحه‌بندی (pagination) است. در روش صفحه‌بندی، صفحه به بخش‌های مختلف تقسیم می‌شد و یک نوار ناوبری با شماره صفحات < ۲ ۳ ۴… > در پایین قرار می‌گرفت و به کاربران اجازه می‌داد به بخش‌های بعدی بروند. اما در اسکرول نامحدود، کاربر نیازی به کلیک بر روی لینکی برای مشاهده آیتم‌های بیشتر ندارد.
زمانی که به انتهای صفحه می‌رسد، بخش بعدی پست یا تصویر به صورت خودکار بارگذاری می‌شود. وب‌سایت Pinterest نمونه کاملی از اسکرول نامحدود است. حال که با مفهوم بارگذاری تنبل آشنا شدید، در ادامه مقاله به بررسی معایب بارگذاری تنبل می‌پردازیم.
ایراد lazy loading چیست ؟
مهم ترین اشکال استفاده از این روش به هنگام بررسی seo سایت تاثیری منفی است که بر روی SEO می گذارد.موتورهای جستجو مانند گوگل تا زمانی که منابع اولیه بر روی صفحه لود نشوند، این منابع را index نمی کنند. لذا در انتخاب منابعی که قصد دارید از Lazy Loading در آنها استفاده کنید باید دقت زیادی داشته باشید. خصوصا زمانی که کاربر قصد دارد Scroll back کند و یا به بخش بالایی صفحه برگردد.
در نظر داشته باشید لود متن زمان زیادی نمی برد، ضمن اینکه نقش حیاتی در افزایش رتبه شما در بحث SEO دارد و تاثیر زیادی هم در افزایش سرعت لود صفحه ندارد. لذا گرافیک ، عکسها و ویدئو ها انتخاب های بهتری برای Lazy Loading هستند. استفاده از Lazy Loading در تصاویر و یدئو ها بیشترین تاثیر را دارد.
اولین کاری که برای راه اندازی lazy Loading می توان انجام داد قرار دادن کد های آن در قالب فعال وردپرس یا جوملا است. اما برای استفاده مناسب تر از آن پلاگین های متفاوتی وجود دارد و ضمن اینکه نیاز به دانش کدنویسی را از بین می برد به شما کمک می کند که با اعمال تنظیمات این کار را بصورت خودکار انجام دهید.
افزونه lazy load وردپرس
افزونه BJ lazy Load
محبوب ترین افزونه lazy load وردپرس ، افزونه bj lazy load است. این افزونه از Java Script برای لود Place Holder های ( بخش هایی که مکان تصاویر را مشخص می کنند) تصاویر و ویدئو ها استفاده می کند و این Place Holder ها را با المان های مناسب که توسط مرورگر کاربر درخواست می شود جایگزین می کنند. ضمن اینکه این افزونه بررسی می کند که آیا دستگاه کاربر از جاوا اسکریپت استفاده می کند یا خیر و بر اساس آن خود را منطبق می کند.این افزونه تنظیمات زیادی را در اختیار شما قرار می دهد و می توانید نحوه عملکرد آن را بطور کامل در اختیار بگیرید.
افزونه Image Lazy Load Unvei.jsl
این افزونه نسخه سبک تر افزونه Lazy Load است. این افزونه از نمایش تصاویر با کیفیت در نمایشگرهای Retina پشتیبانی می کند و دارای تنظیمات و گزینه های مختلفی برای لود تصاویر در دستگاه های موبایل و همچنین تنظیم تعداد پیکسلهای تصویر هنگام لود آنها ست.
افزونه Unveil Lazy Load
افزونه Unveil Lazy Load ، افزونه سبک بر مبنای jQuery است که از Unveil.js نیز استفاده می کند. نصب و فعال کردن این افزونه بسیار ساده و آسان است.
افزونه lazy load
یک افزونه ساده است و نیاز به پیکربندی خاصی ندارد. فقط آن را نصب کرده و و فعال نمایید. این افزونه از jQuery.sonar استفاده می کند . بد نیست بدانید lazy load توسط تیم wordpress.com نوشته شده است.
افزونه jQuery Image Lazy Load WP
همانند نام آن ، این jQuery Image Lazy Load WP از jQuery استفاده می کند. کار با آن بسیار آسان است. پس از فعال کردن آن، با اسکرول به سمت پایین صفحه، تصاویر نمایش داده می شوند.
افزونه Rocket Lazy Load
این اسکریپت بسیار کوچک (کمتر از ۲ کیلوبایت) برای نمایش تمامی تصاویر پست،ویجت ها، تصاویر بندانگشتی و شکلک ها از Lazy Loading استفاده می کند.Rocket Lazy Load گزینه یا تنظیماتی برای تغییر ندارد و پس از نصب شروع به کار می کند.
افزونه های Lazy Loading در جوملا
JA Lazy Load
افزونه JA Lazy Load بر پایه jQuery است که در JavaScript نوشته شده است. استفاده از این افزونه در صفحاتی که طولانی هستند و تصاویر بزرگی دارند باعث افزایش چشمگیر سرعت لود صفحه می شود.
افزونه LLFJ
این افزونه بسیار ساده و سبک بوده و پس از نصب به راحتی فعال می شود. در این افزونه تصاویر تنها هنگامی نمایش داده می شوند که در محدوده visible (بخش هایی که در مانیتور کاربر قابل روئیت هستند) قرار بگیرند.
نتیجه گیری
Lazy Loading یک تکنیک مؤثر برای بهبود سرعت بارگذاری صفحات وب است که به ویژه برای وب‌سایت‌هایی با محتوای تصویری یا ویدیویی زیاد مفید می‌باشد. این روش با بارگذاری تأخیری منابع، از افزایش زمان بارگذاری جلوگیری کرده و تجربه کاربری را بهبود می‌بخشد. با این حال، باید توجه داشت که استفاده نادرست از Lazy Loading می‌تواند تأثیر منفی بر SEO داشته باشد، زیرا موتورهای جستجو ممکن است منابع بارگذاری شده به تأخیر افتاده را ایندکس نکنند. بنابراین، انتخاب منابع مناسب برای استفاده از این تکنیک و استفاده از افزونه‌های مناسب در پلتفرم‌هایی مانند وردپرس و جوملا می‌تواند به بهبود عملکرد و سرعت سایت کمک کند.
