پیاده سازی تکنیک های Lazy Loading برای تصاویر

بارگذاری تنبل یا Lazy Loading تکنیکی حیاتی در بهینه سازی وب سایت هاست که به واسطه آن تصاویر و سایر عناصر بصری تنها زمانی بارگذاری می شوند که در محدوده دید کاربر (Viewport) قرار گیرند. این رویکرد هوشمندانه، سرعت بارگذاری اولیه صفحات را به طور چشمگیری افزایش داده، مصرف پهنای باند را کاهش می دهد و تجربه کاربری روان تری را به ارمغان می آورد.
وب سایت های مدرن مملو از محتوای بصری نظیر تصاویر با کیفیت بالا، ویدیوها و انیمیشن ها هستند که نقش بسزایی در جذب مخاطب و انتقال اطلاعات ایفا می کنند. با این حال، حجم بالای این عناصر می تواند به چالشی جدی برای سرعت بارگذاری صفحات تبدیل شود. هرچه یک صفحه وب سنگین تر باشد، زمان بیشتری برای نمایش کامل آن به کاربر نیاز است و این تأخیر به طور مستقیم بر تجربه کاربری، نرخ پرش (Bounce Rate) و حتی رتبه سایت در موتورهای جستجو تأثیر منفی می گذارد. تکنیک بارگذاری تنبل به عنوان یک راه حل کارآمد، این امکان را فراهم می آورد تا منابع بصری غیرضروری در لحظه اول بارگذاری نشوند و تنها زمانی که کاربر به آن بخش از صفحه اسکرول می کند، شروع به بارگذاری کنند. این مقاله به بررسی عمیق این تکنیک، مزایای آن، روش های مختلف پیاده سازی و بهترین شیوه ها برای دستیابی به حداکثر کارایی می پردازد.

Lazy Loading چیست؟ درک عمیق تر از بارگذاری تنبل

Lazy Loading، که در فارسی به آن بارگذاری تنبل یا لیزی لود نیز گفته می شود، یک الگوی طراحی وب است که بارگذاری منابع خاص، مانند تصاویر، ویدیوها یا آی فریم ها را تا زمانی که واقعاً مورد نیاز کاربر قرار گیرند، به تعویق می اندازد. به زبان ساده، به جای اینکه مرورگر بلافاصله پس از ورود به یک صفحه، تمامی محتوای آن را بارگذاری کند، تنها محتوایی را لود می کند که در لحظه اول در دید کاربر (Viewport) قرار دارد. سایر محتواها به صورت Placeholder نمایش داده می شوند و با اسکرول کردن کاربر به سمت پایین صفحه، به تدریج و در زمان مناسب بارگذاری می شوند.

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

مکانیزم کلی عملکرد Lazy Loading بر پایه شناسایی موقعیت کاربر نسبت به عناصر صفحه است. مرورگر یا اسکریپت Lazy Loading به طور مداوم وضعیت اسکرول کاربر و موقعیت Viewport (ناحیه قابل مشاهده صفحه) را رصد می کند. زمانی که یک تصویر یا ویدیوی Placeholder به نزدیکی Viewport می رسد یا وارد آن می شود، اسکریپت مربوطه فعال شده، آدرس واقعی منبع را از یک ویژگی داده ای (مانند data-src) خوانده و آن را جایگزین Placeholder می کند. سپس مرورگر آن منبع را بارگذاری و نمایش می دهد. این فرآیند پویا و هوشمندانه تضمین می کند که منابع فقط در زمان نیاز و با حداقل تأخیر در اختیار کاربر قرار گیرند.

مزایای بی شمار پیاده سازی Lazy Loading برای وب سایت شما

پیاده سازی Lazy Loading نه تنها یک تکنیک بهینه سازی، بلکه یک استراتژی جامع برای بهبود عملکرد و تجربه کاربری وب سایت است. این رویکرد هوشمندانه مزایای متعددی را به همراه دارد که در ادامه به تفصیل به آن ها می پردازیم:

افزایش چشمگیر سرعت بارگذاری اولیه صفحه

یکی از مهم ترین مزایای Lazy Loading، کاهش قابل توجه زمان بارگذاری اولیه صفحه است. با بارگذاری نکردن تصاویر و ویدیوهایی که در لحظه اول دیده نمی شوند، حجم داده های اولیه مورد نیاز برای نمایش صفحه به شدت کاهش می یابد. این موضوع به بهبود متریک های حیاتی Core Web Vitals مانند First Contentful Paint (FCP) و Largest Contentful Paint (LCP) کمک شایانی می کند. FCP زمان نمایش اولین محتوا و LCP زمان نمایش بزرگترین عنصر محتوایی صفحه را اندازه گیری می کند. با Lazy Loading، عناصر بالای خط دید (Above the Fold) سریع تر بارگذاری می شوند که به معنای بهبود LCP است و حس سرعت را به کاربر منتقل می کند.

بهبود تجربه کاربری (UX)

سرعت بارگذاری مستقیم بر تجربه کاربری تأثیر می گذارد. یک سایت سریع تر، کاربران را راضی تر نگه می دارد. Lazy Loading با کاهش زمان انتظار و فراهم آوردن یک تجربه پیمایش روان تر، تعامل سریع تر کاربر با سایت را ممکن می سازد. کاربران از اینکه مجبور نیستند برای بارگذاری کامل صفحه منتظر بمانند قدردانی می کنند و این حس مثبت، احتمال ماندن آن ها در سایت و بازدید از صفحات بیشتر را افزایش می دهد.

صرفه جویی در مصرف پهنای باند و منابع سرور

Lazy Loading با جلوگیری از بارگذاری منابع غیرضروری، به صرفه جویی در مصرف پهنای باند هم برای سرور و هم برای کاربر کمک می کند. این امر به ویژه برای کاربرانی که از اینترنت موبایل با بسته های داده محدود استفاده می کنند، بسیار حائز اهمیت است. همچنین، کاهش درخواست های غیرضروری به سرور، باعث بهینه سازی مصرف منابع سرور و کاهش هزینه های هاستینگ می شود، زیرا سرور نیازی به ارسال داده هایی که ممکن است هرگز دیده نشوند، ندارد.

تأثیر مثبت بر سئو (SEO)

سرعت بارگذاری صفحه و تجربه کاربری (UX) عوامل کلیدی در رتبه بندی موتورهای جستجو هستند. گوگل به صراحت اعلام کرده است که سرعت سایت، به ویژه متریک های Core Web Vitals، از سیگنال های مهم رتبه بندی است. با بهبود FCP و LCP، وب سایت سیگنال های مثبتی به موتورهای جستجو ارسال می کند که می تواند منجر به بهبود رتبه در نتایج جستجو شود. علاوه بر این، کاهش نرخ پرش و افزایش زمان ماندگاری کاربر در سایت (که هر دو از نتایج سرعت بالا و UX خوب هستند) نیز به طور غیرمستقیم بر سئو تأثیر مثبت می گذارند.

کاهش مصرف منابع دستگاه کاربر

بارگذاری منابع کمتر در ابتدا، به معنای مصرف کمتر حافظه RAM و توان پردازشی دستگاه کاربر است. این موضوع به ویژه برای دستگاه های موبایل با منابع محدود، بسیار مفید است و می تواند به بهبود عملکرد کلی دستگاه و حتی افزایش عمر باتری در حین مرور وب سایت کمک کند.

Lazy Loading نه تنها سرعت بارگذاری وب سایت را افزایش می دهد، بلکه با بهینه سازی مصرف منابع و بهبود تجربه کاربری، به طور مستقیم و غیرمستقیم بر رتبه سئو و رضایت بازدیدکنندگان تأثیر می گذارد.

روش های پیاده سازی Lazy Loading برای تصاویر (از ساده تا پیشرفته)

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

3.1. پیاده سازی بومی مرورگر (Native Lazy Loading با `loading=lazy`)

ساده ترین و کارآمدترین روش برای پیاده سازی Lazy Loading، استفاده از ویژگی loading=lazy در HTML5 است. این ویژگی به مرورگر اجازه می دهد تا بارگذاری تصاویر و آی فریم ها را تا زمانی که به محدوده دید کاربر (Viewport) نزدیک شوند، به تعویق بیندازد.

نحوه استفاده از این ویژگی بسیار ساده است. کافیست در تگ های <img> و <iframe>، ویژگی loading=lazy را اضافه کنید:


<img src=تصویر-اصلی.jpg alt=توضیح تصویر loading=lazy width=800 height=600>
<iframe src=لینک-ویدیو.html loading=lazy width=560 height=315></iframe>

پشتیبانی مرورگرها و ملاحظات سازگاری: اکثر مرورگرهای مدرن (مانند کروم، فایرفاکس، اج و سافاری) از این ویژگی پشتیبانی می کنند. با این حال، مرورگرهای قدیمی تر ممکن است این ویژگی را نادیده بگیرند و تصاویر را به صورت عادی بارگذاری کنند. این موضوع یک عیب محسوب نمی شود، زیرا حداقل تجربه کاربری بدتر نمی شود و تنها قابلیت Lazy Loading اعمال نمی گردد. برای اطمینان از پوشش کامل، می توان از یک Polyfill یا راهکار جاوا اسکریپت به عنوان جایگزین برای مرورگرهای فاقد پشتیبانی استفاده کرد.

محدودیت ها و نکات: اگرچه Native Lazy Loading بسیار کارآمد است، اما ممکن است برای تمامی سناریوها کافی نباشد. برای مثال، این روش تنها روی تگ های <img> و <iframe> کار می کند و برای تصاویر پس زمینه CSS یا سایر عناصر غیرعادی نیازمند راهکارهای جاوا اسکریپت است. همچنین، کنترل بر آستانه بارگذاری (Threshold) در این روش محدود است و مرورگر به صورت خودکار زمان بارگذاری را تعیین می کند.

3.2. پیاده سازی با جاوا اسکریپت (برای کنترل بیشتر و سناریوهای خاص)

برای سناریوهایی که نیاز به کنترل بیشتر بر فرآیند Lazy Loading وجود دارد یا برای پشتیبانی از مرورگرهای قدیمی، پیاده سازی با جاوا اسکریپت بهترین گزینه است.

استفاده از Intersection Observer API (بهترین روش مدرن)

Intersection Observer API یک رابط برنامه نویسی مدرن است که به توسعه دهندگان اجازه می دهد تا به طور کارآمدی تشخیص دهند که یک عنصر DOM (Document Object Model) چه زمانی وارد یا خارج از Viewport می شود. این API به طور خاص برای پیاده سازی Lazy Loading بهینه شده است، زیرا نیازی به رصد مداوم رویدادهای اسکرول ندارد و باعث افت عملکرد نمی شود.

مزایای Intersection Observer:

عملکرد بهینه: از رویدادهای اسکرول سنگین دوری می کند و فقط زمانی فعال می شود که عنصر به Viewport نزدیک شود.
سادگی کدنویسی: کدنویسی آن نسبت به روش های قدیمی تر (مانند رصد اسکرول) ساده تر و خواناتر است.
انعطاف پذیری: امکان تنظیم آستانه (Threshold) و ریشه (Root) برای مشاهده عناصر را فراهم می کند.

مثال کد کامل و توضیح گام به گام پیاده سازی:

ابتدا، تصاویر خود را با یک Placeholder (مانند یک تصویر با حجم بسیار کم یا یک رنگ ثابت) و یک ویژگی data-src که حاوی آدرس واقعی تصویر است، آماده کنید:


<img class=lazy src=placeholder.jpg data-src=تصویر-اصلی-1.jpg alt=تصویر یک width=600 height=400>
<img class=lazy src=placeholder.jpg data-src=تصویر-اصلی-2.jpg alt=تصویر دو width=600 height=400>

سپس، کد جاوا اسکریپت زیر را به صفحه خود اضافه کنید:


<script>
document.addEventListener(DOMContentLoaded, function() {
  var 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;
          // اگر تصویر دارای ویژگی data-srcset است، آن را نیز بارگذاری کند
          if (lazyImage.dataset.srcset) {
            lazyImage.srcset = lazyImage.dataset.srcset;
          }
          lazyImage.classList.remove(lazy);
          lazyImageObserver.unobserve(lazyImage); // پس از بارگذاری، دیگر نیازی به مشاهده نیست
        }
      });
    }, {
      rootMargin: 0px 0px 200px 0px // 200px قبل از ورود به ویوپورت شروع به بارگذاری کند
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Fallback برای مرورگرهای قدیمی که از Intersection Observer پشتیبانی نمی کنند
    let lazyLoadThrottleTimeout;
    function lazyload () {
      if(lazyLoadThrottleTimeout) {
        clearTimeout(lazyLoadThrottleTimeout);
      }
      lazyLoadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              if (img.dataset.srcset) {
                img.srcset = img.dataset.srcset;
              }
              img.classList.remove('lazy');
            }
        });
        if(lazyImages.length == 0) { 
          document.removeEventListener(scroll, lazyload);
          window.removeEventListener(resize, lazyload);
          window.removeEventListener(orientationChange, lazyload);
        }
      }, 20);
    }

    document.addEventListener(scroll, lazyload);
    window.addEventListener(resize, lazyload);
    window.addEventListener(orientationChange, lazyload);
  }
});
</script>

در این کد، ما ابتدا تمام تصاویر با کلاس lazy را انتخاب می کنیم. سپس یک IntersectionObserver ایجاد می کنیم که وقتی یک تصویر وارد Viewport شد یا به فاصله ۲۰۰ پیکسلی آن رسید، ویژگی src تصویر را با مقدار data-src جایگزین می کند. rootMargin در اینجا باعث می شود تصاویر کمی زودتر (۲۰۰ پیکسل قبل از رسیدن به ویوپورت) بارگذاری شوند تا تأخیر در نمایش حس نشود.

استفاده از Event Listeners (روش قدیمی تر و نیازمند بهینه سازی)

روش های قدیمی تر Lazy Loading بر پایه رصد رویدادهای مرورگر مانند scroll، resize و orientationChange استوار بودند. در این روش ها، تابعی به این رویدادها متصل می شد که در هر بار فعال شدن رویداد، موقعیت تمامی تصاویر را نسبت به Viewport بررسی می کرد و در صورت نیاز آن ها را بارگذاری می کرد.

اهمیت Debouncing و Throttling: از آنجا که رویدادهای اسکرول و تغییر اندازه ممکن است صدها بار در ثانیه فعال شوند، اجرای مداوم کد در این رویدادها می تواند منجر به افت شدید عملکرد و ایجاد تأخیر (Jank) در پیمایش صفحه شود. برای جلوگیری از این مشکل، استفاده از تکنیک های Debouncing و Throttling ضروری است. Debouncing تضمین می کند که تابع فقط پس از توقف کامل رویداد (مثلاً توقف اسکرول) اجرا شود، در حالی که Throttling نرخ اجرای تابع را محدود می کند (مثلاً حداکثر یک بار در هر ۱۰۰ میلی ثانیه).

با وجود این تکنیک ها، Intersection Observer API به دلیل کارایی ذاتی و عدم نیاز به محاسبات مکرر موقعیت، روشی به مراتب بهینه تر و توصیه شده تر است.

تکنیک تغییر تگ `src` به `data-src`

مفهوم پایه در پشت بسیاری از پیاده سازی های جاوا اسکریپت Lazy Loading، استفاده از یک Placeholder در ویژگی src اصلی تگ <img> و ذخیره آدرس واقعی تصویر در یک ویژگی دلخواه (مانند data-src) است. زمانی که اسکریپت Lazy Loading تشخیص می دهد که تصویر باید بارگذاری شود، مقدار data-src را به src منتقل می کند. این تضمین می کند که مرورگر تصویر اصلی را بارگذاری نمی کند مگر اینکه صراحتاً توسط جاوا اسکریپت هدایت شود.

3.3. استفاده از کتابخانه های جاوا اسکریپت Lazy Loading

برای سادگی و استفاده از قابلیت های پیشرفته تر بدون نیاز به کدنویسی عمیق، می توان از کتابخانه های جاوا اسکریپت آماده استفاده کرد. این کتابخانه ها معمولاً بر پایه Intersection Observer API ساخته شده اند و ویژگی هایی مانند پشتیبانی از تصاویر واکنش گرا (Responsive Images)، افکت های انتقال (Transitions) و قابلیت کشف خودکار عناصر قابل Lazy Load را ارائه می دهند.

کتابخانه های محبوب:

lazysizes: یکی از محبوب ترین و کارآمدترین کتابخانه هاست که برای بهینه سازی بارگذاری تصاویر و آی فریم ها طراحی شده است. بسیار سبک و با قابلیت کشف خودکار.
Yall.js (Yet Another Lazy Loader): یک کتابخانه بسیار سبک و سریع که از Intersection Observer API استفاده می کند و برای عملکرد بالا بهینه شده است.
LazyLoad.js: یک کتابخانه ساده و کوچک که از Intersection Observer API بهره می برد و برای شروع سریع مناسب است.

مزایا و معایب: مزایای استفاده از کتابخانه ها شامل سادگی پیاده سازی، ویژگی های اضافی (مانند پشتیبانی از srcset و picture) و سازگاری بهتر با مرورگرهای مختلف است. با این حال، عیب اصلی آن ها افزایش جزئی حجم کد جاوا اسکریپت صفحه است که برای وب سایت های بسیار سبک ممکن است مورد توجه قرار گیرد.

پیاده سازی Lazy Loading در وردپرس: ساده ترین راهکار برای بسیاری

وردپرس به عنوان محبوب ترین سیستم مدیریت محتوا (CMS)، راهکارهای متعددی برای پیاده سازی Lazy Loading ارائه می دهد که آن را برای مدیران وب سایت ها با دانش فنی متفاوت قابل دسترس می سازد.

4.1. Lazy Loading بومی وردپرس 5.5 به بالا

از نسخه 5.5 وردپرس، قابلیت Lazy Loading به صورت بومی و پیش فرض برای تگ های <img> اضافه شده است. این به این معناست که وردپرس به طور خودکار ویژگی loading=lazy را به تصاویر اضافه می کند، بدون اینکه شما نیازی به نصب افزونه یا کدنویسی دستی داشته باشید.

نحوه عملکرد پیش فرض: وردپرس این ویژگی را به تمام تصاویر اضافه می کند، به جز تصاویری که به صورت دستی از طریق تابع wp_omit_loading_attr_threshold() مستثنی شده باشند. این قابلیت به ویژه برای تصاویری که در محتوای اصلی پست ها، ویجت ها و آواتارها قرار دارند، اعمال می شود.

چگونگی کنترل و غیرفعال سازی: اگرچه قابلیت بومی وردپرس برای اکثر موارد کافی است، اما ممکن است در برخی سناریوها نیاز به کنترل دقیق تر یا حتی غیرفعال سازی آن باشد (مثلاً برای تصاویر بالای خط دید که نباید Lazy Load شوند). برای غیرفعال کردن کلی Lazy Loading بومی وردپرس، می توانید کد زیر را به فایل functions.php قالب خود اضافه کنید:


add_filter( 'wp_lazy_loading_enabled', '__return_false' );

یا برای استثنا کردن تصاویر خاص، می توان از فیلتر wp_get_loading_attr_default استفاده کرد.

4.2. بهترین افزونه های Lazy Load وردپرس

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

در جدول زیر، برخی از بهترین و محبوب ترین افزونه های Lazy Load برای وردپرس، همراه با ویژگی ها و مقایسه ای جامع ارائه شده اند:

نام افزونه	ویژگی های کلیدی	مزایا	معایب/نکات	تعداد نصب فعال (تقریبی)	امتیاز کاربران (از 5)
Smush	فشرده سازی تصاویر، بهینه سازی خودکار، Lazy Load، تغییر اندازه تصاویر.	جامع ترین ابزار بهینه سازی تصویر و Lazy Load؛ نسخه رایگان بسیار کارآمد.	نسخه حرفه ای برای دسترسی به تمامی قابلیت ها نیاز است.	1+ میلیون	4.8
a3 Lazy Load	متمرکز بر Lazy Load برای تصاویر، ویدیوها، آی فریم ها؛ سازگار با WooCommerce.	گزینه های سفارشی سازی زیاد، عملکرد پایدار، سبک.	برخی امکانات پیشرفته در نسخه رایگان محدود است.	100,000+	4.7
Optimole	بهینه سازی تصاویر (تغییر اندازه، فشرده سازی)، Lazy Load، CDN داخلی.	خدمات یکپارچه (بهینه سازی و CDN)، پشتیبانی از تصاویر واکنش گرا.	پلن رایگان محدودیت حجمی دارد؛ نسخه پولی برای سایت های بزرگ.	80,000+	4.9
Lazy Load by WP Rocket	بسیار سبک و کارآمد، از تیم افزونه محبوب WP Rocket.	سادگی استفاده، بدون نیاز به تنظیمات پیچیده، عدم تداخل با سایر افزونه ها.	فقط برای تصاویر و آی فریم ها، امکانات محدودتر نسبت به افزونه های جامع تر.	100,000+	4.5
Lazy Loader	پشتیبانی از تصاویر، آی فریم ها، ویدیوها، فایل های صوتی؛ کنترل پیشرفته.	امکان فعال/غیرفعال کردن Lazy Load برای عناصر خاص، سبک.	رابط کاربری ممکن است برای مبتدیان کمی پیچیده باشد.	10,000+	4.6
Speed Up – Lazy Load	بسیار ساده و بدون نیاز به تنظیمات، فقط نصب و فعال سازی.	حجم بسیار کم (5 کیلوبایت)، سریع ترین راهکار برای Lazy Load پایه.	قابلیت های سفارشی سازی یا بهینه سازی تصویر ندارد.	2,000+	4.5
Lazy Load for Videos	تخصصی برای ویدیوهای YouTube و Vimeo.	جایگزینی ویدیو با تصویر پیش نمایش قابل کلیک، تنظیمات پخش ویدیو.	فقط برای ویدیوها، تصاویر را پوشش نمی دهد.	10,000+	4.5

راهنمای انتخاب بهترین افزونه:

اگر به دنبال یک راهکار جامع برای فشرده سازی و Lazy Load تصاویر هستید، Smush یا Optimole گزینه های عالی هستند.
برای یک راهکار ساده و سبک تنها برای Lazy Load تصاویر، Lazy Load by WP Rocket توصیه می شود.
اگر وب سایت شما محتوای ویدیویی زیادی دارد، Lazy Load for Videos می تواند بسیار مفید باشد.
برای کنترل بیشتر و انعطاف پذیری در Lazy Loading انواع مختلف محتوا، a3 Lazy Load یا Lazy Loader مناسب هستند.

4.3. نحوه فعال سازی و تنظیم Lazy Loading در المنتور (برای کاربران المنتور)

المنتور (Elementor) به عنوان یکی از محبوب ترین صفحه سازهای وردپرس، به طور پیش فرض از Lazy Loading برای تصاویر پشتیبانی می کند. این ویژگی به طور خودکار فعال است و نیازی به تنظیمات پیچیده یا کدنویسی دستی برای فعال سازی Lazy Loading در تصاویر المنتور نیست.

با این حال، برای اطمینان از بهینه ترین عملکرد و جلوگیری از مشکلات احتمالی، می توانید به نکات زیر توجه کنید:

به روزرسانی المنتور: اطمینان حاصل کنید که المنتور و وردپرس شما به آخرین نسخه به روزرسانی شده اند تا از جدیدترین بهبودها در Lazy Loading بومی و یکپارچه سازی های آن بهره مند شوید.
تنظیم ابعاد تصاویر: همیشه ابعاد (width و height) تصاویر را در المنتور تنظیم کنید. این کار به مرورگر کمک می کند تا فضای لازم برای تصویر را قبل از بارگذاری آن رزرو کند و از تغییر چیدمان (CLS) جلوگیری کند.
بررسی افزونه های تداخلی: اگر از افزونه Lazy Loading دیگری استفاده می کنید، ممکن است با قابلیت بومی المنتور یا وردپرس تداخل پیدا کند. توصیه می شود تنها یک افزونه Lazy Loading فعال داشته باشید یا تنظیمات آن ها را به دقت بررسی کنید تا از بروز مشکل جلوگیری شود.
تصاویر پس زمینه: المنتور برای تصاویر پس زمینه سکشن ها یا ستون ها، Lazy Loading بومی را اعمال نمی کند. برای این موارد، اگر از افزونه های Lazy Load استفاده می کنید، باید بررسی کنید که آیا آن افزونه از Lazy Loading برای تصاویر پس زمینه CSS پشتیبانی می کند یا خیر.

نکات پیشرفته و بهترین شیوه ها برای پیاده سازی Lazy Loading

برای دستیابی به حداکثر کارایی و جلوگیری از مشکلات احتمالی، رعایت نکات پیشرفته و بهترین شیوه ها در پیاده سازی Lazy Loading ضروری است.

اولویت بندی محتوای بالای خط دید (Above the Fold)

مهم ترین نکته در Lazy Loading، عدم اعمال آن بر روی تصاویری است که بلافاصله پس از بارگذاری صفحه در دید کاربر قرار می گیرند (Above the Fold). این تصاویر برای متریک Largest Contentful Paint (LCP) حیاتی هستند و تأخیر در بارگذاری آن ها به شدت بر عملکرد و تجربه کاربری تأثیر منفی می گذارد.

اهمیت عدم Lazy Load کردن تصاویر حیاتی بالای صفحه: اگر تصویری که بزرگترین عنصر محتوایی صفحه است (LCP element)، Lazy Load شود، زمان نمایش آن به تعویق افتاده و امتیاز LCP سایت شما کاهش می یابد. این موضوع می تواند رتبه سئو سایت را تحت تأثیر قرار دهد.

روش های استثنا کردن تصاویر از Lazy Loading:

Native Lazy Loading: برای استثنا کردن یک تصویر از Lazy Loading بومی مرورگر، می توانید ویژگی loading=eager را به آن اضافه کنید.
```
<img src=تصویر-بالای-خط-دید.jpg alt=عنوان loading=eager>
        
```
افزونه های وردپرس: اکثر افزونه های Lazy Loading حرفه ای وردپرس امکان استثنا کردن تصاویر بر اساس کلاس CSS، آدرس URL یا حتی موقعیت (مثلاً تصاویر در X پیکسل بالای صفحه) را فراهم می کنند.
جاوا اسکریپت سفارشی: در پیاده سازی های دستی جاوا اسکریپت، می توانید با اضافه کردن یک کلاس خاص به تصاویر بالای خط دید و نادیده گرفتن آن ها در انتخابگر (Selector) اسکریپت Lazy Loading، آن ها را مستثنی کنید.

استفاده از Placeholder (تصویر جایگزین) و تکنیک های LQIP/Blur-up

برای جلوگیری از تغییر چیدمان ناگهانی (Layout Shift یا CLS) و بهبود تجربه بصری در حین بارگذاری تصاویر، استفاده از یک Placeholder (تصویر جایگزین سبک) بسیار مهم است. Placeholder می تواند یک رنگ ثابت، یک تصویر با کیفیت پایین (Low-Quality Image Placeholder – LQIP) یا یک SVG باشد.

اهمیت Placeholder برای جلوگیری از Layout Shift (CLS): بدون Placeholder، فضای مورد نیاز برای تصویر در ابتدا رزرو نمی شود. زمانی که تصویر بارگذاری می شود، ناگهان فضای خود را اشغال کرده و باعث جابجایی عناصر دیگر صفحه می شود. این تغییر چیدمان برای کاربر بسیار ناخوشایند است و به متریک CLS (Cumulative Layout Shift) آسیب می رساند.

انواع Placeholder:

رنگ جامد: ساده ترین نوع، استفاده از یک رنگ ثابت به عنوان پس زمینه Placeholder.
تصویر با کیفیت پایین (LQIP): یک نسخه بسیار کم حجم و مات از تصویر اصلی که به سرعت بارگذاری می شود و حس بصری بهتری نسبت به رنگ ثابت ایجاد می کند. تکنیک Blur-up نیز در این دسته قرار می گیرد.
SVG: استفاده از SVG های کوچک و سبک که می توانند اشکال یا حتی شمایل کلی تصویر را شبیه سازی کنند.

اهمیت تعیین ابعاد (width و height) برای تصاویر

تعیین صریح ابعاد width و height برای تمام تگ های <img> در HTML، حیاتی ترین گام برای جلوگیری از CLS است. با این کار، مرورگر قبل از بارگذاری تصویر، دقیقاً می داند که چه مقدار فضا را باید برای آن رزرو کند، حتی اگر از Lazy Loading استفاده شود.


<img src=تصویر.jpg alt=توضیح width=800 height=600 loading=lazy>

پیاده سازی Lazy Loading برای ویدیوها و آی فریم ها

ویژگی loading=lazy همچنین برای تگ <iframe> قابل استفاده است و عملکرد مشابهی با تصاویر دارد. برای ویدیوها، می توان از این ویژگی استفاده کرد، اما نکته مهم دیگر، ویژگی preload=none در تگ <video> است که از بارگذاری خودکار ویدیوی کامل قبل از پخش جلوگیری می کند و تنها Placeholder یا قاب اول را نمایش می دهد.


<iframe src=https://www.youtube.com/embed/video_id loading=lazy width=560 height=315 frameborder=0 allowfullscreen></iframe>

<video controls width=600 height=400 preload=none loading=lazy>
  <source src=video.mp4 type=video/mp4>
  مرورگر شما از تگ ویدیو پشتیبانی نمی کند.
</video>

ترکیب Lazy Loading با CDN (شبکه توزیع محتوا)

Lazy Loading و CDN (Content Delivery Network) دو تکنیک مکمل هستند که با ترکیب آن ها می توان به حداکثر سرعت و کارایی دست یافت. CDN ها با ذخیره سازی نسخه ای از محتوای سایت در سرورهای مختلف در سراسر جهان و ارائه آن از نزدیک ترین سرور به کاربر، زمان تأخیر (Latency) را کاهش می دهند.

هم افزایی برای حداکثر سرعت و کارایی: Lazy Loading تضمین می کند که فقط منابع مورد نیاز بارگذاری می شوند و CDN نیز تضمین می کند که آن منابع (زمانی که نیاز شدند) با حداکثر سرعت ممکن به کاربر تحویل داده شوند. به عبارت دیگر، Lazy Loading حجم داده های اولیه را کاهش می دهد و CDN سرعت تحویل داده های باقی مانده را افزایش می دهد. این ترکیب یک استراتژی قدرتمند برای وب سایت های با محتوای زیاد و مخاطبان جهانی است. بسیاری از CDN ها (مانند Cloudflare) و افزونه های وردپرس (مانند Optimole) قابلیت Lazy Loading را به صورت یکپارچه ارائه می دهند.

پشتیبانی از مرورگرهای قدیمی (Polyfills)

اگرچه اکثر مرورگرهای مدرن از Native Lazy Loading و Intersection Observer API پشتیبانی می کنند، اما برای اطمینان از سازگاری کامل با مرورگرهای قدیمی تر (که ممکن است هنوز بخشی از مخاطبان شما باشند)، می توان از Polyfills استفاده کرد. Polyfill قطعه کدی است که قابلیت های مدرن API را در محیط های قدیمی تر که از آن ها پشتیبانی نمی کنند، شبیه سازی می کند. برای Intersection Observer API نیز Polyfills موجود هستند که با افزودن آن ها به کد سایت، می توان عملکرد Lazy Loading را در مرورگرهای قدیمی تر نیز تضمین کرد.

چالش ها، مشکلات رایج و راه حل ها در پیاده سازی Lazy Loading

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

مشکل Layout Shift (CLS – تغییر چیدمان)

یکی از شایع ترین و آزاردهنده ترین مشکلات، Layout Shift یا تغییر چیدمان ناگهانی صفحه است. این اتفاق زمانی می افتد که محتوای بالای صفحه پس از بارگذاری کامل صفحه، به دلیل بارگذاری تصاویر Lazy Load شده در پایین صفحه، جابجا می شود.

علل: عدم رزرو فضای کافی برای تصاویر Lazy Load شده. مرورگر در ابتدا ابعاد تصویر را نمی داند و فضایی برای آن در نظر نمی گیرد. پس از بارگذاری تصویر، صفحه برای جای دادن آن مجدداً چیدمان می شود.

راه حل های جامع:

تعیین ابعاد صریح (width و height): همیشه ابعاد width و height را برای تمامی تگ های <img> در HTML مشخص کنید. این کار به مرورگر اجازه می دهد که حتی قبل از بارگذاری تصویر، فضای لازم را برای آن رزرو کند و از CLS جلوگیری شود.
استفاده از Placeholder با ابعاد صحیح: اگر از Placeholder (مانند LQIP یا رنگ ثابت) استفاده می کنید، اطمینان حاصل کنید که Placeholder دارای ابعاد یکسان با تصویر نهایی است.
نسبت ابعاد (Aspect Ratio) با CSS: در صورتی که ابعاد دقیق تصویر مشخص نیست (مثلاً برای تصاویر واکنش گرا)، می توانید با استفاده از CSS و ویژگی padding-bottom یا aspect-ratio، یک نسبت ابعاد ثابت برای کانتینر تصویر تعریف کنید تا فضای آن همیشه رزرو شود.
```
.image-container {
  width: 100%;
  padding-bottom: 75%; /* برای نسبت 4:3 (height/width * 100) */
  position: relative;
}
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
        
```

تصاویر بارگذاری نمی شوند یا با تأخیر زیاد نمایش داده می شوند

گاهی اوقات ممکن است تصاویر با وجود فعال بودن Lazy Loading، اصلاً بارگذاری نشوند یا با تأخیر غیرمنطقی ظاهر گردند.

علل و راه حل ها:

تداخل افزونه ها/اسکریپت ها: اگر از چندین افزونه Lazy Loading یا اسکریپت های جاوا اسکریپت دیگر استفاده می کنید، ممکن است تداخلاتی رخ دهد.

راه حل: تنها یک راهکار Lazy Loading را فعال کنید. افزونه ها را یکی یکی غیرفعال کرده و سایت را تست کنید تا افزونه مشکل ساز را پیدا کنید.
خطاهای جاوا اسکریپت: خطاهای جاوا اسکریپت در کنسول مرورگر (DevTools) می توانند مانع از اجرای صحیح اسکریپت Lazy Loading شوند.

راه حل: کنسول توسعه دهنده مرورگر (با فشردن F12) را بررسی کنید و هرگونه خطای جاوا اسکریپت را برطرف نمایید.
مسیرهای (Path) اشتباه تصاویر: اگر آدرس data-src یا src به تصویر واقعی اشتباه باشد، تصویر بارگذاری نمی شود.

راه حل: آدرس های تصاویر را به دقت بررسی کنید.
آستانه (Threshold) نامناسب: اگر آستانه بارگذاری خیلی کوچک باشد، کاربر ممکن است قبل از بارگذاری تصویر به آن برسد و تصویر با تأخیر ظاهر شود.

راه حل: آستانه بارگذاری را کمی بیشتر تنظیم کنید (مثلاً ۲۰۰-۳۰۰ پیکسل قبل از ورود به Viewport) تا تصاویر کمی زودتر بارگذاری شوند.

تأثیر منفی بر سئو در صورت پیاده سازی اشتباه

اگرچه Lazy Loading به طور کلی برای سئو مفید است، اما پیاده سازی نادرست آن می تواند تأثیر منفی داشته باشد.

مشکل: خزنده های موتور جستجو (Googlebot) ممکن است تصاویر Lazy Load شده را که به درستی پیاده سازی نشده اند، کشف نکنند. اگر خزنده ها به انتهای صفحه اسکرول نکنند یا اسکریپت Lazy Loading به درستی اجرا نشود، تصاویر ایندکس نخواهند شد.

راه حل:

استفاده از Native Lazy Loading (loading=lazy): این روش توسط گوگل پشتیبانی می شود و خزنده ها قادر به شناسایی آن هستند.
Intersection Observer API: این روش نیز توسط گوگل توصیه می شود و در صورتی که به درستی پیاده سازی شود، تصاویر به راحتی کشف می شوند.
SSR (Server-Side Rendering) یا Prerendering: برای وب سایت های پیچیده با محتوای پویا، استفاده از SSR یا Prerendering می تواند تضمین کند که محتوای Lazy Load شده نیز در کد HTML اولیه موجود است و توسط خزنده ها قابل دسترس باشد.
اطمینان از قابلیت کشف تصاویر توسط خزنده ها: از Google Search Console برای بررسی اینکه آیا تصاویر شما به درستی ایندکس شده اند استفاده کنید. ابزارهایی مانند Google PageSpeed Insights و Lighthouse نیز می توانند مشکلات مربوط به Lazy Loading و قابلیت کشف را شناسایی کنند.

نحوه دیباگ و تست Lazy Loading

برای اطمینان از عملکرد صحیح Lazy Loading، تست و دیباگ مداوم ضروری است.

ابزارهای توسعه دهنده مرورگر:
- تب Network: در ابزارهای توسعه دهنده مرورگر (معمولاً با Ctrl+Shift+I یا F12 باز می شود)، به تب Network بروید. سپس سرعت شبکه را روی حالت Fast 3G یا Slow 3G شبیه سازی کنید. صفحه را رفرش کنید و به پایین اسکرول کنید. مشاهده کنید که تصاویر چگونه به تدریج بارگذاری می شوند. تصاویری که بارگذاری نشده اند، باید دارای وضعیت pending یا blocked باشند.
- تب Elements: بررسی کنید که ویژگی src تصاویر Lazy Load شده، در ابتدا حاوی Placeholder باشد و پس از اسکرول کردن به data-src تغییر یابد.
- تب Console: هرگونه خطای جاوا اسکریپت که ممکن است بر عملکرد Lazy Loading تأثیر بگذارد را بررسی کنید.
شبیه سازی سرعت پایین: استفاده از ابزارهای توسعه دهنده مرورگر برای شبیه سازی سرعت اینترنت پایین، به شما کمک می کند تا نحوه عملکرد Lazy Loading را در شرایط واقعی برای کاربران با اینترنت ضعیف تر مشاهده کنید.
افزونه های مرورگر: برخی افزونه ها مانند Lazy Load Test به شما اجازه می دهند تا به راحتی عملکرد Lazy Loading را آزمایش و نقاط ضعف را شناسایی کنید.

سنجش عملکرد و نظارت بر Lazy Loading

پس از پیاده سازی Lazy Loading، سنجش مداوم عملکرد و نظارت بر متریک های کلیدی ضروری است تا از اثربخشی آن اطمینان حاصل شود و در صورت نیاز، بهینه سازی های بیشتری صورت گیرد.

استفاده از ابزارهای تست سرعت

ابزارهای آنلاین معتبر می توانند دید جامعی از عملکرد وب سایت شما ارائه دهند و تأثیر Lazy Loading را بر سرعت بارگذاری مشخص کنند.

Google PageSpeed Insights: این ابزار توسط گوگل ارائه شده و متریک های Core Web Vitals (LCP, FID, CLS) را به دقت اندازه گیری می کند. پس از پیاده سازی Lazy Loading، باید بهبود قابل توجهی در امتیازات LCP و CLS مشاهده کنید. همچنین، این ابزار پیشنهادهایی برای بهینه سازی بیشتر ارائه می دهد.
GTmetrix: یک ابزار قدرتمند دیگر که گزارش های دقیق تری در مورد آبشارهای بارگذاری منابع (Waterfall Chart) ارائه می دهد. با بررسی این نمودار، می توانید ببینید که تصاویر Lazy Load شده تنها زمانی بارگذاری می شوند که به آن ها نیاز باشد.
Lighthouse: ابزاری متن باز از گوگل که در ابزارهای توسعه دهنده مرورگر کروم نیز موجود است. Lighthouse گزارش های جامعی در مورد عملکرد، دسترسی پذیری، بهترین شیوه ها و سئو ارائه می دهد و می تواند مشکلات مربوط به Lazy Loading را تشخیص دهد.

مانیتورینگ متریک های Core Web Vitals (LCP, CLS) قبل و بعد از پیاده سازی

مهم ترین گام در سنجش عملکرد Lazy Loading، مقایسه متریک های Core Web Vitals قبل و بعد از پیاده سازی است.

Largest Contentful Paint (LCP): این متریک زمان لازم برای نمایش بزرگترین عنصر محتوایی در Viewport را اندازه گیری می کند. با پیاده سازی صحیح Lazy Loading و اطمینان از عدم Lazy Load کردن تصاویر Above the Fold، باید شاهد کاهش قابل توجهی در زمان LCP باشید.
Cumulative Layout Shift (CLS): این متریک پایداری بصری صفحه را اندازه گیری می کند. استفاده صحیح از Placeholder و تعیین ابعاد تصاویر برای جلوگیری از تغییر چیدمان ضروری است. پس از پیاده سازی Lazy Loading با رعایت این نکات، باید امتیاز CLS بهبود یابد یا حداقل بدتر نشود.

علاوه بر این، می توانید به metrics دیگری مانند زمان بارگذاری کامل صفحه (Full Page Load Time) و تعداد درخواست های HTTP (HTTP Requests) نیز توجه کنید. Lazy Loading باید هر دو این متریک ها را به طور مثبت تحت تأثیر قرار دهد.

بهره گیری مداوم از این ابزارها و مانیتورینگ منظم، به شما کمک می کند تا همیشه وب سایتی با عملکرد بالا و تجربه کاربری مطلوب داشته باشید.

نتیجه گیری

در عصر حاضر که سرعت حرف اول را در فضای آنلاین می زند، پیاده سازی تکنیک های Lazy Loading برای تصاویر دیگر یک انتخاب نیست، بلکه ضرورتی اجتناب ناپذیر برای هر وب سایتی است که به دنبال موفقیت و حفظ رقابت پذیری است. این تکنیک هوشمندانه با به تعویق انداختن بارگذاری منابع غیرضروری، نه تنها سرعت اولیه صفحات را به طور چشمگیری افزایش می دهد، بلکه مصرف پهنای باند را بهینه کرده، بار سرور را کاهش می دهد و مهم تر از همه، تجربه کاربری روان تر و لذت بخش تری را برای بازدیدکنندگان به ارمغان می آورد. این مزایا به طور مستقیم بر متریک های حیاتی Core Web Vitals تأثیر مثبت گذاشته و در نهایت، به بهبود رتبه سئو سایت در موتورهای جستجو کمک شایانی می کند.

از پیاده سازی بومی مرورگر با ویژگی loading=lazy گرفته تا استفاده از Intersection Observer API برای کنترل دقیق تر و بهره گیری از افزونه های قدرتمند در سیستم های مدیریت محتوا مانند وردپرس، روش های متنوعی برای اعمال این تکنیک وجود دارد. انتخاب روش مناسب بستگی به دانش فنی و نیازهای خاص وب سایت شما دارد. نکته کلیدی در تمام این رویکردها، پیاده سازی صحیح و توجه به جزئیاتی مانند اولویت بندی محتوای بالای خط دید، استفاده از Placeholder مناسب برای جلوگیری از Layout Shift، و تعیین ابعاد دقیق تصاویر است. با رعایت این بهترین شیوه ها و نظارت مداوم بر عملکرد سایت با ابزارهای تحلیلی، می توانید حداکثر پتانسیل Lazy Loading را آزاد کرده و وب سایت خود را به سکویی برای ارائه محتوای سریع و بهینه تبدیل کنید. با پیاده سازی درست Lazy Loading، گام بزرگی در جهت بهبود مستمر عملکرد وب سایت خود برخواهید داشت.

گروه مطلب :

مرداد 13, 1404

خواندن این مطلب 23 دقیقه زمان میبرد

نمایش بیشتر