Эта страница переведена с помощью Cloud Translation API.

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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

Browser Support

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

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

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

Зачем нужна отложенная загрузка на уровне браузера?

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

Ранее существовало два способа отложить загрузку изображений, находящихся за пределами видимой области экрана:

Использование API наблюдателя за перекрестками
Использование обработчиков событий 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 . Вы можете поэкспериментировать с этими различными пороговыми значениями, регулируя скорость сети в инструментах разработчика.

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

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

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

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

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

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

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

Новые пороговые значения расстояния от области просмотра в Chrome позволяют загружать изображения размером 90 КБ по сравнению с LazySizes, загружающими изображения размером 70 КБ при тех же сетевых условиях. — Сравнение пороговых значений, используемых для отложенной загрузки в Chrome и LazySizes.

Придайте своим изображениям объемные характеристики.

Пока браузер загружает изображение, он не сразу узнает его размеры, если они не указаны явно. Чтобы браузер мог зарезервировать достаточно места на странице для изображений и избежать резких изменений в макете , мы рекомендуем добавлять атрибуты 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 изображений, это увеличивает их влияние на кумулятивное смещение макета (Cumulative Layout Shift). Если вы не можете указать размеры изображений, ленивая загрузка может сэкономить сетевые ресурсы, но при этом увеличится риск смещения макета .

В большинстве случаев изображения загружаются с задержкой, даже если не указаны их размеры, но есть несколько исключений, о которых следует помнить. Без указания 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" . Однако облегченный режим и loading="auto" устарели , и планов по автоматической отложенной загрузке изображений в Chrome нет.

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

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

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

Нет, его можно использовать только с тегами <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 , чтобы загружать lazysizes в качестве резервной библиотеки только тогда, когда loading не поддерживается. Это работает следующим образом:

Замените <img src> на <img data-src> , чтобы избежать немедленной загрузки в неподдерживаемых браузерах. Если атрибут loading поддерживается, замените data-src на src .
Если loading не поддерживается, загрузите резервный вариант из класса lazysize и инициируйте его, используя класс 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 в браузерах?

Browser Support

Также стандартизирован атрибут <iframe loading=lazy> . Это позволяет отложенно загружать iframe-элементы с помощью атрибута loading . Для получения дополнительной информации см. статью «Пришло время отложенной загрузки iframe-элементов, находящихся за пределами экрана!».

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

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

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

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

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

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

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

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

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