Mobile Version Development for 1C-Bitrix
When PageSpeed Insights shows 38 points on mobile versus 91 on desktop, that is not a question of "adding media queries." A Bitrix mobile site degrades for several reasons simultaneously: the template is not adapted, components load all JavaScript regardless of device, images are served without WebP and without srcset, and time to first byte (TTFB) is consumed by server-side rendering of heavy pages. Developing a mobile version is a comprehensive solution spanning the template, components, and server-side layers.
Responsive Template vs. Separate Mobile Version
Bitrix offers two approaches: a single responsive template and a separate template for mobile devices, switched via $APPLICATION->SetPageProperty("kernel_theme", "mobile") or through the mobileapp module.
A responsive template is the de facto standard. One HTML, CSS with breakpoints, JavaScript without duplicated logic. The problem is that CSS-level "responsiveness" does not solve performance: a heavy slider is still loaded even if it is hidden on mobile via display: none.
A separate template is justified when the mobile and desktop user paths are fundamentally different — for example, a mobile application built on top of Bitrix via REST API, or when refactoring a legacy template is not feasible. Technical implementation: bitrix/templates/mobile/ with device detection via CBitrixComponent::includeComponent() and $_SERVER['HTTP_USER_AGENT'], or JS-based detection with redirect.
Mobile Template Performance
This is the most labor-intensive part. Typical issues and their solutions:
Images. Bitrix can serve WebP via the main module (the BX_USE_WEBP setting), but it must be explicitly enabled and configured. The srcset attribute for responsive images is not generated by default in components — the component template needs to be customized, or CFile::ResizeImageGet() must be called with multiple sizes.
JavaScript. Standard Bitrix components pull in jquery, main.core, main.popup — totaling 400–600KB gzip. For mobile, First Contentful Paint is critical, so scripts not needed on first load (sliders, widgets) are moved to defer/async or loaded via IntersectionObserver.
Fonts. font-display: swap in CSS, preloading critical font faces via <link rel="preload">.
Critical CSS. Inline styles for above-the-fold content, the rest loaded asynchronously. Implemented by customizing the header.php template.
Composite Cache for Mobile
The Bitrix composite module supports separate caching for desktop and mobile (the bx_composite_separate_cache parameter). This is essential: mobile and desktop page versions differ in markup, so they cannot be stored in the same cache container.
Touch Navigation and Mobile UX
The mobile version requires dedicated attention to navigation: burger menus, bottom navigation bars, gestures (swipe for sliders). In the Bitrix context, this means customizing bitrix:menu component templates and creating separate navigation components. Product cards in the catalog often need simplified markup on mobile: large tap targets, an "Add to Cart" button with minimal steps, and quick preview via a bottom sheet instead of a modal.
Case Study: Mobile Version for a Regional Retailer
A home appliance retail chain, ~12,000 SKUs. Mobile traffic accounted for 68% of total, mobile conversion was 2.8× lower than desktop. PageSpeed Mobile — 31.
The audit revealed:
- The template was designed in 2019 with responsiveness handled only via CSS
display: none - 14 JavaScript files totaling 1.1MB, all loaded synchronously in
<head> - Images were JPEG 1200px only, no
srcset, no WebP - The checkout form was 4 steps, each a separate page with a full reload
What was implemented:
- Redesigned the template: critical CSS inline, JS deferred, WebP via
BX_USE_WEBP+ resizing through a handler - Replaced the mobile menu with a drawer component animated via CSS transitions
- Consolidated the checkout into a single screen with a progress bar (customization of
bitrix:sale.order.ajax) - Enabled separate composite caching
PageSpeed Mobile rose to 74, mobile conversion increased by 40% in the first two months after launch.
Scope of Work
- Current state audit: PageSpeed, WebPageTest, critical rendering path analysis
- Adaptation or development of a Bitrix mobile template
- Image optimization: WebP, srcset, lazy loading
- JS/CSS loading optimization: defer, async, code splitting
- Composite cache configuration with separate storage for mobile
- Component template customization for mobile UX
- Testing on real devices and in Chrome DevTools with emulation
Timelines: from 3 weeks for adapting an existing template to 3–4 months for building a mobile template from scratch with a redesigned key user flows.