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

با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

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

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

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

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

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

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

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

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

ویژگی loading

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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