Обновление браузера Chrome порадовало нас ленивой загрузкой изображений и айфреймов при помощи самого HTML. Больше не нужно городить скрипты и коды. Встречайте новый атрибут loading для элементов <img> и <iframe>
Нативная отложенная загрузка на уровне браузера наконец-то здесь!
Поддержка нативно загружаемых изображений и фреймов в Интернете! Это видео показывает демонстрацию функции: (https://mathiasbynens.be/demo/img-loading-lazy)
Начиная с Chrome 76, вы сможете использовать новый атрибут loading для отложенной загрузки (lazy-load) ресурсов без необходимости писать собственный код отложенной загрузки или использовать отдельную библиотеку JavaScript. Давайте углубимся в детали.
Почему родная ленивая загрузка?
Согласно HTTPArchive (https://httparchive.org/reports/page-weight), изображения являются наиболее востребованным типом ресурсов для большинства веб-сайтов и обычно занимают большую полосу пропускания, чем любой другой ресурс. На 90 процентах сайтов отправляют около 4,7 МБ изображений на настольные и мобильные устройства. Это много фотографий кошек. (https://en.wikipedia.org/wiki/Cats_and_the_Internet)
Встроенные фреймы (Embedded iframes) также используют много данных и могут снизить производительность страницы. Только загрузка некритичных изображений ниже изображения и фреймов, когда пользователь может их увидеть, сокращает время загрузки страницы, минимизирует полосу пропускания пользователя и уменьшает использование памяти.
В настоящее время существует два способа отложить загрузку изображений вне экрана и фреймов:
- Использование Intersection Observer API (https://developers.google.com/web/updates/2016/04/intersectionobserver)
- Использование обработчиков событий (event handlers)
scroll,resize, илиorientationchange(https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#using_event_handlers_the_most_compatible_way)
Любой из вариантов может позволить разработчикам включать функцию отложенной загрузки, и многие разработчики создали сторонние библиотеки для предоставления абстракций, которые еще проще в использовании. С ленивой загрузкой, поддерживаемой непосредственно браузером, нет никакой необходимости во внешней библиотеке. Собственная отложенная загрузка также гарантирует, что отложенная загрузка изображений и фреймов все еще работает, даже если JavaScript отключен на клиенте.
Атрибут loading
Сегодня Chrome уже загружает изображения с различными приоритетами в зависимости от того, где они расположены относительно области просмотра устройства. Изображения под окном просмотра загружаются с более низким приоритетом, но они по-прежнему выбираются как можно скорее.
В Chrome 76 вы можете использовать атрибут loading, чтобы полностью отложить загрузку закадровых изображений и iframes, которые могут быть достигнуты с помощью прокрутки:
<img src="image.png" loading="lazy" alt="…" width="200" height="200"> <iframe src="https://example.com" loading="lazy"></iframe>
Вот поддерживаемые значения для атрибута loading:
auto— (loading="auto") По умолчанию браузер выполняет ленивую загрузку, которая не отличается от атрибута.lazy— (loading="lazy") Отложите загрузку ресурса, пока он не достигнет расчетного расстояния от области просмотра. (https://web.dev/native-lazy-loading/#load-in-distance-threshold)eager— (loading="eager") Загружайте ресурс немедленно, независимо от того, где он находится на странице.
Эта функция будет обновляться до тех пор, пока она не будет выпущена в стабильном выпуске (Chrome 76 не раньше). Но вы можете попробовать это, включив следующие флаги в Chrome:
chrome://flags/#enable-lazy-image-loadingchrome://flags/#enable-lazy-frame-loading
Предел расстояния загрузки
Все изображения и фреймы, расположенные выше сгиба, то есть сразу видимые без прокрутки, загружаются нормально. Те, которые находятся значительно ниже области просмотра устройства, выбираются только тогда, когда пользователь прокручивает их.
Порог расстояния не является фиксированным и изменяется в зависимости от нескольких факторов:
- Тип загружаемого ресурса (изображение или iframe)
- Включен ли Lite mode (облегченный режим) в Chrome для Android (https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html)
- Эффективный тип соединения (https://googlechrome.github.io/samples/network-information/)
Вы можете найти значения по умолчанию для различных эффективных типов соединений в источнике Chromium. Эти числа и даже подход выборки только при достижении определенного расстояния от области просмотра могут измениться в ближайшем будущем, так как команда Chrome улучшает эвристику, чтобы определить, когда начинать загрузку.
В Chrome 77 вы можете экспериментировать с этими различными пороговыми значениями, регулируя сеть в DevTools. Тем временем вам нужно будет переопределить эффективный тип подключения браузера, используя флаг chrome://flags/#force-effective-connection-type.
https://developers.google.com/web/tools/chrome-devtools/network/#throttle
Загрузка изображения
Чтобы предотвратить повторное всплытие окружающего содержимого при загрузке загруженного изображения, обязательно добавьте атрибуты высоты и ширины (height и width) к элементу <img> или укажите их значения непосредственно во встроенном стиле:
<img src="..." loading="lazy" width="200" height="200">
<img src="..." loading="lazy" style="height:200px; width:200px;">
Изображения по-прежнему будут загружаться с отложенной загрузкой, если размеры не включены, но их указание уменьшает вероятность повторного просмотра в браузере.
Поддержка атрибута intrinsicsize, также поддерживается поэтому изображения будут корректно загружаться, если intrinsicsize указан вместе с одним другим измерением (height и width).
https://bugs.chromium.org/p/chromium/issues/detail?id=967992
<img src="…" alt="…" loading="lazy" intrinsicsize="250x200" width="450">
<!-- lazy-loaded -->
Посмотрите на эту демонстрацию, чтобы увидеть, как атрибут loading работает со 100 картинками. (https://mathiasbynens.be/demo/img-loading-lazy)
Источники информации
Google для Разработчиков — https://developers.google.com/web/updates/2019/09/nic77
ВебДев — https://web.dev/native-lazy-loading/
