Отложенная Загрузка Изображений На Уровне Браузера Для Интернета

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

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

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

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

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

Согласно HTTPArchive, изображения являются наиболее востребованным типом ресурсов для большинства веб-сайтов и обычно занимают большую пропускную способность, чем любой другой ресурс. В 90-м процентиле сайты отправляют около 4,7 МБ изображений на настольные и мобильные устройства. Это много фотографий кошек.

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

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

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

Атрибут loading #

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

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

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

Here are the supported values for the loading attribute:

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете найти значения по умолчанию для различных эффективных типов соединений в источнике 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">

Alternatively, specify their values directly in an inline style:

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

The best practice of setting dimensions applies to <img> tags regardless of whether or not they are being loaded lazily. With lazy loading, this can become more relevant. Setting width and height on images in modern browsers also allows browsers to infer their intrinsic size.

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

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

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

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

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

Although a browser will decide which image to load from any of the <source> elements, the loading attribute only needs to be included to the fallback <img> element.

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

Следует избегать настройки 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">

Graceful degradation #

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

FAQ #

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

Ранее Chromium автоматически лениво загружал любые изображения, которые хорошо подходили для отсрочки, если режим Lite был включен в 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

}

For example, lazysizes is a popular JavaScript lazy loading library. You can detect support for the loading attribute to load lazysizes as a fallback library only when loading isn't supported. This works as follows:

• Замените <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>

Here's a demo of this pattern. Try it out in an older browser to see the fallback in action.

Поддерживается ли ленивая загрузка для iframes в Chrome? #