بارگذاری تنبل تصاویر در سطح مرورگر

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

تقریبا همه مروگرها از بارگذاری تنبل تصاویر در سطح مرورگر پشتیبانی می‌کنند! ویدئو زیر نحوه بارگذاری تصاویر به صورت تنبل و با اسکرول به سمت آنها را نشان می‌دهد، برای درک بهتر می‌توانید دموی آن را به صورت آنلاین بررسی کنید.

از نسخه Chrome 76 به بعد، می‌توانید بدون نیاز به نوشتن کد سفارشی و یا استفاده از کتابخانه‌های جاوا اسکریپت (همانطور که در مقاله بارگذاری تنبل تصاویر به تفصیل به آن پرداختیم) ، از ویژگی loading برای بارگذاری تنبل تصاویر در سطح مرورگر استفاده کنید. بیایید به جزئیات بپردازیم.

سازگاری با مرورگرها

<img loading="lazy"> توسط اکثر مرورگرهای بر اساس کرومیوم^[1] (Chrome، Edge، Opera) و فایرفاکس پشتیبانی می شود. پیاده سازی WebKit (Safari) در حال انجام است. caniuse.com اطلاعات دقیقی در مورد پشتیبانی مرورگرهای مختلف از بارگذاری تنبل تصاویر ارائه می‌دهد. مرورگرهایی هم که ویژگی بارگذاری را پشتیبانی نمی کنند به سادگی آن را بدون هیچ تاثیری بر روی محتوا نادیده می گیرند.

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

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

در حال حاضر، دو راه برای به تعویق انداختن بارگذاری تصاویر خارج از صفحه وجود دارد:

• استفاده از Intersection Observer API ^[2]
• استفاده از کنترل کننده رویداد برای المان های scroll, resize یا orientationchange

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

خاصیت loading

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

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

مقادیر قابل قبول برای ویژگی loading :

• auto: رفتار بارگذاری تنبل پیش‌فرض مرورگر.
• lazy: بارگذاری تصویر را تا زمانی که به فاصله محاسبه شده ای از viewport برسد به تعویق می‌اندازد.
• eager: منبع را فوراً بارگیری می‌کند، صرف نظر از اینکه در کجای صفحه قرار دارد.

هشدار: اگرچه در Chromium مقدار auto وجود دارد اما هنوز در استانداردهای HTML ذکر نشده است. از آنجایی که ممکن است در معرض تغییر باشد، توصیه می‌کنیم تا زمانی که در استانداردها گنجانده نشده است از آن استفاده نکنید.

آستانه فاصله از viewport

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

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

آزمایش‌های انجام‌شده با استفاده از کروم در اندروید نشان می‌دهد که در اینترنت 4G، 97.5 درصد از تصاویری که به‌صورت تنبل بارگذاری می‌شوند، در عرض 10 میلی‌ثانیه پس از قابل مشاهده شدن، به‌طور کامل بارگذاری شده‌اند. حتی در شبکه‌های کند 2G، 92.6 درصد از تصاویر پایین viewport به‌طور کامل در عرض 10 میلی‌ثانیه بارگذاری می‌شوند. این به این معنی است که بارگذاری تنبل در سطح مرورگر تجربه پایدارتری به کاربران ارائه می‌دهد.

آستانه محاسبه شده فاصله از viewport برای همه منابع یکسان نبوده و بستگی به پارامترهای مختلفی دارد:

• نوع و فرمت تصاویر
• فعال بودن یا نبودن حالت lite-mode در مرورگر کروم اندروید
• نوع اتصال موثر (2G, 3G یا 4G)^[3]

شما می‌توانید مقادیر پیش‌فرض آستانه‌های تعیین شده برای هر نوع اتصال را در اسناد Chromium بیابید، البته ممکن است در آینده این اعداد و حتی رویکرد واکشی تصاویر هنگام نزدیکی به viewport تغییر کند.

در کروم نسخه 77 به بعد می‌توانید با محدود کردن سرعت شبکه در ابزار DevTools آستانه‌ها را در سرعت‌های مختلف تست کنید، البته قبل از آن باید نوع اتصال موثر را با پرچم about://flags/#force-effective-connection-type لغو کنید.

کاهش مصرف داده و بهبود آستانه فاصله از viewport

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

در اتصال‌های سریع مانند 4G محدوده فاصله از viewport برای بارگذاری تصاویر نزدیک بین 1250px تا 3000px است یعنی وقتی تصویر 3000 پیکسل فاصله تا قسمت قابل مشاهده صفحه دارد شروع به بارگیری می‌کند، در اتصال‌های کندتر این محدوده بین 2500px تا 4000px است.

بهبود‌های اخیر در محدوده فاصله از viewport دارای دو نکته مثبت است.

• دستور loading="lazy" هرچه بیشتر به خروجی کتابخانه‌های جاوااسکریپت بارگذاری تنبل نزدیک می‌شود
• محدوده‌ها و آستانه‌های جدید فاصله از viewport همچنان تضمین می‌کنند با اسکرول کاربر به سمت پایین و قبل مشاهده تصاویر، آنها بارگذاری شده باشند.

در ادامه مقایسه‌ای بین آستانه‌های فاصله‌گذاری قدیمی و جدید در اتصال سریع (4G) و همچنین استفاده از loading="lazy" در مقابل کتابخانه جاوااسکریپت بارگذاری تنبل قرار داده شده است.

آستانه‌های جدید در مقابل LazySizes (یک کتابخانه محبوب بارگذاری تنبل JS):

تصاویر باید دارای ویژگی ابعاد باشند

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

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

یا مقادیر آنها را مستقیماً در یک استایل درون خطی مشخص کنید:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

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

عرض و ارتفاع تصاویری که از پیش ابعاد آنها مشخص نشده باشد 0 در نظر گرفته خواهد شد. حال اگر گالری از چنین تصاویری دارید، مرورگر ممکن است به این نتیجه برسد که همه آنها درهمان ابتدا در viewport قرار دهد، زیرا عملاً فضایی را اشغال نمی کنند و هیچ تصویری به خارج از صفحه نمایش انتقال داده نمی شود. در این حالت مرورگر تشخیص می دهد که همه آنها برای کاربر قابل مشاهده هستند و تصمیم می گیرد همه آنها را بارگیری کند.(در عمل بارگذاری تنبلی اتفاق نمی‌افتد)

علاوه بر همه اینها مشخص کردن ابعاد تصویر، احتمال تغییر چیدمان را کاهش می‌دهد.

بارگذاری تنبل تصاویر در المان <picture>

تصاویری که با استفاده از عنصر <picture> تعریف می شوند نیز می توانند به صورت تنبل لود شوند، به کد زیر دقت کنید:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

در المان <picture> خود مرورگر تصمیم می گیرد که کدام یک از عناصر <source> را بارگیری کند در نتیجه باید همه المان های <img> حاوی ویژگی loading="lazy" باشند.

اجتناب از بارگذاری تنبل تصاویر ابتدای صفحه

در عمل تصاویری که در ابتدای صفحه وب قرار می‌گیرند چون در بارگذاری اول در viewport قرار دارند فوراً بارگذاری می‌شوند(چه بارگذاری تنبل برای آنها فعال باشد چه غیرفعال). بنابراین بهتر است خاصیت loading="lazy" را برای تصاویری که در ابتدای صفحه قرار دارند استفاده نکنید.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

سوالات متداول

آیا گوگل نقشه‌ای برای بارگذاری تنبل خودکار تصاویر در کروم دارد؟

اگر Lite mode ^[4] در Chrome اندروید فعال باشد، Chromium به‌طور خودکار تصاویر را به صورت تنبل بارگیری می‌کند.

آیا می توان میزان نزدیک بودن یک تصویر را قبل از شروع بارگذاری تنبل تغییر داد؟

این مقادیر hardcode هستند و از طریق API قابل تغییر نیستند. با این حال، ممکن است در آینده با آزمایش مرورگرها با فاصله‌ها و متغیرهای متفاوت، تغییر کنند.

آیا تصاویر پس زمینه CSS را می‌توان به صورت تنبل بارگذاری کرد؟

خیر، در حال حاضر فقط با تگ های <img> قابل استفاده است.

آیا بارگذاری تنبل تصاویری که در viewport قرار دارند، نقطه ضعفی دارد؟

ایمن‌ترین روش این است که از قرار دادن loading="lazy" بر روی تصاویر بالای صفحه خودداری کنید، زیرا Chrome آنها را در اسکن پیش‌بارگیری خودش از قبل بارگذاری نمی‌کند.

چگونه ویژگی بارگیری تنبل با تصاویری که در ویوپورت هستند اما بلافاصله قابل مشاهده نیستند (به عنوان مثال: carousel ها، یا پنهان شده توسط CSS برای اندازه های صفحه نمایش خاص) کار می کند؟

در حال حاضر فقط تصاویری که با فاصله محاسبه شده در زیر Viewport دستگاه قرار دارند به صورت تنبل بارگیری می شوند. همه تصاویر بالای صفحه، صرف نظر از اینکه بلافاصله قابل مشاهده هستند یا نه، به طور معمول بارگیری می شوند.

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

ویژگی loading نباید به هیچ وجه بر روی کدی که در حال حاضر دارایی های شما را با تنبلی بارگذاری می کند تأثیر بگذارد، اما چند نکته مهم وجود دارد که باید در نظر بگیرید:

• اگر Lazy-loader سفارشی شما سعی کند تصاویر یا فریم‌ها را زودتر از زمان مرورگر – یعنی در فاصله‌ای بیشتر از آستانه فاصله از viewport – بارگیری کند، آنها همچنان به تعویق افتاده و براساس رفتار عادی مرورگر بارگیری می‌شوند.
• اگر Lazy-loader سفارشی شما از فاصله کوتاه تری برای تعیین زمان بارگیری یک تصویر خاص نسبت به مرورگر استفاده می کند، در این شرایط تنظیمات شما به مرورگر ارجعیت دارد.

یکی از دلایل مهم برای ادامه استفاده همزمان از کتابخانه شخص ثالث و خاصیت loading="lazy"، ارائه یک ^[5]polyfill برای مرورگرهایی است که هنوز این ویژگی را پشتیبانی نمی کنند.

چگونه می توانم با مرورگرهایی که هنوز از بارگذاری تنبل پشتیبانی نمی کنند استفاده کنم؟

یک polyfill ایجاد کنید و یا از یک کتابخانه جاوااسکریپت برای بارگذاری تنبل تصاویر در سایت خود استفاده کنید. از ویژگی loading می توان برای تشخیص اینکه آیا این ویژگی در مرورگر پشتیبانی می شود یا خیر استفاده کرد:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

کد زیر یک مثال ساده از این کار با استفاده از کتابخانه lazysizes است:

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

کتابخانه lazysizes همچنین افزونه بارگیری را ارائه می دهد که در صورت وجود از بارگذاری تنبلی در سطح مرورگر استفاده می کند اما در صورت نیاز به عملکرد سفارشی کتابخانه باز می‌گردد.

چگونه بارگذاری تنبل در سطح مرورگر بر تبلیغات در یک صفحه وب تأثیر می گذارد؟

مرورگر با تمام تبلیغاتی که به صورت تصویر یا آی فریم به کاربر نمایش داده می شود مانند هر تصویر یا آی فریم دیگری رفتار می‌کند.

هنگام چاپ یک صفحه وب چگونه با تصاویری که هنوز بارگیری نشده‌اند برخورد می شود؟

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

نتیجه گیری

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

پاورقی

1- مرورگرهای بر اساس کرومیوم (Chromium-powered browsers) به مروگرهایی اطلاق می‌شود که از هسته اپن سورس مرورگر کرومیوم گوگل در طراحی مرورگر خود استفاده کرده‌اند، کیفیت بالای این موتور قدرتمند باعث شده تعداد زیادی از مرورگرهای مطرح وب به سمت آن کشیده شوند.

2- Intersection Observer یک API برای توسعه دهندگان است که آنها را قادر به درک دید و موقعیت عناصر DOM را نسبت به عنصر ریشه می‌سازد.

3- effective connection type(ECT) : نوع اتصال موثر :به سرعت اندازه‌گیری شده شبکه اشاره دارد که نوع اتصال سلولی مانند 3G را برمی‌گرداند، مقادیر ‘slow-2g’، ‘2g’، ‘3g’ و ‘4g’

4- Lite mode در کروم نسخه اندروید جایگزین جدید گوگل برای power saver mode است که می‌تواند تا 60 درصد مصرف داده کاربر حین مرور اینترنت را کاهش دهد.

5- polyfill قطعه‌ای از کد است (معمولاً جاوا اسکریپت در وب) که برای ارائه عملکرد مدرن در مرورگرهای قدیمی‌تر که به صورت بومی از آن پشتیبانی نمی‌کنند استفاده می‌شود.