همه چیز در مورد لیزی لودینگ (معرفی افزونه 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 نوشته شده است. استفاده از این افزونه در صفحاتی که طولانی هستند و تصاویر بزرگی دارند باعث افزایش چشمگیر سرعت بارگذاری صفحه می شود.
سوالات متداول در رابطه با لیزی لودینگ
بهترین افزونه لیزی لودینگ وردپرس چیست؟
افزونههایی مثل Smush ، Lazy Loader، Lazy Load by WP Rocketاز بهترین گزینهها برای فعال سازی لود تنبل در وردپرس هستند. این افزونهها به راحتی و بدون نیاز به کدنویسی، تصاویر و ویدئوها را هنگام اسکرول لود میکنند.
آیا لیزی لودینگ در سئو سایت تاثیری دارد؟
بله، چون lazy loading باعث افزایش سرعت صفحات میشود و سرعت یکی از فاکتورهای مهم سئو است. همچنین تجربه کاربری بهتر و کاهش نرخ پرش از دیگر مزایای آن است که در نهایت به بهبود رتبه سایت کمک میکند.
برای ایجاد امکان lazy loading در صفحات سایت، استفاده از افزونه ورد پرس کار درستی است؟
اگر از وردپرس استفاده میکنید و نمیخواهید کدنویسی کنید، استفاده از افزونه بهترین و ساده ترین راهحل است. اکثر افزونههای معتبر این کار را بدون کاهش کیفیت تجربه کاربر انجام میدهند.
آیا استفاده از برای وب سایت من ضروری است؟
اگر وبسایت شما شامل تصاویر، ویدئو یا محتوای گرافیکی سنگین است، فعال سازی lazy loading توصیه میشود. این تکنیک به کاهش زمان لود، صرفه جویی در مصرف اینترنت کاربر و بهبود عملکرد کلی سایت کمک میکند.
نظرات کاربران
سلام روز بخیر، آیا لیزی لود فقط برای تصاویر کاربرد داره یا ویدئوها هم شاملش میشن؟
سلام سپاسگزارم، لیزی لودینگ علاوه بر تصاویر، برای iframeها (مثل ویدیوهای یوتیوب یا آپارات) هم کاربرد داره. یعنی تا زمانی که کاربر به اون قسمت از صفحه نرسه، ویدئو لود نمیشه و این باعث بهینهسازی بیشتر سرعت سایت میشه. فقط کافیه تنظیمات افزونه رو درست انجام بدین.
سلام من لیزی لود رو روی سایتم فعال کردم ولی به نظر میرسه بعضی از تصاویر اصلاً لود نمیشن. دلیلش چیه؟
سلام دوست عزیز، گاهی این مشکل به دلیل ناسازگاری قالب یا افزونههای دیگه با افزونه لیزی لود هست. پیشنهاد میکنیم از افزونههای معتبر مثل a3 Lazy Load یا WP Rocket استفاده کنید و حتماً بررسی کنید که تصاویر دارای تگ loading=”lazy” باشن. همچنین کش مرورگر رو هم پاک کنید و دوباره تست بگیرید.
مقالات دیگر
آموزش سئو وردپرس، بهینه سازی سئو وردپرس با +12 تکنیک کاربردی
رتبه کلمه کلیدی در گوگل چیست و چطور بررسی می شود؟
محتوا سئو شده چیست و چگونه باید تولید شود؟
کلمه کلیدی در سئو چیست؟ چگونه کلمات را انتخاب کنیم؟
سئو وردپرس چیست؟ ۱۴ ضرورت در سئو سایت وردپرس
بزرگترین لیست اصطلاحات سئو، بیش از 190 اصطلاح بهینه سازی سایت
تدوین استراتژی سئو، راهنمای کامل اجرا 0 تا 100 + دانلود
مدیر سئو کیست؟ چرا به مدیریت سئو پیشرفته نیاز داریم؟
سئو کلاه سفید یا White hat seo چیست؟ +22 تکنیک برتر
سئو کلاه خاکستری چیست ؟ معجزه ای با Gray hat SEO
خدمات ما