Настройка отложенной загрузки изображений (lazy load) 1С-Битрикс
На странице каталога с 48 карточками товаров браузер по умолчанию загружает все 48 изображений при открытии страницы — включая те, что находятся за пределами видимого экрана. При среднем весе изображения товара 80–150 KB это 4–7 MB лишнего трафика на первую загрузку, которая тормозит Largest Contentful Paint и Time to Interactive.
Нативный lazy load
Современный и самый простой способ — атрибут loading="lazy" на теге <img>. Браузеры начиная с Chrome 77, Firefox 75, Safari 15.4 поддерживают его нативно:
<img src="/upload/product.jpg" loading="lazy" width="300" height="300" alt="...">
Атрибуты width и height обязательны — без них браузер не может зарезервировать место под изображение до его загрузки, что приводит к layout shift (CLS метрика).
В шаблонах компонентов Битрикс это добавляется в template.php компонента catalog.element и catalog.section:
<img src="<?= $item['PREVIEW_PICTURE']['SRC'] ?>"
loading="lazy"
width="<?= $item['PREVIEW_PICTURE']['WIDTH'] ?>"
height="<?= $item['PREVIEW_PICTURE']['HEIGHT'] ?>"
alt="<?= htmlspecialchars($item['NAME']) ?>">
Для изображений первого экрана (hero, первые 2–4 карточки в сетке) loading="lazy" использовать не нужно — это задержит их загрузку и ухудшит LCP.
JavaScript-реализация для старых браузеров и кастомных сценариев
Если нужна поддержка Safari до 15.4 или нестандартное поведение (например, прелоадер при загрузке), используется IntersectionObserver:
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
}, { rootMargin: '200px' });
lazyImages.forEach(img => observer.observe(img));
rootMargin: '200px' — изображение начинает загружаться за 200px до появления в viewport. Это предотвращает «моргание» при быстрой прокрутке.
Lazy load для фоновых изображений CSS
Фоновые изображения CSS (свойство background-image) нативный lazy load не поддерживает. Решение — добавлять класс loaded через IntersectionObserver и определять фон только для элементов с этим классом:
.banner { background-color: #f0f0f0; } /* placeholder */
.banner.loaded { background-image: url('/upload/banner.jpg'); }
Кейс и результат
Интернет-магазин, страница каталога с 60 товарами (3 колонки × 20 строк, большинство за fold). После добавления loading="lazy" на все карточки кроме первой строки: объём загружаемых изображений при первом открытии снизился с 6,2 MB до 1,1 MB. LCP снизился с 3,8 с до 1,9 с. При прокрутке пользователь не замечает задержки — изображения загружаются заранее благодаря rootMargin.
Настройка lazy load — это 4–8 часов работы: аудит шаблонов компонентов, добавление атрибутов, тестирование на реальных устройствах (важно проверить отсутствие CLS на мобильных). Для проектов с SSR или нестандартными слайдерами потребуется дополнительная настройка под конкретные компоненты.