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

Наконец-то появилась встроенная отложенная загрузка!

Адди Османи

Хусейн Джирде

Матиас Биненс

Барри Поллард

Поддержка отложенной загрузки изображений на уровне браузера теперь поддерживается в Интернете! В этом видео показана демонстрация функции:

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

Совместимость с браузером

Браузеры, которые не поддерживают атрибут loading , просто игнорируют его без побочных эффектов.

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

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

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

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

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

Атрибут loading

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Старые пороги. против новых порогов:

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

Мы стремимся работать с сообществом веб-стандартистов, чтобы улучшить согласованность подходов к пороговым значениям расстояния от области просмотра в разных браузерах.

Изображения должны включать атрибуты размеров.

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

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

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

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

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

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

Кроме того, указание размеров изображения снижает вероятность смещения макета . Если вы не можете указать размеры изображений, их отложенная загрузка может стать компромиссом между экономией сетевых ресурсов и потенциально повышенным риском изменения макета.

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

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

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

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

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

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

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

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

<!-- 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=lazy на изображениях над сгибом, поскольку Chrome не будет предварительно загружать изображения loading=lazy в сканер предварительной загрузки , а также будет задерживать получение таких изображений до тех пор, пока весь макет не будет завершен. Дополнительную информацию см. в разделе Избегайте отложенной загрузки изображений, которые находятся в первой видимой области просмотра .

Как атрибут loading работает с изображениями, которые находятся в области просмотра, но не видны сразу (например, за каруселью или скрыты CSS для определенных размеров экрана)?

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

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

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

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

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

Создайте полифилл или используйте стороннюю библиотеку для отложенной загрузки изображений на свой сайт. Свойство 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) и инициируйте ее. В соответствии с документами lazysizes вы используете класс lazyload как способ указать lazysizes, какие изображения следует загружать отложенно.

<!-- 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> также стандартизирован и уже реализован в Chromium и Safari. Это позволяет вам лениво загружать iframe, используя атрибут loading . Дополнительную информацию см. в этой специальной статье об отложенной загрузке iframe .

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

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

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

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

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

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

Заключение

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

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