Low PageSpeed Insights scores on mobile (38) while desktop is high (91) — a familiar pain for owners of sites on 1C-Bitrix. The mobile version degrades due to several combined reasons: the template is not adapted, components load all JavaScript regardless of device, images are served without WebP and srcset, and Time to First Byte (TTFB) is consumed by heavy server-side rendering. Developing a mobile version of a site on 1C-Bitrix is a complex of solutions at the template, component, and server levels. We guarantee results thanks to certified Bitrix experience — over 10 years and 50+ successful projects.
Main Causes of Mobile Performance Degradation on 1C-Bitrix
Performance of the mobile template is the most labor-intensive part. Typical problems and their solutions:
Images. Bitrix can deliver WebP via the main module (BX_USE_WEBP setting), but this must be explicitly enabled and configured. The srcset attribute for responsive images is not generated by default in components — you need to modify the component template or use CFile::ResizeImageGet() with multiple sizes. Traffic savings up to 40%.
JavaScript. Standard Bitrix components pull jquery, main.core, main.popup — totaling 400–600KB gzipped. For mobile, First Contentful Paint is critical, so scripts not needed on initial load (sliders, widgets) are moved to defer/async or loaded via IntersectionObserver. JS size reduction up to 50%.
Fonts. font-display: swap in CSS, preload critical typefaces via <link rel="preload">.
Critical CSS. Inline styles for above-the-fold content, the rest async. Implemented by modifying the header.php template.
Comparison of Adaptive vs Separate Templates for Mobile Version on 1C-Bitrix
Bitrix offers two approaches: a single adaptive template (responsive) or a separate mobile template switched via $APPLICATION->SetPageProperty("kernel_theme", "mobile") or the mobileapp module.
| Parameter | Adaptive Template | Separate Template |
|---|---|---|
| Development complexity | Low | High |
| Performance | Higher (single HTML) | Lower (two templates) |
| Maintenance time | Half as much | More |
| Mobile UX | Good with optimization | Maximum |
Adaptive template is the de facto standard. One HTML, CSS with breakpoints, JavaScript without logic duplication. The problem: "responsiveness" at the CSS level does not solve performance — a heavy slider still loads even if hidden on mobile via display: none. Adaptive template is developed 2–3 times faster and requires less maintenance.
Separate template is justified when mobile and desktop user journeys are fundamentally different — for example, a mobile app on top of Bitrix via REST API, or when rewriting a legacy template is not feasible. Technical implementation: bitrix/templates/mobile/ with device detection via CBitrixComponent::includeComponent() and $_SERVER['HTTP_USER_AGENT'] or JS detection with redirect.
Composite Cache for Mobile on 1C-Bitrix
The composite module in Bitrix supports separate caching for desktop and mobile (parameter bx_composite_separate_cache). This is important: mobile and desktop page versions differ in markup, so they cannot be cached in the same container. Enable it in the "Composite Site" module settings: check "Separate cache for mobile devices." After that, composite will create separate HTML files for each device type. In practice, this gives a TTFB increase of up to 30%.
Touch Navigation and UX Specifics
The mobile version requires separate navigation treatment: burger menu, bottom navigation bar, gestures (swipe for sliders). In the context of Bitrix, this means modifying templates of bitrix:menu components and creating a separate navigation component. Product cards in the catalog on mobile often require simplified layout: large click zones, an "Add to cart" button without extra steps, quick view via bottom sheet instead of modal window.
How Mobile Version Development on 1C-Bitrix Solves Performance Problems?
We don't just "make it responsive." We rethink the frontend architecture: disable unnecessary modules, rewrite components for asynchronous loading, use tagged caching. Google PageSpeed Insights records an average increase of 40–50 points after implementation. In one project, TTFB improved by 30% thanks to separate composite cache and moving heavy JS to defer. Results confirmed by Google PageSpeed Insights. Traffic savings and faster loading directly boost conversion.
Example audit checklist
- Check if `BX_USE_WEBP` is enabled - Presence of `srcset` for catalog images - Number of synchronous JS scripts in `` - Is separate cache for mobile enabled? - Is `font-display: swap` used?Implementation Results: Real Case
Our client — a home appliance retail chain with ~12,000 SKUs. Mobile traffic — 68% of total, mobile conversion 2.8x lower than desktop. PageSpeed Mobile — 31.
Audit revealed:
- Template was built before current standards, responsiveness only via CSS
display: none - 14 JavaScript files totaling 1.1MB, all loaded synchronously in
<head> - Images only JPEG 1200px, without
srcset, without WebP - Checkout form — 4 steps, each a separate page with full reload
Implemented solutions:
- Reworked template: critical CSS inline, JS in defer, WebP via
BX_USE_WEBP+ resize through handler - Mobile menu replaced with drawer component using CSS transitions
- Checkout steps merged into one screen with progress bar (modification of
bitrix:sale.order.ajax) - Enabled separate composite cache
| Metric | Before | After |
|---|---|---|
| PageSpeed Mobile | 31 | 74 |
| Mobile conversion | 2.8x lower | +40% in 2 months |
| Load time | ~5 sec | ~2 sec |
What the Work Includes
- Current state audit: PageSpeed, WebPageTest, critical rendering path analysis
- Adaptation or development of a 1C-Bitrix mobile template
- Image optimization: WebP, srcset, lazy loading
- JS/CSS load optimization: defer, async, code splitting
- Composite cache setup with separate storage for mobile
- Component template modifications for mobile UX
- Testing on real devices and in Chrome DevTools with emulation
- Documentation and access provision
How to Order Mobile Version Development?
Timeline: from 3 weeks for adapting an existing template to 3–4 months for developing a mobile template from scratch with key user scenario overhauls. Cost is calculated individually after audit. We estimate your project within 2 working days — just drop us a message. We work turnkey with a guarantee. Get a consultation on your project! Order mobile version development and see the results.