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

بارگیری تنبل داخلی بالاخره رسید!

آدی عثمانی

حسین جرده

ماتیاس بیننس

بری پولارد

پشتیبانی در سطح مرورگر برای بارگذاری تنبل تصاویر اکنون در وب پشتیبانی می شود! این ویدیو دموی این ویژگی را نشان می دهد:

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

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

مرورگرهایی که ویژگی loading را پشتیبانی نمی کنند، به سادگی آن را بدون عوارض جانبی نادیده می گیرند.

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

طبق بایگانی HTTP ، تصاویر بیشترین درخواست را برای اکثر وب سایت ها دارند و معمولاً پهنای باند بیشتری نسبت به هر منبع دیگری اشغال می کنند. در صدک 90، سایت ها بیش از 5 مگابایت تصویر را روی دسکتاپ و موبایل ارسال می کنند. این تعداد زیادی عکس گربه است.

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

• با استفاده از Intersection Observer API
• با استفاده از scroll ، resize ، یا orientationchange کنترل کننده رویداد

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

ویژگی loading

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

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

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

در اینجا مقادیر پشتیبانی شده برای ویژگی loading وجود دارد:

• lazy : بارگذاری منبع را تا زمانی که به فاصله محاسبه شده ای از viewport برسد به تعویق بیندازید.
• eager : رفتار بارگیری پیش‌فرض مرورگر، که همان ویژگی را در بر نمی‌گیرد و به این معنی است که تصویر بدون توجه به جایی که در صفحه قرار دارد، بارگیری می‌شود. در حالی که این پیش‌فرض است، اگر ابزار شما به‌طور خودکار loading="lazy" اضافه می‌کند، اگر مقدار صریح وجود نداشته باشد، یا اگر linter شما شکایت کند اگر به صراحت تنظیم نشده باشد، می‌تواند مفید باشد.

رابطه بین ویژگی loading و اولویت واکشی

مقدار eager صرفاً دستورالعملی برای بارگذاری تصویر به طور معمول است، بدون اینکه بارگذاری را بیشتر به تأخیر بیاندازید، اگر خارج از صفحه باشد. این بدان معنا نیست که تصویر سریعتر از تصویر دیگری بدون ویژگی loading="eager" بارگذاری می شود.

مرورگرها منابع را بر اساس اکتشافی های مختلف اولویت بندی می کنند و ویژگی loading فقط زمان قرار گرفتن منبع تصویر در صف را نشان می دهد، نه اینکه چگونه در آن صف اولویت بندی شده است. eager فقط دلالت بر استفاده معمولی از مرورگرهای صف مشتاق به طور پیش فرض دارد.

اگر می خواهید اولویت واکشی یک تصویر مهم (به عنوان مثال تصویر LCP) را افزایش دهید، باید از Fetch Priority با fetchpriority="high" استفاده شود.

توجه داشته باشید که یک تصویر با loading="lazy" و fetchpriority="high" همچنان در زمانی که خارج از صفحه است به تأخیر می افتد و زمانی که تقریباً در قسمت دید قرار دارد با اولویت بالا واکشی می شود. به هر حال احتمالاً در این مورد با اولویت بالایی واکشی می شود، بنابراین این ترکیب واقعاً نباید مورد نیاز باشد یا استفاده شود.

آستانه های فاصله از درگاه دید

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

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

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

آستانه فاصله ثابت نیست و بسته به عوامل مختلفی متفاوت است:

• نوع منبع تصویری که واکشی می شود
• نوع اتصال موثر

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

صرفه جویی در داده ها و آستانه های فاصله از درگاه دید بهبود یافته است

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

در اتصالات سریع (4G)، آستانه فاصله کروم از درگاه دید را از 3000px به 1250px کاهش دادیم و در اتصالات کندتر (3G یا پایین تر)، آستانه را از 4000px به 2500px تغییر دادیم. این تغییر به دو چیز می رسد:

• <img loading=lazy> به تجربه ارائه شده توسط کتابخانه های بارگذاری تنبل جاوا اسکریپت نزدیک تر عمل می کند.
• آستانه‌های جدید فاصله از درگاه دید همچنان به ما امکان می‌دهد تضمین کنیم که تصاویر احتمالاً تا زمانی که کاربر به سمت آنها رفته است بارگیری شده‌اند.

می‌توانید مقایسه‌ای بین آستانه‌های فاصله‌گذاری قدیمی و جدید برای یکی از دموهای ما در اتصال سریع (4G) در زیر پیدا کنید:

آستانه های قدیمی در مقابل آستانه های جدید:

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

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

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

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

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

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

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

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

در اکثر سناریوها، اگر ابعاد درج نشده باشد، تصاویر همچنان تنبل بار می شوند، اما چند مورد لبه وجود دارد که باید از آنها آگاه باشید. بدون width و height مشخص شده، ابعاد تصویر ابتدا 0×0 پیکسل است. اگر گالری از چنین تصاویری دارید، مرورگر ممکن است به این نتیجه برسد که همه آنها در ابتدا در داخل درگاه دید قرار می گیرند، زیرا هر کدام عملاً فضایی را اشغال نمی کنند و هیچ تصویری به خارج از صفحه نمایش داده نمی شود. در این حالت مرورگر تشخیص می دهد که همه آنها برای کاربر قابل مشاهده هستند و تصمیم می گیرد همه چیز را بارگیری کند.

همچنین، مشخص کردن ابعاد تصویر، احتمال تغییر چیدمان را کاهش می‌دهد . اگر نمی‌توانید ابعادی را برای تصاویر خود در نظر بگیرید، بارگذاری تنبل آنها می‌تواند یک معامله بین صرفه‌جویی در منابع شبکه و احتمال بیشتر در معرض خطر تغییر طرح‌بندی باشد.

در حالی که بارگیری تنبل در Chromium به گونه‌ای اجرا می‌شود که احتمالاً تصاویر پس از مشاهده بارگیری می‌شوند، هنوز احتمال کمی وجود دارد که هنوز بارگیری نشده باشند. در این حالت، ویژگی‌های width و height از دست رفته در چنین تصاویری تأثیر آن‌ها را بر تغییر چیدمان تجمعی افزایش می‌دهد.

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

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

اگرچه یک مرورگر تصمیم می گیرد که کدام تصویر را از هر یک از عناصر <source> بارگیری کند، ویژگی loading فقط باید در عنصر بازگشتی <img> گنجانده شود.

از بارگذاری تنبل تصاویری که در اولین نمای قابل مشاهده هستند خودداری کنید

شما باید از تنظیم loading=lazy برای هر تصویری که در اولین نمای قابل مشاهده هستند اجتناب کنید. این به ویژه برای تصاویر LCP مرتبط است. برای اطلاعات بیشتر به مقاله اثرات عملکرد بارگذاری بیش از حد تنبل مراجعه کنید.

توصیه می شود در صورت امکان، فقط به تصاویری که در زیر تاشو قرار دارند، loading=lazy اضافه کنید. تصاویری که مشتاقانه بارگذاری می‌شوند را می‌توان فوراً واکشی کرد، در حالی که تصاویری که با تنبلی بارگذاری می‌شوند، مرورگر در حال حاضر باید منتظر بماند تا بداند تصویر در کجای صفحه قرار دارد، که برای در دسترس بودن به IntersectionObserver متکی است.

به طور کلی، هر تصویری در ویوپورت باید مشتاقانه با استفاده از پیش‌فرض‌های مرورگر بارگذاری شود. لازم نیست loading=eager مشخص کنید تا این مورد برای تصاویر in-viewport باشد.

<!-- 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">

افت شدید

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

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

آیا برنامه‌ای برای بارگیری خودکار تصاویر در کروم وجود دارد؟

قبلاً، Chromium به‌طور خودکار هر تصویری را که برای به تعویق افتادن مناسب بود، در صورتی که حالت Lite در Chrome برای Android فعال می‌شد و ویژگی loading ارائه نمی‌شد یا به‌عنوان loading="auto" تنظیم می‌شد، به‌طور خودکار لود می‌کرد. با این حال، حالت Lite منسوخ شده است (همانطور که غیر استاندارد loading="auto" بود) و در حال حاضر هیچ برنامه ای برای ارائه خودکار بارگذاری تنبل تصاویر در Chrome وجود ندارد.

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

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

آیا تصاویر پس زمینه CSS می توانند از ویژگی loading استفاده کنند؟

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

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

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

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

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

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

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

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

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

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

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

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

• برای جلوگیری از بارگیری مشتاقانه در مرورگرهای پشتیبانی نشده <img src> را با <img data-src> جایگزین کنید. اگر ویژگی loading پشتیبانی می شود، data-src با src تعویض کنید.
• اگر loading پشتیبانی نمی‌شود، یک فایل بازگشتی بارگذاری کنید (تنبلی می‌شود) و آن را شروع کنید. طبق اسناد lazysizes، شما از کلاس lazyload به عنوان راهی برای نشان دادن اینکه به 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>

در اینجا یک نسخه ی نمایشی از این الگو است. آن را در یک مرورگر قدیمی‌تر امتحان کنید تا نسخه بازگشتی را در عمل ببینید.

آیا بارگذاری تنبل برای iframe در مرورگرها نیز پشتیبانی می شود؟

<iframe loading=lazy> نیز استاندارد شده است و قبلاً در Chromium و Safari پیاده سازی شده است. این به شما این امکان را می دهد که iframes را با استفاده از ویژگی loading بارگذاری کنید. برای اطلاعات بیشتر به این مقاله اختصاصی درباره بارگذاری تنبلی iframe مراجعه کنید.

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

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

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

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

آیا Lighthouse بارگذاری تنبل در سطح مرورگر را تشخیص می دهد؟

Lighthouse 6.0 و بالاتر در رویکردهایی برای بارگذاری تنبل تصویر خارج از صفحه که ممکن است از آستانه های متفاوتی استفاده کند، به آنها اجازه می دهد تا ممیزی تصاویر خارج از صفحه را به تعویق بیندازند.

نتیجه

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

آیا با فعال شدن این ویژگی در کروم متوجه رفتار غیرعادی می‌شوید؟ یک اشکال را ثبت کنید !