لیزی لود (lazy load)، لود تنبل یا بارگذاری تنبل راهی برای افزایش سرعت سایت است که بسیاری از سایت‌ها از آن استفاده می‌کنند. بارگذاری تنبل می‌تواند تأثیر زیادی بر سرعت وب سایت داشته باشد. اگر تصاویر یا ویدیوهای زیادی در یک صفحه دارید، این تکنیک می‌تواند سرعت لود و بارگذاری سایت را افزایش دهد.
بدون بارگذاری تنبل، مرورگر تمام تصاویر یک صفحه را هنگام بارگیری صفحه دانلود می‌کند. حتی تصاویری که بسیار پایین صفحه هستند و برای کاربر قابل مشاهده نیستند.لیزی لود باعث می‌شود فقط تصاویر بالای صفحه بارگذاری شوند. سپس در زمانی که کاربر به آنها نیاز داشت، بقیه تصاویر را بارگذاری می‌کند.
فهرست مطلب:
لیزی لود چیست؟
لیزی لود فقط تصاویر بالای صفحه را بارگذاری می‌کند. سپس در زمانی که کاربر به آنها نیاز داشت، تصاویر باقیمانده را بارگذاری می‌کند. به جای اینکه منتظر بمانیم تا تمام تصاویر موجود در صفحه بارگذاری شوند، می‌توانیم فقط تصاویری را که در بالای صفحه قابل مشاهده هستند بارگذاری کنیم. این مدل بارگذاری، لود تنبل یا Lazy load نامیده می‌شود.
این نوع بارگذاری “تنبل” نامیده می‌شود زیرا مرورگر وب را تشویق به تعویق می‌کند. هنگام نمایش یک صفحه وب در حال بارگذاری تنبل، یک مرورگر اساساً می‌گوید: “برای بارگیری این تصاویر تا زمانی که واقعاً نیاز داشته باشم صبر می‌کنم.”
بارگذاری تنبل به این معنی است که مرورگر فقط زمانی این تصاویر را بارگذاری می‌کند که کاربر به آنها نیاز داشته باشد. در حالی که اگر لیزی لود پیاده سازی نشده باشد، مرورگر همه تصاویر صفحه را بلافاصله لود خواهد کرد. گرچه ممکن است مفهوم “به تعویق انداختن” در دنیای واقعی خوشایند نباشد اما درمورد به تعویق انداختن لود تصاویر و ویدئوهای سایت، مفهومی کارآمد و مفید است.
به عنوان مثال، یک پست وبلاگ ممکن است یک تصویر در بالای صفحه و یک نمودار نزدیک به پایین صفحه داشته باشد. شخصی که پست وبلاگ را می‌خواند ممکن است برای چند دقیقه به انتهای متن نرسد و پایین صفحه را مشاهده نکند، بنابراین مرورگر منتظر می‌ماند تا خواننده به آن بخش پیمایش کند سپس آن را لود کند.
به این ترتیب، در ابتدا صفحه با سرعت بیشتری بارگیری می‌شود، زیرا مرورگر به جای دو تصویر، یک تصویر را بارگذاری می‌کند.
لیزی لود کاملاً وابسته به حرکت کاربر در صفحه است. به عبارت دیگر، تا زمانی که کاربر به پایین اسکرول نکند، تصاویر پایین صفحه لود نخواهد شد. تصاویر تنها زمانی لود می‌شوند که کاربر با اسکرول و حرکت در صفحه به آنها برسد.
هنگامی که یک صفحه وب بارگیری می‌شود، بخشی که کاربر می‌بیند “above the fold” نامیده می‌شود، در حالی که بخشی که کاربر هنوز نمی‌بیند “below the fold” نامیده می‌شود. تصاویری که در بالای صفحه قرار دارند باید فوراً بارگیری شوند. در غیر این صورت تجربه کاربر تحت تأثیر قرار خواهد گرفت.
اما کاربر تا زمانی که به پایین اسکرول نکند، تصاویر را در زیر صفحه نمی‌بیند؛ بنابراین، تصاویر below the fold می‌توانند از بارگذاری تنبل استفاده کنند. «فولد» به چه معناست؟
above the fold و below the fold از طرح‌بندی روزنامه‌ها سرچشمه می‌گیرد. روزنامه‌ها معمولاً به‌صورت افقی از وسط تا می‌شوند و نیمه بالای آن همان چیزی است که خواننده ابتدا می‌بیند. هنگامی که این عبارت برای یک طرح‌بندی وب به کار می‌رود، «فولد» به پایین صفحه کاربر اشاره دارد؛ بنابراین وقتی می‌گوییم تصاویر در قسمت above the fold لود می‌شوند یعنی زمانی که تصاویر از پایین صفحه کاربر بالاتر می‌آیند شروع به لود شدن می‌کنند.
آموزش پیاده سازی لیزی لود
یکی از راه‌های پیاده‌سازی بارگذاری تنبل، استفاده از ویژگی لود تنبل HTML در تگ تصویر است. افزودن loading=”lazy”، مانند مثال زیر، به مرورگر می‌گوید که صبر کند تا تصویر بارگیری شود تا کاربر به آن نزدیک شود:
<img src=”example.com/image” alt=”example image” width=”100″ height=”100″ loading=”lazy”>
توسعه دهندگان وب همچنین می‌توانند از چارچوب‌های برنامه نویسی برای پیاده سازی بارگذاری تنبل پیچیده‌تر استفاده کنند. Angular معمولاً برای این منظور استفاده می‌شود. کتابخانه جاوا اسکریپت React نیز از لود تنبل پشتیبانی می‌کند.
چه منابع صفحه دیگری می‌توانند از بارگذاری تنبل استفاده کنند؟
- جاوا اسکریپت: جاوا اسکریپت چیزی است که به عنوان منبع مسدودکننده رندر شناخته می‌شود؛ به این معنی که یک مرورگر نمی‌تواند صفحه را تا زمانی که کد جاوا اسکریپت بارگیری شود، رندر کند. کد جاوا اسکریپت را می‌توان به ماژول‌های کوچک‌تر تقسیم کرد که در صورت نیاز بارگذاری می‌شوند و زمان بارگذاری صفحاتی را که نیاز به اجرای جاوا اسکریپت دارند کاهش می‌دهد.
- CSS: CSS همچنین یک منبع مسدود کننده رندر است. تقسیم یک فایل CSS به چندین فایل که فقط در صورت لزوم بارگیری می‌شوند، می‌تواند به کاهش مدت زمانی که مرورگر برای نمایش بقیه صفحه مسدود می‌شود، کمک کند. فایل‌های CSS غیرمسدود باید لینک خاص خود را با ویژگی media اضافه کنند تا به مرورگر بگوید چه زمانی آنها را لود کند.
- iframes: iframes برای جاسازی محتوا از یک منبع خارجی در یک صفحه وب استفاده می‌شود. تگ های iframe می‌توانند شامل همان ویژگی لودینگ HTML باشند که در بالا برای تصاویر توضیح داده شد.
آموزش پیاده سازی لیزی لود با جاوا اسکریپت
ما همچنین می‌توانیم با استفاده از جاوا اسکریپت بارگذاری تنبل را به این مرورگرهای دیگر اضافه کنیم. کتابخانه‌ای که من برای این کار توصیه می‌کنم، lazysizes است. برای این کار باید جاوا اسکریپت سفارشی بنویسیم. این تنها زمانی کتابخانه lazysizes را بارگیری می‌کند که ویژگی “loading” در دسترس نباشد. در اینجا نمونه‌ای از جاوا اسکریپت سفارشی است که این کار را انجام می‌دهد را مشاهده می‌کنید:
در اسکریپت بالا می‌بینید که ما یک ویژگی src به تگ‌های تصویر اضافه نکرده‌ایم. در عوض ما از ویژگی data-src استفاده می‌کنیم. این به این دلیل است که lazysizes از تگ data-src برای بارگذاری تصویر در هنگام مشاهده استفاده می‌کند.
اگر بارگذاری تنبل نیتیو موجود باشد، data-src را با src تعویض می‌کنیم. در غیر این صورت، lazysizes را بارگذاری می‌کنیم که ویژگی data-src را می‌خواند. هنگامی که این تنظیمات را انجام دهید، همه تصاویر در همه مرورگرها به شکل لیزی لود بارگذاری می‌شوند.
آموزش پیاده سازی لیزی لود با iFrames
تصاویر تنها عنصری نیستند که می‌توانند از لود تنبل استفاده کنند. iFrames همچنین می‌تواند به روش لود تنبل بارگذاری شود. یک مثال خوب در این مورد زمانی است که باید یک ویدئوی یوتیوب یا آپارات را در صفحه خود جاسازی کنید.
در تصویر زیر نمونه کد iFrames برای پیاده سازی لیزی لود را مشاهده می‌کنید:
شما می‌توانید ویژگی loading=”lazy” را در انتهای تگ مشاهده کنید. اضافه کردن این ویژگی ایده خوبی است زیرا ویدیوهای یوتیوب و آپارات می‌توانند سرعت صفحه وب را کاهش دهند و اگر به دنبال کسب درآمد از آپارات هستید حتما ویژگی لود تنبل را فعال نمایید.
آموزش پیاده سازی لیزی لود نیتیو در وردپرس
اگر از وردپرس استفاده می‌کنید، گوگل افزونه‌ای را برای بارگذاری تنبل نیتیو منتشر کرده است. پس از نصب افزونه، چیزی برای تنظیم کردن وجود ندارد زیرا این افزونه ویژگی loading=”lazy” را به تمام تصاویر و iframe های سایت شما اضافه می‌کند. این یک افزونه ساده است که می‌تواند تغییرات زیادی در سایت شما ایجاد کند.
از آنجایی که Googlebot با استفاده از کروم به سایت شما نگاه می‌کند، توصیه می‌شود این افزونه را اضافه کنید. شما می‌توانید افزونه لیزی لود گوگل برای سایت‌های وردپرس را از لینک زیر دریافت کنید:
wordpress.org/plugins/native-lazyload/
مزایای لیزی لود چیست؟
بارگذاری سریع‌تر صفحه: اگر شرایط دو صفحه وب کاملاً یکسان باشد، صفحه‌ای سریع‌تر لود خواهد شد که اندازه و حجم فایل‌های آن کمتر باشد. عملکرد سریع وب دارای مزایای متعددی از جمله سئو وبسایت بهتر، نرخ تبدیل بالاتر و بهبود تجربه کاربری است.
لود نشدن محتوای غیر ضروری: فرض کنید یک صفحه چندین تصویر را بارگیری می‌کند اما کاربر قبل از اسکرول کردن از صفحه خارج می‌شود. در چنین حالتی، پهنای باند مورد استفاده برای ارائه تصاویر و زمان صرف شده مرورگر برای درخواست و ارائه تصاویر اساساً هدر می‌رود. در مقابل، لود تنبل تضمین می‌کند که این تصاویر فقط در صورت لزوم بارگیری می‌شوند. این امر باعث صرفه جویی در زمان و قدرت پردازش می‌شود و ممکن است باعث صرفه جویی در هزینه صاحب وب سایت هم بشود زیرا از پهنای باند کمتری استفاده می‌شود.
معایب لیزی لود چیست؟
- کاربران ممکن است منابع را سریع‌تر از حد انتظار درخواست کنند: به عنوان مثال، اگر کاربر به سرعت صفحه را به پایین پیمایش کند، ممکن است مجبور شود منتظر بارگذاری تصاویر بماند. این می‌تواند بر تجربه کاربر تأثیر منفی بگذارد.
- ارتباط اضافی با سرور: به جای درخواست همه محتوای صفحه به طور هم‌زمان، ممکن است مرورگر مجبور شود چندین درخواست را برای محتوا به سرورهای وب سایت ارسال کند زیرا کاربر با صفحه تعامل دارد. استفاده از یک شبکه تحویل محتوا (CDN) این اشکال احتمالی را به حداقل می‌رساند، زیرا تصاویر توسط CDN ذخیره می‌شوند و مرورگر مجبور نیست برای واکشی آنها درخواستی را به سرور اصلی ارسال کند.
- کد اضافی برای پردازش مرورگر: اگر یک توسعه دهنده چندین خط جاوا اسکریپت را به یک صفحه وب اضافه کند تا به مرورگر بگوید چگونه منابع صفحه را بارگذاری کند، این به مقدار کدی که مرورگر باید بارگیری و پردازش کند اضافه می‌کند. اگر این کار به طور ناکارآمد انجام شود، زمان بارگذاری و پردازش جزئی اضافی ممکن است از زمان صرفه جویی شده توسط بارگذاری تنبل بیشتر باشد.
سوالات متداول شما
لیزی لود چیست؟
لیزی لود یا لود تنبل راهی برای افزایش سرعت سایت است. بارگذاری تنبل به این معنی است که مرورگر فقط زمانی این تصاویر را بارگذاری می‌کند که کاربر به آنها نیاز داشته باشد. در حالی که اگر لیزی لود پیاده سازی نشده باشد، مرورگر همه تصاویر صفحه را بلافاصله لود خواهد کرد.
مزایای لیزی لود چیست؟
بارگذاری سریع‌تر صفحه و لود نشدن محتوای غیر ضروری از مهم‌ترین مزایای لیزی لود برای سایت هستند.
دیگران را با نوشتن نظرات خود، برای انتخاب این محصول راهنمایی کنید
لطفا پیش از ارسال نظر، خلاصه قوانین زیر را مطالعه کنید فارسی بنویسید و از کیبورد فارسی استفاده کنید. بهتر است از فضای خالی بیش‌از‌حدِ معمول، شکلک یا ایموجی استفاده نکنید و از کشیدن حروف یا کلمات با صفحه‌کلید بپرهیزید نظرات خود را براساس تجربه و استفاده‌ی عملی و با دقت به نکات فنی ارسال کنید؛ بدون تعصب به محصول خاص، مزایا و معایب را بازگو کنید و بهتر است از ارسال نظرات چندکلمه‌‌ای خودداری کنید بهتر است در نظرات خود از تمرکز روی عناصر متغیر مثل قیمت، پرهیز کنید