تأخیر در بارگیری تصاویر برای وب سایت ها در سطح مرورگر

سرانجام ، پشتیبانی از بارگیری معوق تصاویر برای وب سایت ها در سطح مرورگر ظاهر شد! این ویدیو نمایشی از عملکرد را نشان می دهد:

با شروع Chrome 76 ، می توانید بدون نیاز به نوشتن کد کد خود یا استفاده از یک کتابخانه جداگانه JavaScript ، از ویژگی بارگذاری برای بارگیری به تعویق افتاده تصاویر استفاده کنید. بیایید بیشتر نگاه کنیم

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

<img loading=lazy>این مرورگرهای محبوب بر اساس کروم (کروم ، لبه ، اپرا) و فایرفاکس پشتیبانی می شود. اجرای WebKit (Safari) در حال توسعه است. اطلاعات مفصلی در مورد پشتیبانی متقاطع مرورگر در وب سایت Canise.com وجود دارد. مرورگرهایی که از ویژگی بارگذاری پشتیبانی نمی کنند ، به سادگی آن را بدون هیچ گونه عوارض جانبی نادیده می گیرند.

چرا در سطح مرورگر به بار معوق نیاز دارید؟#

براساس بایگانی اینترنت ، تصاویر محبوب ترین نوع منابع برای اکثر وب سایت ها هستند و معمولاً بیشتر نوار گذر را اشغال می کنند. در صدک 90 ، سایت ها حدود 4. 7 مگابایت تصاویر را به دستگاه های دسک تاپ و تلفن همراه ارسال می کنند. اینها تصاویر زیادی با گربه ها هستند.

• با استفاده از API Inteational Observer ؛
• با استفاده از رویدادها پیمایش ، تغییر اندازه یا جهت گیری.

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

بارگیری # ویژگی

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

در Chrome 76+ ، می توانید از ویژگی بارگذاری استفاده کنید تا بارگذاری تصاویر پنهان را که می توان با پیمایش به دست آورد ، به تعویق بیندازید:

• AUTO: رفتار مرورگر در حین بارگذاری پیش فرض معوق ، به عدم وجود یک ویژگی متناسب است.
• تنبل: بارگیری منبع تا زمانی که به فاصله محاسبه شده از منطقه مشاهده برسد اشکال زدایی می شود.
• مشتاق: بدون توجه به موقعیت مکانی آن در صفحه ، این منبع بلافاصله بارگیری می شود.

توجه

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

مقادیر آستانه فاصله از منطقه مشاهده #

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

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

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

آزمایشات انجام شده با استفاده از Chrome در اندروید نشان داد که 4G 97. 5 ٪ از تصاویر تخلیه نشده واقع در زیر منطقه مشاهده پس از ورود به منطقه مشاهده ، به طور کامل برای 10 میلی ثانیه بارگیری شده است. حتی در شبکه های آهسته ، 2G 92. 6 ٪ از تصاویر واقع در زیر منطقه مشاهده به طور کامل برای 10 میلی ثانیه بارگیری شدند. این بدان معنی است که بارگذاری معوق در سطح مرورگر ، دید پایدار عناصری را که در نتیجه پیمایش صفحه در منطقه مشاهده قرار می گیرند ، فراهم می کند.

• نوع منبع تصویر ؛
• با استفاده از یک حالت ساده در Chrome برای Android ؛.

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

در Chrome 77+ می توانید با تغییر نوع شبکه در DevTools با مقادیر مختلف آستانه آزمایش کنید. CRACING همچنین با نوع موثر اتصال مرورگر با استفاده از پرچم About: // Flags/#Force-Evfective-Coection-Type.

پس انداز داده ها و مقادیر آستانه فاصله فاصله از منطقه مشاهده #

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

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

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

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

مقایسه مقادیر آستانه جدید با Lazysizes (محبوب-علت JavaScript برای بارگذاری تأخیر):

برای اینکه کاربران جدیدترین نسخه های Chrome نیز از مقادیر آستانه جدید مزایایی کسب کنند ، ما این تغییرات را برای نسخه های Chrome از 79 تا 85 فراگیر باکورت کرده ایم. اگر تصمیم دارید صرفه جویی در داده ها را در نسخه های قدیمی و جدید Chrome مقایسه کنید ، این موضوع را در نظر بگیرید.

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

تصاویر باید شامل ویژگی های اندازه #

Когда браузер загружает изображение, он не сразу узнает его размеры, если они не указаны явно. Чтобы браузер мог зарезервировать достаточно места на странице для изображений, рекомендуется, чтобы все теги <img>شامل ویژگی های عرض و ارتفاع. بدون نشان دادن اندازه ، جابجایی های طرح ممکن است رخ دهد ، در صفحات که طولانی تر بارگیری می شوند ، قابل توجه تر است.

به عنوان یک جایگزین ، مقادیر اندازه را مستقیماً در سبک ساخته شده نشان دهید:

Метод установки размеров применяется к тегам <img>صرف نظر از اینکه از بار معوق استفاده می شود ، اما در این حالت سودمندی این روش افزایش می یابد. نصب عرض و ارتفاع همچنین به مرورگرهای مدرن اجازه می دهد تا اندازه داخلی تصاویر را تعیین کنند.

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

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

اگرچه بار معوق در کروم به گونه ای محقق می شود که احتمالاً تصاویر به محض مشاهده بارگیری می شوند ، اما هنوز هم احتمال کمی وجود دارد که این اتفاق نیفتد. در این حالت ، عدم وجود عرض و ارتفاع در چنین تصاویر ، تأثیر آنها را در جابجایی کل طرح افزایش می دهد.

Для изображений, определенных с помощью <picture>، همچنین می توانید از بار معوق استفاده کنید:

Хотя браузер решает, какое изображение загружать из любого из элементов <source> , атрибут loading должен быть включен только в резервный элемент <img> .

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

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

توصیه می شود در صورت امکان بارگیری = تنبل را فقط به تصاویر واقع در زیر منطقه مشاهده اضافه کنید. با بارگذاری اضطراری ، می توان تصویر را بلافاصله بدست آورد ، در حالی که هنگام بارگیری بارگذاری ، مرورگر باید دقیقاً دریابد که تصویر در صفحه قرار دارد ، که بستگی به در دسترس بودن CompiresectionObserver دارد.

در کروم ، تأثیر تصاویر در منطقه مشاهده اولیه با ویژگی بارگذاری = تنبلی در متریک LCP (سرعت بارگیری محتوای اصلی) بسیار اندک است ، با رگرسیون و LT1 ٪ در درصد 75 و 99 در مقایسه با تصاویر با تصاویر با تصاویر بارگیری غیر زباله.

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

تحمل خطا #

مرورگرهای بدون پشتیبانی از ویژگی بارگذاری با حضور آن نادیده گرفته می شوند. اگرچه این مرورگرها مزایای بار معوق را دریافت نمی کنند ، اما ورود ویژگی تأثیر منفی بر آنها نخواهد داشت.

سؤالات متداول #

آیا برنامه ریزی شده است تا تصاویر را به طور خودکار در Chrome به تأخیر بیندازد؟#

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

آیا می توان مسافت ها را به تصویری که بار در آن شروع می شود تغییر داد؟#

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

آیا می توان از ویژگی بارگذاری برای تصاویر تنظیم شده از طریق پس زمینه CSS استفاده کرد#

Нет, в настоящее время его можно использовать только с тегами <img> .

آیا جنبه های منفی در بارگیری معوق تصاویر که در منطقه مشاهده دستگاه قرار دارند وجود دارد؟#

از اضافه کردن بارگذاری = تنبل در قسمت بالای صفحه ، ایمن تر است ، زیرا اسکنر قبل از بارگیری در Chrome تصاویر را با بارگذاری = تنبل از قبل بارگیری نمی کند.

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

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

اگر من از کتابخانه سوم یا یک اسکریپت برای بارگیری معوق تصاویر استفاده می کنم چه کاری باید انجام دهم؟#

1. اگر یک بوت لودر شخص سوم سعی کند قبل از بارگیری کروم در حالت عادی ، تصاویر یا قاب ها را بارگیری کند ، یعنی در فاصله ای بیش از مقادیر آستانه فاصله از منطقه مشاهده ، بار آنها همچنان به تأخیر می افتد و آنها این کار را می کنند طبق قوانین استاندارد مرورگر بارگیری شود.
2. اگر یک بوت لودر شخص سوم از فاصله کمتری برای تعیین زمان بارگیری یک تصویر خاص از مرورگر استفاده کند ، آنگاه مرورگر با توجه به تنظیمات بوت لودر ، تصاویر را در حالت تأخیر بارگذاری می کند.

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

چگونه با مرورگرهایی که هنوز از بار معوق پشتیبانی نکرده اند ، کار کنیم؟#

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

• Замените <img src> на <img data-src>برای جلوگیری از بار نامحدود در مرورگرهای پشتیبانی نشده. در صورت پشتیبانی از بارگیری ، داده SRC را با SRC جایگزین کنید.
• اگر بارگذاری پشتیبانی نشود ، نسخه یدکی (Lazysizes) را بارگذاری کرده و آن را شروع کنید. با توجه به مستندات Lazysizes ، کلاس Lazyload به عنوان راهی برای مشخص کردن Lazysyizes استفاده می شود ، که تصاویر به بارگیری تأخیر نیاز دارند.

در اینجا نمایشی از این الگوی آورده شده است. آن را در Firefox یا Safari اجرا کنید تا گزینه پشتیبان را در عمل ببینید.

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

آیا بارگیری به تعویق افتاده برای برچسب iframe در Chrome است؟#

Значение <iframe loading=lazy>اخیراً استاندارد شده و قبلاً در کروم اجرا شده است. این به شما امکان می دهد با استفاده از ویژگی بارگذاری ، بار Iframe معوق را پیکربندی کنید. یک مقاله جداگانه در مورد بارگیری به تعویق افتاده Iframe به زودی در Web. dev منتشر می شود.

• عرض و ارتفاع Iframe بیش از 4 پیکسل نیست.
• نمایش: هیچ یا دید: پنهان ؛
• Iframe با استفاده از موقعیت منفی در امتداد محور x یا y در خارج از صفحه قرار می گیرد.

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

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

تمام تبلیغات ، که به صورت تصاویر یا فریم های ساخته شده ارائه شده است ، در حالت تأخیر نیز بارگیری می شود.

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

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

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

در نسخه های قبلی فانوس دریایی ، هنوز تأکید شده است که صفحات با استفاده از بارگیری = تنبل برای تصاویر نیاز به یک استراتژی برای بارگذاری آفتاب دارند. نسخه های Lighthouse 6. 0 و جدیدتر بهتر از رویکردهای تاخیر در بارگذاری آفتابگردان که می توانند از مقادیر مختلف آستانه استفاده کنند ، در نظر می گیرند ، که این امکان را به شما می دهد تا تأیید تصاویر خارج از صفحه (به تعویق انداختن بار آفتاب).

نتیجه #

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

آیا وقتی این عملکرد در Chrome گنجانده شده است ، رفتار غیرمعمول را مشاهده کرده اید؟خطا را جایگزین کنید!