لیزی لودینگ Lazy Loading یا لود تنبل چیست

لیزی لودینگ، (Lazy Loading) یا لیزی لود چیست؟ به طور کلی کسانی که با طراحی سایت یا ارتقاع رتبه سایت در گوگل سرو کار دارند، چندین بار با واژه لیزی لود یا بارگذاری تنبل سرو داشته اند. اگر شما هم با این واژه برخورد داشته اید و به دنبال مفهوم و کارکرد این واژه هستید در ادامه این مطلب با همراه باشید تا بیشتر با این مقوله آشنا شویم.

لیزی لود Lazy Loading یا بارگذاری تنبل چیست؟

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

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

به طور کلی کلی لیزی لودینگ یا بارگذاری تنبل برای کسانی که دنبال افرایش سرعت بارگذاری صفحات وب سایت و در کل به دنبال بهبود سئو سایت و ارتقاع رتبه هستند بسیار مهم است. مهمترین عوامل استفاده از لیزی لود عبارتند از:

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

عملکرد لیزی لود و یا به عبارتی لیزی لودینگ چگونه کار می کند؟

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

نحوه استفاده از لیزی لودینگ lazy load (Lazy Loading) برای بهبود سرعت وبسایت

لیزی لودینگ lazy load یا بارگذاری تنبل تکنیکی است که به وبسایت شما کمک می‌کند سریع‌تر بارگذاری شود. به جای بارگذاری همزمان تمام عناصر یک صفحه، تنها مواردی که کاربر در ابتدا می‌بیند بارگذاری می‌شوند. این کار باعث می‌شود تجربه کاربری بهبود یابد و نرخ پرش (Bounce Rate) کاهش پیدا کند.

درباره ریسپانسیو بیشتر بدانید

روش‌های استفاده و پیاده‌سازی لیزی لودینگ lazy load

چندین روش برای پیاده‌سازی لیزی لودینگ یا لیزی لود وجود دارد که از جمله آن‌ها می‌توان به موارد زیر اشاره کرد:

1- استفاده از کتابخانه‌های جاوا اسکریپت

• Lazysizes: یکی از محبوب‌ترین کتابخانه‌هاست که به سادگی قابل استفاده است و از انواع مختلف عناصر پشتیبانی می‌کند.
• Lozad.js: کتابخانه‌ای سبک و سریع با قابلیت سفارشی‌سازی بالا.
• Intersection Observer API: یک API بومی مرورگر است که به شما امکان می‌دهد تشخیص دهید که یک عنصر چه زمانی وارد یا خارج از محدوده دید کاربر می‌شود.

2- استفاده از افزونه‌های وردپرس

اگر از وردپرس استفاده می‌کنید، می‌توانید از افزونه‌های آماده‌ای مانند WP Rocket، Smush یا Perfmatters برای فعال‌سازی لیزی لودینگ استفاده کنید. این افزونه‌ها معمولاً تنظیمات ساده‌ای دارند و به شما اجازه می‌دهند لیزی لودینگ را برای تصاویر، iframe‌ها و سایر عناصر فعال کنید.

3-پیاده‌سازی دستی با استفاده از جاوا اسکریپت

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

مثال ساده با استفاده از Lazysizes

کد html

<img data-src=”image.jpg” class=”lazyload” alt=“تصویر نمونه”>

JavaScript

<script src=”lazysizes.min.js”></script>

در کد بالا، data-src آدرس اصلی تصویر را نگه می‌دارد و کلاس lazyload به کتابخانه Lazysizes می‌گوید که این تصویر باید به صورت تنبل بارگذاری شود.

نکات مهم

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

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