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