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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

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

این صفحه جزئیات پیاده‌سازی بارگذاری تنبل در مرورگر را بررسی می‌کند.

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

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

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

• استفاده از API ناظر تقاطع
• استفاده از کنترل‌کننده‌های رویداد scroll ، resize یا orientationchange

هر دو گزینه می‌توانند به توسعه‌دهندگان اجازه دهند رفتار بارگذاری کند (lazy loading) را در نظر بگیرند، و بسیاری از توسعه‌دهندگان کتابخانه‌های شخص ثالثی ساخته‌اند تا انتزاع‌هایی را ارائه دهند که استفاده از آنها حتی ساده‌تر است.

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

ویژگی loading

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

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

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

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

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

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

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

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

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

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

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

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

آستانه فاصله بسته به عوامل زیر متفاوت است:

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

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

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

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

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

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

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

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

به تصاویر خود ویژگی‌های ابعادی بدهید

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

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

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

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

بهترین روش تنظیم ابعاد، صرف نظر از اینکه آیا از بارگذاری تنبل (lazy loading) استفاده می‌کنید یا خیر، برای تگ‌های <img> اعمال می‌شود، اما بارگذاری تنبل می‌تواند آن را مهم‌تر کند.

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

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

برای مثالی از نحوه‌ی loading با تعداد زیادی تصویر، به این نسخه آزمایشی مراجعه کنید.

همچنین می‌توانید تصاویری را که با استفاده از عنصر <picture> تعریف کرده‌اید، به صورت lazy-load بارگذاری کنید:

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

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

تصاویر همیشه در اولین نمای دید، با بارگذاری سریع (Aager-load) قابل مشاهده هستند.

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

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

<!-- 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 پشتیبانی نمی‌کنند، آن را نادیده می‌گیرند. آن‌ها از مزایای lazy loading بهره‌مند نمی‌شوند، اما هیچ تأثیر منفی از اضافه کردن آن وجود ندارد.

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

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

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

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

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

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

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

خیر، فقط می‌توانید از آن با تگ‌های <img> استفاده کنید.

آیا loading می‌تواند با تصاویری که در پنجره نمایش (viewport) بلافاصله قابل مشاهده نیستند، کار کند؟

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

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

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

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

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

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

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

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

می‌توانید از ویژگی loading برای تشخیص اینکه آیا مرورگر از این ویژگی پشتیبانی می‌کند یا خیر، استفاده کنید:

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

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

• برای جلوگیری از بارگذاری سریع (eager load) در مرورگرهای پشتیبانی نشده، <img src> را با <img data-src> جایگزین کنید. اگر ویژگی loading پشتیبانی می‌شود، data-src را با src عوض کنید.
• اگر loading پشتیبانی نمی‌شود، یک تابع جایگزین از lazysizes بارگذاری کنید و آن را آغاز کنید، با استفاده از کلاس lazyload برای مشخص کردن اینکه کدام تصاویر باید lazy-load شوند:

<!-- 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> نیز استاندارد شده است. این به شما امکان می‌دهد iframeها را با استفاده از ویژگی loading به صورت lazy-load بارگذاری کنید. برای اطلاعات بیشتر، به «وقت آن رسیده که iframeهای خارج از صفحه را lazy-load کنیم!» مراجعه کنید.

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

تمام تبلیغاتی که به عنوان تصویر یا iframe به کاربر نمایش داده می‌شوند، درست مانند هر تصویر یا iframe دیگری، با بارگذاری تنبل بارگذاری می‌شوند.

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

تمام تصاویر و iframe ها بلافاصله پس از چاپ صفحه بارگذاری می‌شوند. برای جزئیات بیشتر به شماره #۸۷۵۴۰۳ مراجعه کنید.

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

Lighthouse نسخه ۶.۰ و بالاتر، رویکردهایی را برای بارگذاری تنبل تصاویر خارج از صفحه در نظر می‌گیرد که می‌توانند از آستانه‌های مختلفی استفاده کنند و به آنها اجازه می‌دهند از ممیزی تصاویر خارج از صفحه Defer عبور کنند.

بارگذاری تنبل تصاویر برای بهبود عملکرد

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

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