Lazy load изображений на Битрикс

Загрузка всех изображений страницы сразу, включая те, что находятся далеко за пределами видимой области экрана, — лишняя нагрузка на канал и заметная задержка отрисовки. Разберём, как настроить отложенную загрузку изображений (lazy load) на сайте 1С-Битрикс современным способом, без сторонних JS-библиотек.

Нативный атрибут loading вместо сторонних библиотек

<img src="/upload/product.jpg" loading="lazy" alt="Название товара">

Современные браузеры поддерживают атрибут loading="lazy" нативно — изображение с этим атрибутом не загружается, пока не приблизится к области видимости при прокрутке. Этот способ предпочтительнее сторонних JavaScript-библиотек, распространённых ещё несколько лет назад: не требует подключения дополнительного скрипта и не создаёт задержку инициализации, характерную для JS-решений, ожидающих полной загрузки DOM перед началом работы.

Правка шаблонов компонентов вывода

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

Изображение над первым экраном не должно быть ленивым

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

Резервирование места под изображение: width и height

<img
    src="/upload/product.jpg"
    loading="lazy"
    width="400"
    height="300"
    alt="Название товара"
>

Явное указание атрибутов width и height (или CSS aspect-ratio) резервирует место под изображение до его фактической загрузки — без этого страница "прыгает" по мере подгрузки изображений при прокрутке, что негативно влияет на метрику визуальной стабильности CLS (Cumulative Layout Shift), важную для оценки удобства страницы поисковыми системами.

Lazy load для фоновых изображений CSS

Атрибут loading="lazy" работает только для тега <img> и не применяется к изображениям, заданным через CSS background-image, — для таких случаев нужен либо перевод верстки на обычный <img> с CSS-позиционированием поверх, либо ручная реализация через Intersection Observer API, если фоновое изображение технически необходимо оставить именно так.

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

Браузеры без поддержки атрибута loading просто игнорируют его и загружают изображение как обычно, без ошибки, — это делает нативный lazy load безопасным для постепенного внедрения без необходимости проверки поддержки браузера или подключения полифилов, в отличие от JS-библиотек, которые могли сломаться при отсутствии нужного API в браузере.

Проверка эффекта через инструменты разработчика

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

Частые ошибки

• loading="lazy" стоит на изображениях первого экрана. Замедляет восприятие быстрой загрузки того, что видно сразу.
• Нет атрибутов width и height у ленивых изображений. Скачки вёрстки по мере подгрузки, ухудшение метрики CLS.
• Фоновые CSS-изображения ожидаются ленивыми "как обычные img". Атрибут loading на них не действует вовсе.

Итог

Нативный атрибут loading="lazy" закрывает большинство сценариев отложенной загрузки изображений на сайте 1С-Битрикс без сторонних библиотек, но требует ручной правки шаблонов компонентов и осторожности с изображениями первого экрана, которые должны загружаться немедленно. Указание размеров изображения через width и height остаётся обязательным дополнением, без которого отложенная загрузка создаёт скачки вёрстки при прокрутке.