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

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):

и новые пороговые значения по сравнению с LazySizes (популярная библиотека отложенной загрузки JavaScript):

Присвойте атрибуты размеров вашим изображениям

Когда браузер загружает изображение, он не сразу узнает размеры изображения, если они не указаны явно. Чтобы браузер мог зарезервировать достаточно места на странице для изображений и избежать резких изменений макета , мы рекомендуем добавлять атрибуты width и height ко всем тегам <img> .

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

Альтернативно, укажите их значения непосредственно во встроенном стиле:

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

Лучшая практика установки размеров применима к тегам <img> независимо от того, ленива ли вы их загрузка, но отложенная загрузка может сделать ее более важной.

Отложенная загрузка в Chromium реализована таким образом, что изображения с большей вероятностью будут загружаться, как только они станут видимыми, но все равно остается вероятность, что они не загрузятся в нужное время. Если это произойдет, отсутствие указания width и height изображений увеличит их влияние на совокупный сдвиг макета. Если вы не можете указать размеры изображений, их отложенная загрузка может сэкономить сетевые ресурсы без риска увеличения смещения макета .

В большинстве сценариев изображения по-прежнему загружаются лениво, если вы не указываете размеры, но есть несколько крайних случаев, о которых вам следует знать. Без указания width и height размеры изображения по умолчанию равны 0×0 пикселей. Если у вас есть галерея изображений, браузер может с самого начала решить, что все они помещаются в область просмотра, поскольку каждое изображение не занимает места и ни одно изображение не вытесняется за пределы экрана. В этом случае браузер решает загрузить все, из-за чего страница загружается медленнее.

Пример того, как работает loading с большим количеством изображений, можно найти в этой демонстрации .

Вы также можете отложенно загружать изображения, определенные вами с помощью элемента <picture> :

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

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

Всегда загружаемые изображения, видимые в первом окне просмотра.

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

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

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

Изящная деградация

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

Часто задаваемые вопросы

Некоторые часто задаваемые вопросы об отложенной загрузке на уровне браузера.

Могу ли я автоматически загружать изображения в Chrome с отложенной загрузкой?

Раньше Chromium автоматически загружал отложенно все изображения, которые хорошо подходили для отсрочки, если в Chrome для Android был включен упрощенный режим , а атрибут loading либо не был указан, либо имел значение loading="auto" . Однако режим Lite и loading="auto" устарели , и в Chrome не планируется обеспечивать автоматическую отложенную загрузку изображений.

Могу ли я изменить степень приближения изображения к области просмотра перед его загрузкой?

Эти значения жестко закодированы и не могут быть изменены через API. Однако в будущем они могут измениться, поскольку браузеры экспериментируют с различными пороговыми расстояниями и переменными.

Могут ли фоновые изображения CSS использовать атрибут loading ?

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

Может ли loading работать с изображениями в области просмотра, которые не видны сразу?

Использование loading="lazy" может предотвратить загрузку изображений, когда они невидимы, но находятся в пределах расчетного расстояния . Эти изображения могут находиться за каруселью или быть скрыты CSS для определенных размеров экрана. Например, Chrome, Safari и Firefox не загружают изображения с помощью display: none; стиль либо для элемента изображения, либо для родительского элемента. Однако другие методы сокрытия изображения, такие как использование стилей opacity:0 , по-прежнему заставляют браузер загружать изображение. Всегда тщательно тестируйте свою реализацию, чтобы убедиться, что она работает так, как задумано.

Chrome 121 изменил поведение изображений с горизонтальной прокруткой, таких как карусели. Теперь они используют те же пороговые значения, что и вертикальная прокрутка. Это означает, что в случае использования карусели изображения будут загружаться до того, как они появятся в области просмотра. Это означает, что загрузка изображения с меньшей вероятностью будет заметна для пользователя, но за счет большего количества загрузок. Используйте демонстрацию горизонтальной отложенной загрузки , чтобы сравнить поведение в Chrome, Safari и Firefox.

Что делать, если я уже использую стороннюю библиотеку или скрипт для отложенной загрузки изображений?

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

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

Как мне работать с браузерами, которые не поддерживают отложенную загрузку?

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

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

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

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

Например, lazysizes — популярная библиотека отложенной загрузки JavaScript. Вы можете обнаружить поддержку атрибута loading для загрузки lazysize в качестве резервной библиотеки только в том случае, если loading не поддерживается. Это работает следующим образом:

• Замените <img src> на <img data-src> чтобы избежать быстрой загрузки в неподдерживаемых браузерах. Если атрибут loading поддерживается, замените data-src на src .
• Если loading не поддерживается, загрузите резервный вариант из lazysizes и инициируйте его, используя класс lazyload , чтобы указать, какие изображения следует загружать отложенно:

<!-- 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/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

Вот демо-версия этого шаблона. Попробуйте это в более старом браузере, чтобы увидеть резервный вариант в действии.

Поддерживается ли в браузерах отложенная загрузка iframe?

<iframe loading=lazy> также был стандартизирован. Это позволяет лениво загружать iframe с использованием атрибута loading . Дополнительные сведения см. в разделе Пришло время ленивой загрузки закадровых iframe!

Как отложенная загрузка на уровне браузера влияет на рекламу на веб-странице?

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

Как обрабатываются изображения при печати веб-страницы?

Все изображения и iframe загружаются сразу после печати страницы. Подробности см. в выпуске № 875403 .

Распознает ли Lighthouse отложенную загрузку на уровне браузера?

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

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

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

Замечаете ли вы какое-либо необычное поведение при включенной этой функции в Chrome? Сообщите об ошибке !