Разработка мобильной версии сайта на 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 месяцев при разработке мобильного шаблона с нуля с переработкой ключевых пользовательских сценариев.