Отложенная загрузка изображений: loading=lazy

<img loading="lazy" src="..."> сообщает браузеру, что загрузку изображения следует отложить до момента, когда оно почти войдёт в область просмотра. Нативная поддержка во всех современных браузерах делает это самым простым способом повысить производительность страниц с большим количеством изображений.

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

Никогда не устанавливайте loading="lazy" для изображений в верхней части страницы или для кандидата LCP (отрисовки самого крупного элемента содержимого). Отложенная загрузка задерживает появление самого важного визуального элемента, что ухудшает как субъективное ощущение скорости, так и показатели Core Web Vitals.

Чтобы отложенная загрузка работала эффективно, задайте для <img> явные значения width и height (или CSS-свойство aspect-ratio). Без этих размеров браузер не может заранее зарезервировать место, при прокрутке компоновка перестраивается, а эвристика отложенной загрузки работает неправильно.

Тот же атрибут работает и для <iframe>. <iframe loading="lazy"> откладывает загрузку карт, видео и встраиваемых материалов социальных сетей, расположенных ниже первого экрана, — иначе каждый просмотр страницы загружал бы мегабайты стороннего JavaScript.

Значением по умолчанию является loading="eager" (немедленная загрузка), поэтому его редко указывают явно. Установка eager для изображений в верхней части страницы может быть полезна как документация: она показывает проверяющим код, что выбор eager был сделан намеренно.

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

Сочетайте отложенную загрузку с decoding="async", чтобы браузер мог декодировать изображение в отдельном от основного потоке потоке. Это предотвращает блокировку ввода во время прокрутки, когда после длительной серии прокруток одновременно загружается много изображений.

Фоновое изображение CSS нельзя нативно загружать отложенно. Для фоновых изображений главного экрана это нормально; для фонов ниже первого экрана используйте IntersectionObserver, чтобы подставлять URL, когда элемент приближается к области просмотра.

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

Проверка Lighthouse «Отложить загрузку изображений за пределами экрана» перечисляет все изображения, для которых следует использовать loading="lazy". Фильтрация панели сети по «Изображениям» вместе с представлением «Водопад» показывает последовательные загрузки, создаваемые отложенной загрузкой: в галереях изображений количество первоначальных запросов резко сокращается.

Почему вредно устанавливать loading="lazy" для главного изображения в верхней части страницы?

Установка loading="lazy" для элементов <img> и <iframe> за пределами экрана даёт заметный выигрыш в производительности одним атрибутом. Сочетайте её с явными width/height (чтобы зарезервировать место), srcset (для адаптивности) и decoding="async" (чтобы прокрутка оставалась плавной). Никогда не применяйте её к изображению LCP или к любому элементу, видимому в первоначальной области просмотра.