Розробка мобільної версії сайту на 1С-Бітрікс
Коли PageSpeed Insights показує 38 балів на мобільних при 91 на десктопі — це не питання «додати media-queries». Мобільна версія на Бітрікс деградує одночасно з кількох причин: шаблон не адаптований, компоненти завантажують весь JavaScript незалежно від пристрою, зображення видаються без WebP і без атрибута srcset, а час до першого байта (TTFB) з'їдається серверним рендерингом важких сторінок. Розробка мобільної версії — це комплекс рішень на рівні шаблону, компонентів і серверної частини.
Адаптивний шаблон vs. окрема мобільна версія
У Бітрікс є два підходи: єдиний адаптивний шаблон (responsive) та окремий шаблон для мобільних пристроїв, що перемикається через $APPLICATION->SetPageProperty("kernel_theme", "mobile") або через модуль mobileapp.
Адаптивний шаблон — стандарт де-факто. Один HTML, CSS з breakpoints, JavaScript без дублювання логіки. Проблема в тому, що «адаптивність» на рівні CSS не вирішує задачу продуктивності: важкий слайдер однаково завантажується, навіть якщо на мобільному він прихований через display: none.
Окремий шаблон виправданий у випадках, коли мобільний і десктопний шляхи користувача принципово різні — наприклад, мобільний застосунок поверх Бітрікс через REST API або коли переробляти легасі-шаблон недоцільно. Технічна реалізація: bitrix/templates/mobile/ з детектом пристрою через CBitrixComponent::includeComponent() і $_SERVER['HTTP_USER_AGENT'] або JS-детект з редиректом.
Продуктивність мобільного шаблону
Це найбільш трудомістка частина. Типовий набір проблем та їх рішення:
Зображення. Бітрікс вміє видавати WebP через модуль main (налаштування BX_USE_WEBP), але це потрібно явно увімкнути та налаштувати. Атрибут srcset для адаптивних зображень у компонентах за замовчуванням не генерується — потрібна доробка шаблону компонента або використання функції CFile::ResizeImageGet() з кількома розмірами.
JavaScript. Стандартні компоненти Бітрікс тягнуть jquery, main.core, main.popup — сумарно 400–600KB gzip. Для мобільних критичний First Contentful Paint, тому скрипти, непотрібні при першому завантаженні (слайдери, віджети), переносяться в defer/async або завантажуються по IntersectionObserver.
Шрифти. font-display: swap у CSS, попереднє завантаження критичних накреслень через <link rel="preload">.
Критичний CSS. Inline-стилі для above-the-fold контенту, решта — асинхронно. Реалізується через доробку шаблону header.php.
Композитний кеш для мобільних
Модуль composite у Бітрікс підтримує роздільне кешування для десктоп і мобайл (параметр bx_composite_separate_cache). Це важливо: мобільна та десктопна версії сторінки відрізняються розміткою, кешувати їх в один контейнер не можна.
Touch-навігація та UX-специфіка
Мобільна версія потребує окремого опрацювання навігації: бургер-меню, bottom navigation bar, жести (swipe для слайдерів). У контексті Бітрікс це означає доробку шаблонів компонентів bitrix:menu і створення окремого компонента навігації. Картки товарів у каталозі на мобільному часто потребують спрощеної верстки: великі зони кліку, кнопка «До кошика» без зайвих кроків, швидкий перегляд через bottom sheet замість модального вікна.
Кейс: мобільна версія для регіонального рітейлера
Мережа магазинів побутової техніки, ~12 000 SKU. Мобільний трафік — 68% від загального, конверсія на мобільних — у 2.8 рази нижча, ніж на десктопі. PageSpeed Mobile — 31.
Аудит виявив:
- Шаблон верстався у 2019 році, адаптивність — лише через 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 виріс до 74, конверсія на мобільних — на 40% за перші два місяці після запуску.
Склад робіт
- Аудит поточного стану: PageSpeed, WebPageTest, аналіз критичного шляху рендерингу
- Адаптація або розробка мобільного шаблону Бітрікс
- Оптимізація зображень: WebP, srcset, lazy loading
- Оптимізація завантаження JS/CSS: defer, async, code splitting
- Налаштування композитного кешу з роздільним зберіганням для мобільних
- Доробка шаблонів компонентів для mobile UX
- Тестування на реальних пристроях та в Chrome DevTools з емуляцією
Строки: від 3 тижнів для адаптації готового шаблону до 3–4 місяців при розробці мобільного шаблону з нуля з переробкою ключових користувацьких сценаріїв.