Налаштування відкладеного завантаження зображень (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 або нестандартними слайдерами знадобиться додаткове налаштування під конкретні компоненти.