Низькі бали PageSpeed Insights на мобільних (38 балів) при високих на десктопі (91) — знайомий біль для власників сайтів на 1С-Бітрікс. Мобільна версія на 1С-Бітрікс деградує з кількох причин одночасно: шаблон не адаптований, компоненти завантажують весь JavaScript незалежно від пристрою, зображення віддаються без WebP і без атрибута srcset, а час до першого байта (TTFB) з'їдається серверним рендерингом важких сторінок. Розробка мобільної версії сайту на 1С-Бітрікс — це комплекс рішень на рівні шаблону, компонентів та серверної частини. Ми гарантуємо результат завдяки сертифікованому досвіду роботи з Бітрікс — понад 10 років і 50+ успішних проєктів.
Основні причини падіння продуктивності мобільної версії на 1С-Бітрікс
Продуктивність мобільного шаблону — найтрудомісткіша частина. Типовий набір проблем та їх рішення:
Зображення. Бітрікс вміє віддавати WebP через модуль main (налаштування BX_USE_WEBP), але це потрібно явно увімкнути та налаштувати. Атрибут srcset для адаптивних зображень у компонентах за замовчуванням не генерується — потрібне доопрацювання шаблону компонента або використання функції CFile::ResizeImageGet() з кількома розмірами. Економія трафіку — до 40%.
JavaScript. Стандартні компоненти Бітрікс тягнуть jquery, main.core, main.popup — сумарно 400–600KB gzip. Для мобільних критичний First Contentful Paint, тому скрипти, не потрібні при першому завантаженні (слайдери, віджети), переносяться в defer/async або завантажуються через IntersectionObserver. Скорочення обсягу JS — до 50%.
Шрифти. font-display: swap у CSS, попереднє завантаження критичних накреслень через <link rel="preload">.
Критичний CSS. Inline-стилі для above-the-fold контенту, решта — асинхронно. Реалізується через доопрацювання шаблону header.php.
Порівняння адаптивного та окремого шаблонів для мобільної версії на 1С-Бітрікс
У Бітрікс є два підходи: єдиний адаптивний шаблон (responsive) та окремий шаблон для мобільних пристроїв, що перемикається через $APPLICATION->SetPageProperty("kernel_theme", "mobile") або через модуль mobileapp.
| Параметр | Адаптивний шаблон | Окремий шаблон |
|---|---|---|
| Складність розробки | Низька | Висока |
| Продуктивність | Вища (один HTML) | Нижча (два шаблони) |
| Час підтримки | Менший у 2 рази | Більший |
| UX для мобільних | Хороший при оптимізації | Максимальний |
Адаптивний шаблон — стандарт де-факто. Один HTML, CSS з breakpoints, JavaScript без дублювання логіки. Проблема в тому, що «адаптивність» на рівні CSS не вирішує задачу продуктивності: важкий слайдер все одно завантажується, навіть якщо на мобільному він прихований через display: none. Адаптивний шаблон розробляється в 2-3 рази швидше окремого та потребує менше підтримки.
Роздільний шаблон виправданий у випадках, коли мобільний та десктопний користувацький шлях принципово різні — наприклад, мобільний додаток поверх Бітрікс через REST API, або коли легасі-шаблон переробляти недоцільно. Технічна реалізація: bitrix/templates/mobile/ з детектом пристрою через CBitrixComponent::includeComponent() та $_SERVER['HTTP_USER_AGENT'] або JS-детект з редиректом.
Композитний кеш для мобільних на 1С-Бітрікс
Модуль composite у Бітрікс підтримує роздільне кешування для десктоп та мобайл (параметр bx_composite_separate_cache). Це важливо: мобільна та десктопна версії сторінки відрізняються розміткою, кешувати їх в один контейнер не можна. Вмикається в налаштуваннях модуля «Композитний сайт»: встановіть прапорець «Розділяти кеш для мобільних пристроїв». Після цього композит створюватиме окремі HTML-файли для кожного типу пристроїв. На практиці це дає приріст TTFB до 30%.
Touch-навігація та UX-специфіка
Мобільна версія потребує окремого опрацювання навігації: бургер-меню, bottom navigation bar, жести (swipe для слайдерів). У контексті Бітрікс це означає доопрацювання шаблонів компонентів bitrix:menu та створення окремого компонента навігації. Картки товарів у каталозі на мобільному часто потребують спрощеної верстки: великі зони кліку, кнопка «В кошик» без зайвих кроків, швидкий перегляд через bottom sheet замість модального вікна.
Як розробка мобільної версії на 1С-Бітрікс вирішує проблеми продуктивності?
Ми не просто «робимо адаптив». Ми переглядаємо архітектуру фронтенду: відключаємо непотрібні модулі, переписуємо компоненти для асинхронного завантаження, використовуємо теговане кешування. Google PageSpeed Insights фіксує середній приріст на 40–50 балів після впровадження. В одному з проєктів TTFB покращився на 30% за рахунок роздільного композитного кешу та виносу важкого JS у defer. Результати підтверджені Google PageSpeed Insights. Економія трафіку та прискорення завантаження безпосередньо підвищують конверсію.
Приклад чек-листа аудиту
- Перевірка `BX_USE_WEBP` увімкнена - Наявність `srcset` для зображень каталогу - Кількість синхронних JS-скриптів у `` - Увімкнено роздільний кеш для мобільних - Чи використовується `font-display: swap`Результати впровадження: реальний кейс
Наш клієнт — мережа магазинів побутової техніки, ~12 000 SKU. Мобільний трафік — 68% від загального, конверсія на мобільних — у 2.8 раза нижча, ніж на десктопі. PageSpeed Mobile — 31.
Аудит виявив:
- Шаблон верстався до поточних стандартів, адаптивність — лише через CSS
display: none - 14 JavaScript-файлів, сумарно 1.1MB, всі завантажувалися синхронно в
<head> - Зображення — лише JPEG 1200px, без
srcset, без WebP - Форма оформлення замовлення — 4 кроки, кожен — окрема сторінка з повним перезавантаженням
Реалізовані рішення:
- Переробили шаблон: критичний CSS inline, JS у defer, WebP через
BX_USE_WEBP+ ресайз через хендлер - Мобільне меню замінили на drawer-компонент з анімацією через CSS transitions
- Крок оформлення замовлення об'єднали в один екран з прогрес-баром (доопрацювання
bitrix:sale.order.ajax) - Увімкнули роздільний композитний кеш
| Метрика | До | Після |
|---|---|---|
| PageSpeed Mobile | 31 | 74 |
| Конверсія на мобільних | нижче в 2.8x | +40% за 2 місяці |
| Час завантаження | ~5 с | ~2 с |
Що входить у роботу
- Аудит поточного стану: PageSpeed, WebPageTest, аналіз критичного шляху рендерингу
- Адаптація або розробка мобільного шаблону 1С-Бітрікс
- Оптимізація зображень: WebP, srcset, lazy loading
- Оптимізація завантаження JS/CSS: defer, async, code splitting
- Налаштування композитного кешу з роздільним зберіганням для мобільних
- Доопрацювання шаблонів компонентів для mobile UX
- Тестування на реальних пристроях та в Chrome DevTools з емуляцією
- Надання документації та доступів
Як замовити розробку мобільної версії?
Терміни: від 3 тижнів для адаптації готового шаблону до 3–4 місяців при розробці мобільного шаблону з нуля з переробкою ключових користувацьких сценаріїв. Вартість розраховується індивідуально після аудиту. Оцінимо ваш проєкт за 2 робочі дні — просто напишіть нам. Працюємо під ключ з гарантією. Отримайте консультацію щодо вашого проєкту! Замовте розробку мобільної версії та переконайтеся в результаті.