- PVSM.RU - https://www.pvsm.ru -
Поддержка встроенной ленивой загрузки изображений и iframe пришла в веб!
Начиная с Chrome 76 версии, вы можете использовать новый атрибут loading
для ленивой загрузки ресурсов без необходимости писать для этого дополнительный код или использовать стороннюю JavaScript-библиотеку. Давайте рассмотрим детали.
Примечание от переводчика
Большая просьба снисходительно отнестись к замеченным ошибкам в переводе, грамматике или пунктуации, и сообщить о них для исправления.
Спасибо
Согласно HTTPArchive [2], изображения являются наиболее востребованным типом ресурсов на большинстве сайтов и обычно отнимают больше пропускной способности канала, чем любые другие. На 90-м процентиле, сайты отправляют около 4.7 МБ изображений на десктопы и мобильные устройства. Достаточно много фотографий с кошками [3].
Встроенные iframe также используют много данных и могут вредить производительности страницы. Загрузка некритичных изображений и iframe только в тот момент, когда пользователь может увидеть их, улучшает скорость загрузки страницы, минимизирует нагрузку на пропускную способность канала пользователя и уменьшает использование памяти.
В данный момент существует два способа отложить загрузку изображений и фреймов, расположенных за пределами экрана:
scroll
, resize
или orientationchange
Любой из вариантов может позволить разработчикам включить функционал отложенной загрузки, и многие создали сторонние библиотеки, чтобы предоставить абстракции, которые использовать еще проще. При наличии поддержки ленивой загрузки непосредственно в браузере, не возникнет потребности в сторонней библиотеке. Встроенная ленивая загрузка также гарантирует, что отложенная загрузка изображений и фреймов продолжит работать, даже если JavaScript отключен на стороне клиента.
Сегодня Chrome уже загружает изображения с разным приоритетом, в зависимости от того, где они расположены относительно области просмотра устройства. Изображения ниже области просмотра загружаются с меньшим приоритетом, но всё ещё загружаются, как можно быстрее.
В Chrome 76 вы можете использовать атрибут loading
, чтобы окончательно отложить загрузку изображений и фреймов за пределами экрана, до которых можно дойти прокруткой:
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
<iframe src="https://example.com" loading="lazy"></iframe>
Поддерживаемые значения атрибута loading
:
auto
: настройка режима ленивой загрузка, выставленная в браузере по умолчанию. То же, что отсутствие атрибута lazy
: отсрочка загрузки ресурса до тех пор, пока он не достигнет расчетного расстояния от области просмотра eager
: немедленная загрузка ресурса, несмотря на его расположение на странице Эта функция продолжит обновляться, пока не будет запущена в стабильной версии (не раньше Chrome 76). Но вы можете опробовать её, активировав следующие флаги в Chrome:
Все изображения и фреймы, видимые на странице без необходимости прокрутки, загружаются стандартно. Те, которые располагаются ниже области просмотра устройства, загружаются только тогда, когда пользователь прокручивает до них.
Расстояние, при котором начинается загрузка, не фиксировано и изменяется в зависимости от нескольких факторов:
Вы можете найти значения по умолчанию для разных типов эффективных соединений в Chromium source [8]. Эти показатели и даже подход загрузки при достижении определенного расстояния от области просмотра, могут меняться в ближайшем будущем, так как команда Chrome улучшает эвристику, чтобы определить, когда начинать загрузку.
В Chrome 77 вы можете экспериментировать с этими различными пороговыми значениями путем замедления скорости [9] соединения в DevTools. Во время этого вам потребуется переопределить эффективный тип соединения в браузере с помощью флага chrome://flags/#force-effective-connection-type.
Атрибут loading влияет на фреймы иначе, чем на изображения, в зависимости от того, является ли фрейм скрытым (скрытые фреймы часто используются для задач аналитики или общения). Chrome использует следующие критерии, чтобы определить, является ли фрейм скрытым:
display: none
или visibility: hidden
Если фрейм соответствует любому из этих условий, Chrome считает его скрытым и не будет загружать в отложенном режиме в большинстве случаев. Фреймы, не являющиеся скрытыми, будут загружены только тогда, когда попадут в пределы порога загрузки [10]. Для фреймов, которые все еще загружаются в режиме отложенной загрузки, отображается плейсхолдер
Есть планы изменить режим отложенной загрузки браузера по умолчанию, чтобы автоматически отображать в таком режиме любые изображения и фреймы, загрузку которых можно отложить, если включен Lite mode [6] в Chrome для Android.
Эти значения жестко закодированы и не могут быть изменены через API. Однако, они могут измениться в будущем, так как команда Chrome экспериментирует с разными пороговыми расстояниями и переменными.
Нет, в данный момент он может использоваться только тегами
В отложенном режиме загружаются только те изображения, которые находятся на определенном расстоянии [10] от нижней грани области просмотра устройства. Все изображения выше области просмотра, независимо от того, видны они в данный момент, загружаются в обычном режиме.
Атрибут loading не должен влиять на код, который в отложенном режиме загружает данные, но важно учитывать некоторые важные моменты:
Одна из важных причин продолжить использовать стороннюю библиотеку параллельно с loading=«lazy» заключается в предоставлении полифила для браузеров, не поддерживающих данный атрибут.
Атрибут loading
можно рассматривать, как прогрессивное улучшение. Браузеры, которые поддерживают его, могут загружать изображения и фреймы в отложенном режиме. Те, что не поддерживают — пока что загружают изображения как обычно. С точки зрения кроссбраузерной поддержки, атрибут loading
поддерживается в Chrome 76 и любых браузерах, основанных на базе Chromium 76. Также существует открытый баг [11] про реализацию данной функции в Firefox.
Похожее API было предложено и использовалось в IE и Edge, но оно было сфокусировано на понижении приоритетов загрузки вместо полного её откладывания.
Создайте полифил или используйте стороннюю библиотеку, чтобы загружать изображения на сайте в отложенном режиме. Свойство loading может быть использовано для определения, поддерживается ли функционал в браузере:
if ('loading' in HTMLImageElement.prototype) {
// supported in browser
} else {
// fetch polyfill/third-party library
}
Например, lazysizes [12] — популярная JavaScript библиотека для ленивой загрузки. Вы можете определить поддержку атрибута loading
, чтобы загрузить эту библиотеку только, когда loading
не поддерживается. Это работает следующим образом
<!-- 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/4.1.8/lazysizes.min.js';
document.body.appendChild(script);
}
</script>
Демонстрация [13] работы. Испробуйте это в таким браузерах, как Firefox или Safari, чтобы увидеть фолбек в действии.
Библиотека lazysizes также обеспечивает плагин встроенной загрузки [14], который использует встроенную отложенную загрузку, когда это возможно, и задействует функционал библиотеки, когда в этом есть потребность.
Вся реклама, представленная в виде изображений или фреймов, также загружается в отложенном режиме, как любые другие изображения или фреймы.
Хотя функционала нет в Chrome 76, существует открытая проблема [15], обеспечивающая немедленную загрузку всех изображений и фреймов при печати страницы.
Использование встроенной поддержки ленивой загрузки изображений и фреймов может существенно облегчить повышение производительности веб-страниц.
Если замечаете любое необычное поведение при включении этой функции в Chrome, сообщите об ошибке [16].
Автор: Рома
Источник [17]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/html/328109
Ссылки в тексте:
[1] пример : https://mathiasbynens.be/demo/img-loading-lazy
[2] HTTPArchive: https://httparchive.org/reports/page-weight
[3] фотографий с кошками: https://en.wikipedia.org/wiki/Cats_and_the_Internet
[4] Intersection Observer API: https://developers.google.com/web/updates/2016/04/intersectionobserver
[5] обработчиков событий: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#using_event_handlers_the_most_compatible_way
[6] Lite mode: https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html
[7] эффективный тип соединения: https://googlechrome.github.io/samples/network-information/
[8] Chromium source: https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/frame/settings.json5?l=971-1003&rcl=e8f3cf0bbe085fee0d1b468e84395aad3ebb2cad
[9] замедления скорости: https://developers.google.com/web/tools/chrome-devtools/network/#throttle
[10] порога загрузки: https://web.dev/native-lazy-loading#load-in-distance-threshold
[11] открытый баг: https://bugzilla.mozilla.org/show_bug.cgi?id=1542784
[12] lazysizes : https://github.com/aFarkas/lazysizes
[13] Демонстрация: https://lazy-loading.firebaseapp.com/lazy_loading_native.html
[14] плагин встроенной загрузки: https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/native-loading
[15] открытая проблема: https://bugs.chromium.org/p/chromium/issues/detail?id=875403
[16] сообщите об ошибке: https://bugs.chromium.org/p/chromium/issues/entry?summary=%5BLazyLoad%5D:&comment=Application%20Version%20%28from%20%22Chrome%20Settings%20%3E%20About%20Chrome%22%29:%20%0DAndroid%20Build%20Number%20%28from%20%22Android%20Settings%20%3E%20About%20Phone/Tablet%22%29:%20%0DDevice:%20%0D%0DSteps%20to%20reproduce:%20%0D%0DObserved%20behavior:%20%0D%0DExpected%20behavior:%20%0D%0DFrequency:%20%0D%3Cnumber%20of%20times%20you%20were%20able%20to%20reproduce%3E%20%0D%0DAdditional%20comments:%20%0D&labels=Pri-2&components=Blink%3ELoader%3ELazyLoad%2C
[17] Источник: https://habr.com/ru/post/464929/?utm_source=habrahabr&utm_medium=rss&utm_campaign=464929
Нажмите здесь для печати.