لود تنبل (Lazy Loading) قابلیتی است که بارگذاری تصاویر و ویدئوها را در صفحه وب به تعویق میاندازد؛ به این ترتیب که فقط المانهایی که کاربر در نمای صفحه مشاهده مینماید (above-the-fold) بلافاصله بارگذاری میشوند و مابقی در حین اسکرول کاربر دریافت میگردند. این نحوه بارگذاری تصاویر و ویدئوها سبب کاهش حجم اولیه صفحه و مصرف پهنای باند شده و در پی آن شاهد افزایش سرعت بارگذاری صفحات و بهبود معیارهای Core Web Vitals ( به عنوان مثال LCP) خواهیم بود. اگر علاقهمندید که بدانید منظور از لود تنبل یا lazy loading چیست و اطلاعات بیشتری پیرامون این مفهوم به دست آورید، از شما دعوت میکنیم در ادامه این مقاله با آژانس دیجیتال مارکتینگ سوم شخص همراه باشید.
لود تنبل یا Lazy Loading چیست؟
لود تنبل یا Lazy Loading تکنیکی است که در آن بارگذاری بخشهایی از صفحه (بهخصوص تصاویر و ویدئوها) تنها در هنگام نیاز کاربر انجام میشود. در حالت عادی، مرورگر کلیه محتوای صفحه (HTML، CSS، JS و تصاویر) را به طور یکباره دانلود مینماید؛ اما در صورت فعال بود لود تنبل، بعد از بارگذاری اولیه بخش بالای صفحه، سایر تصاویر و منابع فقط زمانی که کاربر به آنها اسکرول کند دریافت میشوند؛ با توجه به این سازوکار متوجه میشویم که لود تنبل سبب کاهش حجم اولیه صفحه و زمان انتظار کاربر خواهد شد.
ناگفته نماند که لود تنبل فقط برای تصاویر نیست؛ بلکه افزونهها و کتابخانههای lazy loading معمولاً بارگذاری ویدئوها و iframeها را نیز به تعویق میاندازند تا از کند شدن سرعت سایت جلوگیری کنند، اما دلیل اهمیت lazy loading چیست و چرا متخصصان به فعالسازی آن تأکید دارند؟
چرا Lazy Loading در طراحی وب اهمیت دارد؟
سرعت بارگذاری صفحات وب از مهمترین عوامل تجربه کاربری و بهینه سازی وب سایت است. طبق آمار گوگل، اگر زمان بارگذاری یک صفحه از ۳ ثانیه بگذرد، حدود ۵۳٪ کاربران موبایل صفحه را ترک میکنند. علاوهبر این، صفحات سریعتر باعث رضایت بالاتر کاربران و به تبع کاهش نرخ پرش خواهند شد. با استفاده از لود تنبل، تعداد و حجم درخواستهای اولیه کاهش یافته و بهخصوص کاربران در اینترنت کندتر، سریعتر به محتوای بالای صفحه دسترسی پیدا میکنند. به این ترتیب، بخش بزرگی از بهینهسازی سرعت سایت انجام میشود؛ صفحاتی که به شیوهای بهینهتر لود شوند، امتیاز Core Web Vitals نیز خواهند داشت. به عنوان مثال، سایت پینترست با فعال کردن لود تنبل توانست ۴۰٪ ترافیک خود را افزایش دهد و رضایت کاربر را بهبود دهد.
تفاوت Lazy Loading با Eager Loading
ما میدانیم که lazy loading چیست؛ اما چه فرقی با Eager Loading دارد؟ در جدول زیر، به بررسی تفاوت این دو مفهوم خواهیم پرداخت:
| معیار | لود تنبل (Lazy Loading) | بارگذاری فوری (Eager Loading) |
| نحوه بارگذاری | منابع (تصاویر، ویدئوها) تا زمانی که کاربر به ناحیه آنها اسکرول کند، لود میشوند. | تمام منابع صفحه (از جمله تصاویر و ویدئوها) بلافاصله و بهطور یکباره بارگذاری میشوند. |
| زمان لود اولیه | کمتر؛ تنها المانهای بالای صفحه (above-the-fold) فوراً لود میشوند. | بیشتر؛ کل صفحه و منابع آن از ابتدا دانلود میشوند. |
| مصرف پهنایباند | پایینتر؛ فقط زمانی عکسها دانلود میشوند که در دید کاربر باشند. | بالاتر؛ تمام تصاویر دانلود میشوند حتی اگر کاربر پایین صفحه نرود. |
| تجربه کاربر (UX) | تجربه کاربری اولیه بهتر و کاهش زمان بارگذاری محسوس. | مناسب صفحات کوتاه؛ در صفحههای حجیم کاربر برای لود تمام منابع منتظر میماند. |
| موارد استفاده | مناسب سایتهایی با محتوای سنگین و تصاویر زیاد. | مناسب زمانی که تمام محتوای صفحه بلافاصله ضروری است (صفحات کوچک یا مهم). |
تکنیکهای پیادهسازی lazy loading چیست؟
به منظور پیادهسازی لیزی لودینگ میتوانیم از روشهای مختلفی استفاده نماییم:
1. اتریبیوت loading=”lazy” در HTML
مرورگرهای مدرن (Chrome، Edge، Firefox و Safari جدید) از ویژگی بومی بارگذاری تنبل پشتیبانی میکنند؛ بنابراین کافی است که شما در تگهای <img> یا <iframe> مانند <img src=”image.jpg” loading=”lazy” alt=”…”> را استفاده نمایید.
2. Intersection Observer API
با این API جاوااسکریپتی میتوان تشخیص داد که چه زمانی یک المان در دید کاربر قرار گرفته و آنگاه آن را لود کرد. جالب است بدانید که بسیاری کتابخانههای متنباز مانند lazysizes و lozad.js از همین روش بهره میبرند.
3. گوش دادن به رویدادهای اسکرول/تغییر اندازه
یکی دیگر از روشها برای فعالسازی لیزی لودینگ این است که به صورت دستی در جاوا اسکریپت رویدادهایی مانند scroll یا resize را بررسی کرده و هنگام ورود تصویر به ناحیه دید کاربر، آن را بارگذاری کنید.
4. فشردهسازی و بهینهسازی تصاویر
علاوهبر لود تنبل، توصیه میشود که پیش از بارگذاری، تصاویر موردنظر را با استفاده از ابزارهایی نظیر PageSpeed یا tinypng بهینهسازی نمایید تا حجم هر تصویر کاهش یابد و به تبع بارگذاری سریعتر شود.
5. تعیین ابعاد تصاویر
برای جلوگیری از «جابجایی چیدمان» (CLS) هنگام lazy load، همیشه عرض و ارتفاع (width و height) تصویر را مشخص کنید یا از CSS aspect-ratio استفاده کنید. انجام این کار باعث رزرو فضای مناسب پیش از بارگذاری تصاویر خواهد شد.
تأثیر لیزی لود بر سرعت سایت و Core Web Vitals
پیادهسازی صحیح لود تنبل در عملکرد سایت بسیار مؤثر است و باعث کاهش حجم دانلود اولیه، بارگذاری سریعتر اولین محتوا و کاهش درخواستهای سرور میشود. در پی آن، شاهد بهبود LCP ، FID و افزایش Dwell Time خواهیم بود.
بیشتر بخوانید: dwell time چیست؟
علاوهبر این، به علت این که تصاویر در پسزمینه بارگذاری میگردند، اولویت CPU برای اجرای کدهای جاوااسکریپت آزادتر شده و به نیاز کاربر سریعتر پاسخ داده میشود؛ به بیان دیگر، بهبود FDI.
البته، باید مراقب اثرات جانبی هم باشید! اگر تصویر بزرگ اصلی صفحه (عنصر LCP) با lazy بارگذاری شود، زمان نمایش آن افزایش یافته و نمره LCP بدتر میشود؛ به عنوان مثال، Lighthouse در این صورت هشدار «Largest Contentful Paint image was lazily loaded» را نشان میدهد. افزون بر این، اگر تصاویر بدون تعیین اندازه یا فضای رزرو شده لود شوند، وارد نشدن ابعاد باعث جابجایی المانها شده و CLS (Cumulative Layout Shift) را بدتر میکند. به همین دلیل، بهترین کار این است که تصاویر مهم و بالای صفحه را به صورت Eager بارگذاری نموده و سایر تصاویر را با Lazy لود کنید تا هم بایتهای بارگذاری شده کمتر شوند و هم این کهCore Web Vitals بهینه گردد. فرض کنید که این کار را انجام دادید، حالا چطور باید از صحت اجرای لیزی لودینگ اطمینان پیدا کنید؟
چگونه صحت اجرای Lazy Loading را بررسی کنیم؟
بعد از پیادهسازی، با کمک ابزارهای توسعه وب میتوانید صحت کارکرد را مورد بررسی قرار دهید. به عنوان مثال، Google Lighthouse یا PageSpeed Insights میتوانند در این زمینه به شما کمک کنند. اگر هشدار «LCP image was lazily loaded» دریافت کردید، یعنی احتمالاً تصویر اصلی صفحهتان lazy شده و باید رفع شود. به منظور بررسی ایندکس شدن محتوا هم میتوانید از Google Search Console استفاده کنید؛ با ابزارURL Inspection بررسی کنید که آیا URLهای تصاویر و ویدئوها در HTML نهایی صفحه ظاهر میشوند یا خیر.
در صورت عدم نمایش استاندارد و صحیح، احتمال دارد که محتوای Lazy از دید گوگل پنهان بماند. در مجموع، شما میتوانید پس از فعالسازی لود تنبل با کمک PageSpeed Insights و کنسول جستجو مطمئن شوید که هم سرعت صفحه ارتقا یافته و هم محتوا به درستی لود میشود.
مزایا و معایب استفاده از Lazy Loading
تا اینجا متوجه شدیم lazy loading چیست. لیزی لودینگ یک سری مزایا و معایب هم دارد که پیشنهاد میشود قبل از پیادهسازی این نقاط مثبت و منفی را بشناسید:
- مزایا
- افزایش سرعت لود اولیه سایت: کاهش حجم دانلود شده در شروع بارگذاری، باعث میشود صفحه سریعتر برای کاربر ظاهر شود.
- کاهش مصرف پهنای باند: تصاویر فقط در صورتی دانلود میشوند که کاربر به آنها برسد، در نتیجه پهنای باند مصرفی و هزینهها کاهش مییابد.
- بهبود تجربه کاربری: با بارگذاری سریعتر بخش بالای صفحه، کاربر سریعتر محتوای موردنیاز خود را میبیند و نرخ پرش کاهش مییابد.
- ارتقای معیارهای فنی: با لود تنبل، امتیاز LCP کاهش مییابد و ارتباط مستقیمی با افزایش امتیاز Core Web Vitals دارد.
- معایب
- کند شدن اسکرول سریع: اگر کاربر سریع اسکرول کند و تصاویر هنوز لود نشده باشند، ممکن است تجربه کاربری ناپیوسته شود. (احتمال کندی اسکرول وجود دارد)
- درخواستهای بیشتر به سرور: مرورگر برای هر اسکرول یا رسیدن به تصویر جدید باید درخواستهای جداگانه ارسال کند که این موضوع ممکن است بار افزودهای به سرور وارد کند.
- بار پردازشی بیشتر: پیادهسازی لود تنبل معمولاً نیازمند کدنویسی جاوا اسکریپت یا افزونه است؛ اگر این کدها بهینه نباشند یا خطا داشته باشند، ممکن است زمان پردازش کلی سایت افزایش یافته و اثر معکوس داشته باشد.
بیشتر بخوانید: مشاوره دیجیتال مارکتینگ
آیا Lazy Loading همیشه بهترین انتخاب است؟
خیر، لود تنبل همواره بهترین گزینه نیست! بهویژه نباید محتوای مهم بالای صفحه (مثل تصاویر هدر یا LCP) را lazy لود کرد، چرا که موجب تأخیر در نمایش اولین محتوای اصلی و کند شدن LCP میشود. علاوهبر این، تحقیقاتی که در این زمینه صورت گرفته، نشان میدهد که وبسایتهایی که تمامی تصاویر را eager بارگذاری میکنند در بسیاری موارد LCP سریعتری دارند. پس چه باید کرد؟
در عمل، بهترین روش این است که بخش بالایی و مهم سایت بدون تاخیر لود شود و فقط محتوای پایینتر صفحه را به تعویق بیندازید. به عبارت دیگر، اگر صفحه شما کوتاه باشد یا تمام محتوا برای کاربر اهمیت فوری داشته باشد، لود تنبل ممکن است کمکی به بهبود عملکرد نکند و بالعکس در سایتهای بلند با تصاویر زیاد بسیار مفید است.
سوم شخص؛ معتبرترین آژانس دیجیتال مارکتینگ + همراه شما در مسیر رشد آنلاین!
در این مقاله دانستیم که لود تنبل یا lazy loading چیست؛ آژانس دیجیتال مارکتینگ «سوم شخص» با تیمی متخصص در حوزه سئو و بهینهسازی وبسایت، همراه شما در ارتقای عملکرد و رتبه سایت خواهد بود. ما با تمرکز بر فاکتورهای فنی سایت مانند سرعت بارگذاری و Core Web Vitals (LCP, CLS, FID)، از ابزارهایی نظیر Google Lighthouse و PageSpeed Insights برای بررسی دقیق عملکرد سایت استفاده میکنیم. همچنین، تیم سوم شخص در پروژههای خود با بهرهگیری از تکنیکهایی مانند Lazy Loading و بهینهسازی تصاویر، سرعت لود صفحات را افزایش داده و تجربه کاربری بهتری فراهم خواهد کرد. مجموعه سوم شخص متعهد است تا با رعایت استانداردهای گوگل و تحلیل دادههای واقعی (Core Web Vitals) رشد آنلاین کسبوکار شما را تسریع کند. برای کسب اطلاعات بیشتر میتوانید همین حالا با کارشناسان آژانس دیجیتال مارکتینگ سوم شخص تماس بگیرید.
سوالات متداول
- آیا Lazy Loading روی سئو تأثیر مستقیم دارد؟
خیر. لود تنبل خودش امتیاز مستقیمی در موتور جستجو ایجاد نمیکند، اما با افزایش سرعت سایت و بهبود Core Web Vitals موجب بهبود تجربه کاربری و در نتیجه اثر غیرمستقیم بر سئو میشود.
- چه زمانی نباید از Lazy Loading استفاده کرد؟
زمانی که تصاویر یا محتواهای مهم صفحه، به عنوان مثال عکس بزرگ هدر یا المان LCP هستند، در این موارد اگر آنها را lazy بارگذاری کنید، زمان نمایش اولیه (LCP/FCP) کاهش یافته و عملکرد صفحه افت میکند.
- آیا همه مرورگرها Lazy Loading را پشتیبانی میکنند؟
میتوان گفت که تقریباً تمام مرورگرهای امروزی از ویژگی بومی lazy loading (اتریبیوت loading) پشتیبانی میکنند. مرورگرهای قدیمیتر (مانند Internet Explorer) این قابلیت را ندارند و در آنها باید از روشهای جایگزین JavaScript استفاده کرد.
