Отложенная загрузка изображений на уровне браузера для Интернета

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

Вы можете использовать атрибут loading для отложенной загрузки изображений без необходимости писать собственный код отложенной загрузки или использовать отдельную библиотеку JavaScript. Вот демо -версия функции:

На этой странице подробно рассмотрена реализация отложенной загрузки в браузере.

Почему ленивая загрузка на уровне браузера?

По данным HTTP Archive , изображения являются наиболее востребованным типом ресурсов для большинства веб-сайтов и обычно занимают больше трафика, чем любой другой ресурс. В 90-м процентиле сайты отправляют более 5 МБ изображений на компьютеры и мобильные устройства.

Раньше было два способа отложить загрузку закадровых изображений:

• Использование API Intersection Observer
• Использование обработчиков событий scroll , resize или orientationchange

Любой вариант может позволить разработчикам включать режим отложенной загрузки, и многие разработчики создали сторонние библиотеки, чтобы предоставить абстракции, которые еще проще использовать.

Однако благодаря отложенной загрузке, поддерживаемой непосредственно браузером, внешняя библиотека не требуется. Отложенная загрузка на уровне браузера также гарантирует, что загрузка изображений будет работать, даже если клиент отключит JavaScript. Однако обратите внимание, что загрузка откладывается только тогда, когда включен JavaScript.

Атрибут loading

Chrome загружает изображения с разными приоритетами в зависимости от того, где они расположены относительно области просмотра устройства. Изображения ниже области просмотра загружаются с более низким приоритетом, но они все равно загружаются при загрузке страницы.

Вы можете использовать атрибут loading , чтобы полностью отложить загрузку закадровых изображений:

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

Ниже приведены поддерживаемые значения атрибута loading :

• lazy : отложить загрузку ресурса до тех пор, пока он не достигнет расчетного расстояния от области просмотра.
• eager : поведение браузера при загрузке по умолчанию, то же самое, что и отсутствие атрибута, и означает, что изображение загружается независимо от того, где оно находится на странице. Это значение по умолчанию, но его может быть полезно указать явно, если ваши инструменты автоматически добавляют loading="lazy" при отсутствии явного значения или если ваш линтер жалуется, что оно не установлено явно.

Связь между атрибутом loading и приоритетом выборки

eager значение — это инструкция загрузить изображение как обычно, без дальнейшей задержки загрузки, если изображение находится за пределами экрана. Оно не загружает изображение быстрее, чем другое изображение, у которого нет атрибута loading .

Если вы хотите повысить приоритет выборки важного изображения (например, изображения LCP), используйте Fetch Priority с fetchpriority="high" .

Изображение с loading="lazy" и fetchpriority="high" по-прежнему задерживается, пока оно находится за кадром, а затем извлекается с высоким приоритетом, когда оно почти находится в области просмотра. Эта комбинация на самом деле не обязательна, поскольку браузер, скорее всего, в любом случае загрузит это изображение с высоким приоритетом.

Пороговые значения расстояния от области просмотра

Все изображения, которые можно просмотреть сразу без прокрутки, загружаются нормально. Изображения, расположенные намного ниже области просмотра устройства, извлекаются только тогда, когда пользователь прокручивает страницу рядом с ними.

Реализация отложенной загрузки в Chromium пытается гарантировать, что закадровые изображения загружаются достаточно рано, чтобы они завершили загрузку к тому времени, когда пользователь прокручивает их, извлекая их задолго до того, как они станут видимыми в области просмотра.

Порог расстояния варьируется в зависимости от следующих факторов:

• Тип извлекаемого ресурса изображения
• Эффективный тип соединения

Значения по умолчанию для различных эффективных типов подключения можно найти в исходном коде Chromium . Вы можете поэкспериментировать с этими различными пороговыми значениями , регулируя сеть в DevTools.

Улучшена экономия данных и пороговые значения расстояния от области просмотра.

В июле 2020 года Chrome внес значительные улучшения, чтобы согласовать пороговые значения расстояния от области просмотра для ленивой загрузки изображений, чтобы лучше соответствовать ожиданиям разработчиков.

Для быстрых подключений (4G) мы уменьшили пороговое значение расстояния от области просмотра Chrome с 3000px до 1250px , а для более медленных соединений (3G или ниже) изменили пороговое значение с 4000px до 2500px . Это изменение позволяет добиться двух целей:

• <img loading=lazy> ведет себя ближе к возможностям, предлагаемым библиотеками отложенной загрузки JavaScript.
• Новые пороговые значения расстояния от области просмотра по-прежнему означают, что изображения, вероятно, будут загружены к тому времени, когда пользователь прокрутит их.

Ниже вы можете найти сравнение между старыми и новыми пороговыми значениями расстояния от области просмотра для одной из наших демонстраций при быстром соединении (4G):