Налаштування 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 сесій і середньому чеку 3 500 грн дало додатковий виторг близько 280 000 грн на місяць за рахунок зниження відмов на 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

Чек-лист для самостійного налаштування:

• Перевірте, що на всіх тегах вказані width та height (резервування місця).
• Вимкніть lazy load для зображень першого екрану (перші 2–4 рядки сітки).
• Для фонових CSS-зображень реалізуйте IntersectionObserver із додаванням класу.
• Перевірте завантаження на повільних мережах (3G) за допомогою Chrome DevTools.
• Заміряйте LCP та CLS до та після змін.

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

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

Що зробили:

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

Результат: обсяг завантажуваних зображень при першому відкритті знизився до 1,1 МБ (економія 82%), LCP скоротився до 1,9 с. При прокручуванні користувач не помічає затримки. Додатковий виторг за рахунок зниження відмов — близько 280 000 грн на місяць при середньому чеку 3 500 грн.

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

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: Відкладене завантаження зображень

80% сайтів на Бітрікс гальмують через одну таблицю

b_iblock_element_property — EAV-структура. Кожен рядок зберігає одне значення однієї властивості одного елемента. Каталог у 50 000 товарів з 30 властивостями дає 1,5 млн рядків. Коли розумний фільтр робить JOIN цієї таблиці з b_iblock_element за п'ятьма властивостями, MySQL іде в full table scan на 3–5 секунд.

Наш досвід показує: без втручання в цю таблицю прискорення неможливе. Ми беремося за проекти, де швидкість завантаження впала до 8–10 секунд, і повертаємо TTFB < 200 мс за 1–2 тижні. Оптимізація швидкості сайту починається з аудиту slow-запитів і закінчується комплексною перебудовою інфраструктури під ключ. У нашому портфоліо — понад 200 успішних проєктів. Ми — команда сертифікованих фахівців з 10‑річним досвідом роботи в Бітрікс.

Серверна оптимізація

Nginx. Не просто «увімкнули gzip». Конкретно:

• gzip_comp_level 4-5 — вище безглуздо, CPU з'їдає більше, ніж економить трафік;
• brotli on з brotli_static on — для попередньо стиснутих файлів (Brotli стискає на 20–30% краще за gzip);
• HTTP/2 з http2_max_concurrent_streams 128;
• fastcgi_cache для PHP-відповідей — кешування на рівні Nginx, минаючи PHP-FPM;
• worker_processes auto, worker_connections під кількість одночасних з'єднань.

PHP-FPM. Вибір між pm = dynamic і pm = static — не академічний:

• Static: фіксована кількість воркерів, без overhead на форк — для виділених серверів з передбачуваним навантаженням.
• Dynamic: економить RAM при низькому трафіку. pm.max_children рахуємо як (доступна RAM − RAM для MySQL/Redis) / середня витрата на процес.
• OPcache: opcache.memory_consumption=256, opcache.max_accelerated_files=20000, opcache.validate_timestamps=0 на продакшені (перезавантаження PHP-FPM при деплої).

MySQL/MariaDB. Головне вузьке місце майже завжди:

• slow_query_log з порогом 0.5 сек — кожен запит розбираємо через EXPLAIN.
• innodb_buffer_pool_size = 70–80% доступної RAM на виділеному сервері.
• Складені індекси для фасетного пошуку: (IBLOCK_ID, IBLOCK_PROPERTY_ID, VALUE) на b_iblock_element_property.
• OPTIMIZE TABLE b_iblock_element_property після масових операцій.

Як налаштувати кешування на три рівні?

Керований кеш компонентів. TTL налаштовуємо для кожного компонента окремо. Каталог — 3600 сек, новинна стрічка — 300 сек, банери — 86400. Однаковий TTL всюди — гарантія або застарілих даних, або марного кешу.

Композитний кеш. Технологія bitrix:composite — Nginx віддає готовий HTML із файлу, PHP не запускається. Динамічні зони (кошик, авторизація) підвантажуються AJAX-запитом через CBitrixComponent::setFrameMode(true). TTFB < 50 мс. Але не всі компоненти сумісні: $APPLICATION->ShowPanel() і прямий вивід через echo ламають композит. Перевіряємо кожну сторінку через панель «Продуктивність → Композитний сайт».

Порівняння: композитний кеш швидший за керований у 10–20 разів за часом першого байта. Офіційна документація Бітрікс з композитного кешу — Bitrix Composite.

Memcached / Redis. Переносимо кеш із файлової системи:

• Сесії → Redis (session.save_handler = redis) — швидше за файли в 10–50×, плюс робота в кластері.
• Кеш компонентів → Memcached через .settings.php: 'cache' => ['type' => 'memcache'].
• Кеш ORM-запитів — однакові GetList() не навантажують MySQL на кожному хіті.

Чому стандартних налаштувань MySQL недостатньо?

Індекси. Складені для фасетного пошуку. Покриваючі — для частих вибірок MySQL відповідає з індексу, не звертаючись до даних. Часткові індекси (MariaDB) для фільтрації за ACTIVE = 'Y'. Аудит невикористовуваних індексів — кожен сповільнює INSERT/UPDATE.

Партиціонування. Для таблиць з мільйонами рядків: b_stat_session, b_search_content_stem, Highload-блоки з історією. Партиція за датою — запит «замовлення за місяць» не сканує дані за три роки.

Реальний кейс: каталог 200 000 товарів, 50 властивостей. Фільтр за 10 властивостями займав 12 секунд. Після створення складених індексів за (IBLOCK_ID, IBLOCK_PROPERTY_ID, VALUE) та партиціонування b_iblock_element_property за IBLOCK_ID час виконання впав до 0,3 секунди. Навантаження на MySQL знизилося в 40 разів. Це дозволило скоротити витрати на сервер до 40% без втрати продуктивності.

Очищення. У будь-якій базі за рік-два накопичується: застарілий пошуковий індекс, прострочені записи в b_cache_tag, історія b_iblock_element_prop_s*, логи в b_event_log на гігабайти. Налаштовуємо регулярне очищення через агенти.

Партиціонування також вирішує проблему з паралельними запитами при обміні з 1С через CommerceML. Докладніше: MySQL Partitioning Documentation.

Після аудиту вашого проекту ми визначимо вузькі місця за 2 години та запропонуємо конкретний план прискорення. Замовте безкоштовний аудит швидкості — заповніть форму на сайті.

Фронтенд

Зображення — 60–80% ваги сторінки:

• WebP через CFile::ResizeImageGet() з BX_RESIZE_IMAGE_PROPORTIONAL + конвертація;
• srcset + sizes — не завантажуємо 3000px картинку в блок 400px;
• loading="lazy" для всього нижче першого екрану;
• AVIF — ще 20–30% економії порівняно з WebP.

CSS/JS:

• Вбудований модуль Бітрікс: об'єднання та мініфікація через «Налаштування → Оптимізація CSS/JS»;
• PurgeCSS / UnCSS — на типовому Бітрікс-проекті 60–70% CSS не використовуються;
• defer / async для некритичного JS;
• Critical CSS інлайном у <head> для миттєвого FCP.

Шрифти:

• <link rel="preload" as="font" crossorigin> для основного шрифту;
• font-display: swap — текст видно одразу;
• Subsetting через pyftsubset — вирізаємо кирилицю + латиницю, файл зменшується в 3–5 разів.

CDN

Cloudflare, BunnyCDN, AWS CloudFront або локальні (Selectel CDN, VK Cloud CDN).

• Статика (CSS, JS, зображення, шрифти) — через CDN.
• Правила кешування: Cache-Control: public, max-age=31536000, immutable для файлів з хешем.
• Оптимізація зображень на льоту (imgproxy, Cloudflare Polish) без навантаження на origin.

Навіщо потрібне навантажувальне тестування?

Не синтетичні бенчмарки, а реальні сценарії:

• k6 / wrk — імітація маршрутів: каталог → фільтрація → картка → кошик → оформлення.
• Метрики: RPS, час відповіді (p50, p95, p99), відсоток помилок.
• Xdebug (callgrind) або Blackfire — профілювання PHP, пошук вузьких місць.

Результат тестування — об'єктивна картина, де реально гальмує. Після оптимізації проганяємо повторно — фіксуємо покращення.

Результати

Що входить у роботу?

1. Аудит поточної продуктивності — аналіз slow-запитів, профілювання PHP, перевірка кешування, CDN, серверних налаштувань.
2. Налаштування серверної частини — Nginx, PHP-FPM, MySQL, Redis/Memcached, OPcache.
3. Оптимізація кешування — керований кеш, композитний сайт, налаштування TTL, теговане кешування.
4. Робота з БД — створення індексів, партиціонування, очищення, реорганізація EAV-таблиць.
5. Фронтенд — зображення (WebP/AVIF), CSS/JS (мініфікація, deferred), шрифти (preload, subsetting).
6. CDN — підключення, налаштування правил кешування.
7. Навантажувальне тестування — сценарії реальних користувачів, звіт за метриками.
8. Документація — опис усіх змін, рекомендації щодо подальшого обслуговування.
9. Гарантія — підтримка протягом 1 місяця після здачі.

Моніторинг

Без моніторингу через півроку все деградує. Новий модуль, неочищені логи, зміна в шаблоні — і швидкість повернулася до початкової.

• web-vitals API — Real User Monitoring від реальних відвідувачів.
• Synthetic monitoring — Pingdom, UptimeRobot, регулярні перевірки з різних локацій.
• Алерти — TTFB > 500 мс або LCP > 3 сек → сповіщення.

Терміни та вартість

Вартість розраховується індивідуально після аудиту. Отримайте консультацію щодо вашого проекту — оцінимо поточний стан і запропонуємо план прискорення з конкретними термінами та бюджетом. Ми — команда з 10+ роками досвіду в Бітрікс, виконали понад 200 проектів з оптимізації швидкості сайту. Замовте безкоштовний аудит швидкості — зв'яжіться з нами просто зараз.