بارگذاری تنبل تصاویر

جرمی واگنر
راشل اندرو

تصاویر می توانند در یک صفحه وب به دلیل درون خطی بودن در HTML به عنوان عناصر <img> یا به عنوان تصاویر پس زمینه CSS ظاهر شوند. در این پست می آموزید که چگونه هر دو نوع تصویر را لود کنید.

تصاویر درون خطی

رایج ترین کاندیدهای بارگذاری تنبل، تصاویری هستند که در عناصر <img> استفاده می شوند. با تصاویر درون خطی، ما سه گزینه برای بارگذاری تنبل داریم که ممکن است به صورت ترکیبی برای بهترین سازگاری در بین مرورگرها استفاده شود:

استفاده از بارگذاری تنبل در سطح مرورگر

کروم و فایرفاکس هر دو از بارگذاری تنبل با ویژگی loading پشتیبانی می کنند. این ویژگی را می توان به عناصر <img> و همچنین به عناصر <iframe> اضافه کرد. مقدار lazy به مرورگر می‌گوید که اگر تصویر در پنجره دید است، فوراً آن را بارگیری کند و زمانی که کاربر در نزدیکی آن‌ها حرکت می‌کند، تصاویر دیگر را واکشی کند.

برای جزئیات پشتیبانی مرورگر، به قسمت loading جدول سازگاری مرورگر MDN مراجعه کنید. اگر مرورگر از بارگذاری تنبل پشتیبانی نمی‌کند، این ویژگی نادیده گرفته می‌شود و طبق معمول، تصاویر بلافاصله بارگیری می‌شوند.

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

برای کسب اطلاعات بیشتر، بارگیری تنبل در سطح مرورگر برای وب را بررسی کنید.

با استفاده از Intersection Observer

برای پرکردن بارگذاری تنبل عناصر <img> ، از جاوا اسکریپت استفاده می کنیم تا بررسی کنیم که آیا آنها در ویوپورت هستند یا خیر. در صورت وجود، ویژگی‌های src (و گاهی اوقات srcset ) آنها با URLهای محتوای تصویر مورد نظر پر می‌شوند.

اگر قبلاً کد بارگیری تنبل را نوشته‌اید، ممکن است با استفاده از کنترل‌کننده‌های رویداد مانند scroll یا resize کار خود را انجام داده باشید. در حالی که این رویکرد در بین مرورگرها سازگارترین است، مرورگرهای مدرن راه کارآمدتر و کارآمدتری را برای انجام کار بررسی قابلیت مشاهده عناصر از طریق Intersection Observer API ارائه می‌دهند.

استفاده و خواندن از Intersection Observer نسبت به کد با تکیه بر کنترل‌کننده‌های مختلف رویداد آسان‌تر است، زیرا شما فقط باید یک ناظر را برای تماشای عناصر به جای نوشتن کد تشخیص دید عنصر خسته‌کننده ثبت کنید. تنها کاری که باید انجام دهید این است که تصمیم بگیرید وقتی یک عنصر قابل مشاهده است چه کاری انجام دهید. بیایید این الگوی نشانه گذاری اولیه را برای عناصر <img> شما که با تنبلی بارگذاری شده اند، فرض کنیم:

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">

سه بخش مرتبط از این نشانه گذاری وجود دارد که باید روی آنها تمرکز کنید:

  1. ویژگی class ، همان چیزی است که عنصر را با آن در جاوا اسکریپت انتخاب می کنید.
  2. ویژگی src ، که به یک تصویر مکان نگهدار اشاره می کند که هنگام بارگیری صفحه برای اولین بار ظاهر می شود.
  3. ویژگی‌های data-src و data-srcset ، که ویژگی‌های مکان‌نما حاوی URL برای تصویری هستند که پس از قرار گرفتن عنصر در viewport بارگیری می‌کنید.

حالا بیایید ببینیم که چگونه از Intersection Observer در جاوا اسکریپت برای بارگذاری تنبل تصاویر با استفاده از این الگوی نشانه گذاری استفاده کنیم:

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;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
});

در رویداد DOMContentLoaded سند، این اسکریپت DOM را برای همه عناصر <img> با کلاس lazy پرس و جو می کند. اگر Intersection Observer در دسترس است، یک ناظر جدید ایجاد کنید که وقتی عناصر img.lazy وارد درگاه دید می شوند، یک بازخوانی را اجرا می کند.

Intersection Observer در تمام مرورگرهای مدرن موجود است. بنابراین استفاده از آن به‌عنوان پلی‌پری برای loading="lazy" تضمین می‌کند که بارگذاری تنبل برای اکثر بازدیدکنندگان در دسترس است.

تصاویر در CSS

در حالی که تگ‌های <img> رایج‌ترین روش استفاده از تصاویر در صفحات وب هستند، تصاویر را می‌توان از طریق ویژگی background-image (و خصوصیات دیگر) CSS نیز فراخوانی کرد. بارگذاری تنبل در سطح مرورگر برای تصاویر پس‌زمینه CSS اعمال نمی‌شود، بنابراین اگر تصاویر پس‌زمینه برای بارگذاری تنبل دارید، باید روش‌های دیگری را در نظر بگیرید.

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

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

<div class="lazy-background">
  <h1>Here's a hero heading to get your attention!</h1>
  <p>Here's hero copy to convince you to buy a thing!</p>
  <a href="/buy-a-thing">Buy a thing!</a>
</div>

عنصر div.lazy-background معمولاً حاوی تصویر پس‌زمینه قهرمان است که توسط برخی از CSS احضار شده است. با این حال، در این مثال بارگذاری تنبل، می‌توانید ویژگی background-image عنصر div.lazy-background را از طریق یک کلاس visible که به عنصر اضافه می‌شود، زمانی که در viewport است، جدا کنید:

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
}

از اینجا، از جاوا اسکریپت استفاده کنید تا بررسی کنید که آیا عنصر در ویوپورت است (با Intersection Observer!)، و کلاس visible را در آن زمان به عنصر div.lazy-background اضافه کنید، که تصویر را بارگیری می کند:

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

اثرات روی بزرگترین رنگ محتوایی (LCP)

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

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

هنگام استفاده از لودرهای تنبل مبتنی بر جاوا اسکریپت، باید از بارگذاری تنبل تصاویر در ویوپورت جلوگیری کنید، زیرا این راه حل ها اغلب از ویژگی data-src یا data-srcset به عنوان یک مکان نگهدار برای ویژگی های src و srcset استفاده می کنند. مشکل اینجاست که بارگیری این تصاویر به تأخیر می افتد زیرا اسکنر پیش بارگذاری مرورگر نمی تواند آنها را در هنگام راه اندازی پیدا کند .

حتی استفاده از بارگذاری تنبل در سطح مرورگر برای بارگذاری تنبل یک تصویر در پورت دید می تواند نتیجه معکوس داشته باشد. هنگامی که loading="lazy" روی یک تصویر در پورت مشاهده اعمال می شود، آن تصویر تا زمانی که مرورگر مطمئن شود که در نمای درپورت است به تأخیر می افتد که می تواند بر LCP صفحه تأثیر بگذارد.

هرگز در هنگام راه‌اندازی، تصاویری را که در ویوپورت قابل مشاهده هستند، بارگذاری نکنید. این الگویی است که بر LCP سایت شما و در نتیجه تجربه کاربر تأثیر منفی می گذارد. اگر در هنگام راه‌اندازی به یک تصویر نیاز دارید، آن را در هنگام راه‌اندازی در سریع‌ترین زمان ممکن بارگذاری کنید و بارگذاری آن را تنبل نکنید!

بارگذاری تنبل کتابخانه ها

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

  • lazysizes یک کتابخانه بارگیری تنبل با امکانات کامل است که تصاویر و iframe ها را با تنبلی بارگذاری می کند. الگویی که از آن استفاده می‌کند کاملاً شبیه به نمونه‌های کد نشان‌داده‌شده در اینجا است، زیرا به‌طور خودکار به یک کلاس lazyload در عناصر <img> متصل می‌شود و از شما می‌خواهد URLهای تصویر را در ویژگی‌های data-src و/یا data-srcset مشخص کنید. که به ترتیب با ویژگی های src و/یا srcset مبادله می شوند. از Intersection Observer استفاده می‌کند (که می‌توانید آن را چند بار پر کنید)، و می‌توان آن را با تعدادی پلاگین برای انجام کارهایی مانند ویدیو با بارگذاری تنبل گسترش داد. در مورد استفاده از تنبل ها بیشتر بدانید .
  • vanilla-lazyload یک گزینه سبک وزن برای بارگذاری تنبل تصاویر، تصاویر پس زمینه، فیلم ها، iframe ها و اسکریپت ها است. از Intersection Observer استفاده می‌کند، از تصاویر واکنش‌گرا پشتیبانی می‌کند و بارگذاری تنبل در سطح مرورگر را فعال می‌کند.
  • lozad.js یک گزینه سبک وزن دیگر است که فقط از Intersection Observer استفاده می کند. به این ترتیب، عملکرد بالایی دارد، اما قبل از اینکه بتوانید از آن در مرورگرهای قدیمی استفاده کنید، باید چند پر شود.
  • اگر به یک کتابخانه Lazy loading مخصوص React نیاز دارید، react-lazyload را در نظر بگیرید. در حالی که از Intersection Observer استفاده نمی کند، روشی آشنا برای بارگذاری تنبل تصاویر برای کسانی که به توسعه برنامه ها با React عادت دارند ارائه می دهد.