На странице может быть много изображений, которые пользователь не увидит. Потому что они находятся в карусели за пределами видимой области, ниже первого экрана или спрятаны в раскрываемых виджетах. Это хорошие кандидаты для применения шаблона отложенной загрузки.
Для этого применяются специальные библиотеки. Они полагаются на Intersection Observer, чтобы отслеживать пересечения изображений с областью просмотра. Затем ссылки из атрибутов
data-src и data-srcset подставляются в src и srcset, что инициирует загрузку.С библиотеками есть проблемы:
- Зависимость от JS и дополнительные накладные расходы. Ленивая загрузка не будет работать, пока не выполнится код библиотеки. Поэтому ссылки помещают в
data-* атрибуты;- Поисковые роботы могут не извлекать ссылки из
data-src/data-srcset или игнорировать изображения без src. Таким образом можно навредить SEO;- Атрибут
src обязательный, поэтому многие инструменты анализа разметки (валидаторы, линтеры, сканеры доступности) будут игнорировать такие изображения или помечать как невалидные;- Для предотвращения проблем с JS и SEO нужно добавлять дополнительный элемент
<img> и вкладывать его в <noscript>.Проблемы решает встроенный в HTML атрибут
loading. Значение eager сообщает, что ресурс нужно обрабатывать как обычно. Это значение по умолчанию, поэтому атрибут можно не указывать. Значение lazy включает встроенную в браузеры ленивую загрузку.Атрибут доступен у элементов
<img> и <iframe>, также есть предложение добавить его для <video>. При установке loading="lazy" ресурс не будет скачиваться на этапе обработки HTML, сканер предварительной загрузки не добавит ссылку в очередь.При приближении элемента к области просмотра начнётся загрузка. Когда именно это произойдёт — браузер решает сам. Учитывается текущее состояние устройства: тип соединения, загруженность процессора, заряд батареи и прочее.
Можно было бы сказать, что для всех
<img> и <iframe> нужно установить loading="lazy", но это не так. Не стоит устанавливать loading="lazy" для элементов в верхней части страницы, которые видны сразу.Изображение может стать кандидатом на LCP (Largest Contentful Paint). В таком случае его важно показать как можно скорее.
loading="lazy" помешает заранее начать загрузку. В результате пользователи получат изображение позже и значение метрики LCP возрастёт.#ydkhtml #performance
