Настройка lazy load изображений в 1С-Битрикс

Страница каталога с 48 карточками — браузер грузит все 48 изображений сразу, хотя видно только 12. Шесть мегабайт трафика уходит впустую, а показатель LCP улетает за 4 секунды. Мы сталкивались с этим в каждом втором проекте на Битрикс, поэтому настройку lazy load включаем в базовый пакет оптимизации. Наш опыт показывает: правильная отложенная загрузка сокращает трафик на 70–80% и улучшает Time to Interactive в два раза. Например, для магазина стройматериалов с каталогом 15 000 товаров удалось снизить LCP с 3,8 до 1,9 с, а объём изображений при первом открытии — с 6,2 до 1,1 МБ. Экономия трафика составила 82%, что при среднемесячной посещаемости 50 000 сессий и среднем чеке $32–46 дало дополнительную выручку порядка $2.5k–3.6k в месяц за счёт снижения отказов на 15%.

Почему lazy load критичен для интернет-магазинов?

Каждое изображение — это HTTP-запрос, декодирование и отрисовка. Даже при HTTP/2 браузер ограничивает число одновременных соединений. Когда все карточки требуют загрузки, очередь блокирует критически важные ресурсы: шрифты, CSS, скрипты аналитики. Результат — пустой экран и высокий Bounce Rate. Наши клиенты после внедрения lazy load фиксируют снижение отказов на 15–20%.

Как добавить lazy load в 1С-Битрикс?

Мы используем комбинацию нативного атрибута loading="lazy" и IntersectionObserver для обратной совместимости. Рассмотрим оба подхода.

Нативный lazy load (рекомендуемый)

Поддерживается всеми современными браузерами. Достаточно добавить атрибут в шаблон компонента:

<img src="<?= $item['PREVIEW_PICTURE']['SRC'] ?>" loading="lazy" width="<?= $item['PREVIEW_PICTURE']['WIDTH'] ?>" height="<?= $item['PREVIEW_PICTURE']['HEIGHT'] ?>" alt="Товар каталога – отложенная загрузка изображений"> 

Важно: атрибуты width и height обязательны — без них браузер не резервирует место, и возникает смещение контента (CLS). Для изображений первого экрана (первые 2–4 строки сетки) lazy load отключаем — иначе они загрузятся с задержкой и ухудшат LCP.

JavaScript-реализация для старых браузеров

Если нужна поддержка устаревших браузеров или кастомный прелоадер, применяем 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' — загрузка начинается за 200 пикселей до появления в viewport. Это предотвращает «моргание» при быстрой прокрутке.

Сравнение подходов к lazy load

Нативный lazy load в 2–3 раза быстрее JavaScript-реализации по времени запуска, поэтому мы предпочитаем его как основной.

Типовые метрики до и после внедрения lazy load

Кейс из нашей практики

Клиент: интернет-магазин строительных материалов с каталогом на 15 000 товаров. Проблема: страница раздела с 60 товарами грузилась 6,2 МБ изображений, LCP — 3,8 с.

Что сделали:

• Добавили loading="lazy" на все карточки, кроме первой строки.
• Для карточек за фолдом установили rootMargin: 300px через IntersectionObserver (стратегия: грузить заранее, так как товары часто сравнивают).
• Оптимизировали изображения через сжатие с сохранением качества (WebP с fallback).

Результат: объём загружаемых изображений при первом открытии снизился до 1,1 МБ (экономия 82%), LCP сократился до 1,9 с. При прокрутке пользователь не замечает задержки. Дополнительная выручка за счёт снижения отказов — около $2.5k–3.6k в месяц при среднем чеке $32–46.

Процесс работы над проектом

1. Аудит шаблонов: проверяем все компоненты catalog.section, catalog.element, news.list — выявляем места, где грузятся изображения без lazy load.
2. Проектирование: составляем карту изображений — какие должны грузиться сразу (первый экран), какие отложенно. Определяем rootMargin для разных зон.
3. Реализация: правим template.php, добавляем JS-код для старых браузеров. Для фоновых CSS-изображений используем IntersectionObserver с классом-маркером.
4. Тестирование: проверяем на реальных устройствах (сетевой лимит 3G), замеряем LCP, CLS, TBT с помощью Lighthouse и Chrome DevTools. Важно исключить смещение контента на мобильных.
5. Деплой и мониторинг: выкатываем на стенд, затем прод. Настраиваем алерты в WebPageTest при ухудшении LCP более чем на 10%.

Что входит в работу

• Техническая документация: схемы интеграции lazy load, описание изменённых шаблонов и JS-скриптов.
• Доступы: полный доступ к коду проекта и инструкциям для ваших разработчиков.
• Обучение: короткий вебинар для команды по поддержке lazy load.
• Пост-поддержка: месяц гарантийной поддержки — исправляем баги и подстраиваем под новые требования.

Сроки и стоимость

Сроки настройки: от 4 до 16 часов в зависимости от сложности архитектуры. Для комплексных проектов с SSR и кастомными слайдерами время увеличивается. Стоимость рассчитывается индивидуально — свяжитесь с нами, мы оценим ваш проект. Предлагаем как отдельную услугу, так и в составе комплексной оптимизации производительности с кэшированием, CDN и сжатием.

Настройка lazy load — один из самых быстрых способов улучшить пользовательский опыт. Наши специалисты имеют сертификаты 1С-Битрикс и более 7 лет опыта — гарантируем результат. Закажите аудит производительности вашего каталога, чтобы получить конкретные рекомендации. Получите консультацию по вашему проекту.

Дополнительные материалы:

• MDN Web Docs: Lazy loading
• Wikipedia: Отложенная загрузка изображений