۵ روش Lazy Load تصاویر و افزایش سرعت سایت

پنج روش برای بارگذاری تنبل (Lazy Loading) تصاویر و بهبود عملکرد وب‌سایت

در دنیای وب امروز، سرعت حرف اول را می‌زند. کاربرانی که با صفحات کند مواجه می‌شوند، به سادگی وب‌سایت شما را ترک می‌کنند. یکی از بزرگ‌ترین عوامل کندی وب‌سایت‌ها، تصاویر حجیم هستند. اما راه حل چیست؟ «بارگذاری تنبل» یا Lazy Loading یک تکنیک هوشمندانه است که بارگذاری تصاویر را تا زمانی که کاربر به آن‌ها نزدیک شود، به تعویq می‌اندازد. این کار نه تنها سرعت اولیه بارگذاری صفحه را به شدت افزایش می‌دهد، بلکه در مصرف پهنای باند کاربران نیز صرفه‌جویی می‌کند.

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

چرا بارگذاری تنبل تصاویر اینقدر مهم است؟

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

• بهبود سرعت بارگذاری اولیه: با بارگذاری تنبل، مرورگر فقط محتوای ضروری و قابل مشاهده در بالای صفحه (above-the-fold) را بارگذاری می‌کند. این باعث می‌شود صفحه بسیار سریع‌تر تعاملی و قابل استفاده شود.
• صرفه‌جویی در منابع: چرا تصویری را بارگذاری کنیم که شاید کاربر هرگز آن را نبیند؟ بارگذاری تنبل با جلوگیری از دانلودهای غیرضروری، در مصرف پهنای باند کاربر و منابع سرور صرفه‌جویی می‌کند.
• تجربه کاربری بهتر: یک وب‌سایت سریع‌تر به معنای کاربران راضی‌تر است. این موضوع به طور مستقیم بر معیارهایی مانند نرخ پرش (Bounce Rate) و زمان ماندن در صفحه تأثیر مثبت دارد.

پنج تکنیک کاربردی برای پیاده‌سازی Lazy Loading

اکنون که با اهمیت موضوع آشنا شدیم، بیایید به سراغ روش‌های عملی پیاده‌سازی برویم.

۱. استفاده از بارگذاری تنبل بومی (Native Lazy Loading) در HTML

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

کافی است ویژگی loading="lazy" را به تگ <img> خود اضافه کنید:

<img src="image.jpg" loading="lazy" alt="یک تصویر زیبا از طبیعت" width="600" height="400">

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

معایب: این ویژگی در مرورگرهای قدیمی‌تر پشتیبانی نمی‌شود، بنابراین برای پوشش کامل کاربران به یک راه حل جایگزین (fallback) نیاز خواهید داشت.

۲. پیاده‌سازی با Intersection Observer API

این API مدرن جاوا اسکریپت، روشی بسیار کارآمد برای تشخیص اینکه یک المان وارد کادر دید (viewport) کاربر شده است یا خیر، ارائه می‌دهد. برخلاف روش‌های قدیمی که به رویداد scroll وابسته بودند، Intersection Observer عملکرد بسیار بهتری دارد و منابع سیستم را هدر نمی‌دهد.

مراحل کار به این صورت است:

1. در کد HTML، آدرس تصویر اصلی را در ویژگی data-src قرار دهید و src را با یک تصویر جایگزین (placeholder) کم‌حجم پر کنید.
2. با جاوا اسکریپت، یک `IntersectionObserver` بسازید که تمام تصاویر مورد نظر را مشاهده کند.
3. هنگامی که تصویری وارد کادر دید می‌شود، مقدار data-src را به src منتقل کنید تا بارگذاری آغاز شود.
4. پس از بارگذاری، مشاهده آن تصویر را متوقف کنید تا منابع آزاد شوند.

در زیر یک نمونه کد ساده آورده شده است:

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Fallback for older browsers
  }
});

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

اگر نمی‌خواهید چرخ را از اول اختراع کنید، کتابخانه‌های آماده زیادی برای این کار وجود دارند. این کتابخانه‌ها معمولاً بسیار بهینه‌سازی شده‌اند، از مرورگرهای مختلف پشتیبانی می‌کنند و ویژگی‌های اضافی مانند بارگذاری تنبل ویدیوها یا پس‌زمینه‌ها را نیز ارائه می‌دهند.

برخی از کتابخانه‌های محبوب عبارتند از:

• lazysizes: یک کتابخانه بسیار قدرتمند و پر از ویژگی که به طور خودکار تصاویر را شناسایی می‌کند و نیازی به پیکربندی جاوا اسکریپت ندارد.
• lozad.js: یک کتابخانه بسیار سبک و سریع که از Intersection Observer استفاده می‌کند.

برای استفاده از `lazysizes`، کافی است اسکریپت آن را به صفحه اضافه کرده و کلاس `lazyload` را به تصاویر خود بدهید. به همین سادگی!

۴. رویکرد ترکیبی: بومی با جایگزین جاوا اسکریپت

این روش بهترین رویکرد برای محیط‌های واقعی (Production) است. در این حالت، شما از مزایای بارگذاری تنبل بومی بهره می‌برید و همزمان با یک اسکریپت جاوا اسکریپت (مانند Intersection Observer) از کاربرانی که مرورگرهای قدیمی‌تر دارند، پشتیبانی می‌کنید.

می‌توانید با یک قطعه کد کوتاه بررسی کنید که آیا مرورگر از بارگذاری تنبل بومی پشتیبانی می‌کند یا خیر:

if ('loading' in HTMLImageElement.prototype) {
  // Browser supports native lazy loading
  const images = document.querySelectorAll('img[loading="lazy"]');
  images.forEach(img => {
    img.src = img.dataset.src;
  });
} else {
  // Fallback to a JavaScript-based solution
  // (e.g., using Intersection Observer)
}

با این روش، شما عملکرد بهینه را برای کاربران مدرن تضمین می‌کنید و هیچ کاربری را از دست نمی‌دهید.

۵. روش سنتی با استفاده از رویدادها (Event Handlers)

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

اگرچه امروزه استفاده از آن توصیه نمی‌شود، اما دانستن آن برای درک تکامل تکنیک‌های وب و کار با کدهای قدیمی مفید است.

نکات تکمیلی و بهترین شیوه‌ها

• جلوگیری از تغییر چیدمان (CLS): همیشه ابعاد (width و height) تصاویر خود را مشخص کنید. این کار از پرش محتوا در هنگام بارگذاری تصویر جلوگیری می‌کند که یک فاکتور مهم در Core Web Vitals گوگل است.
• محتوای بالای صفحه: هرگز تصاویری را که در بالای صفحه و در دید اولیه کاربر قرار دارند، تنبل بارگذاری نکنید. این تصاویر باید به سرعت بارگذاری شوند تا کاربر با صفحه خالی مواجه نشود. می‌توانید از loading="eager" برای این تصاویر استفاده کنید.
• فال‌بک برای سئو: اگرچه خزنده‌های مدرن مانند گوگل می‌توانند جاوا اسکریپت را اجرا کنند، اما برای اطمینان کامل، می‌توانید از تگ <noscript> برای قرار دادن نسخه کامل تگ <img> استفاده کنید تا موتورهای جستجو حتماً تصویر شما را ببینند.

نتیجه‌گیری

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