Mobile Site Development for 1C-Bitrix: Performance Optimization

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.

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.

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:

1. Reworked template: critical CSS inline, JS in defer, WebP via BX_USE_WEBP + resize through handler
2. Mobile menu replaced with drawer component using CSS transitions
3. Checkout steps merged into one screen with progress bar (modification of bitrix:sale.order.ajax)
4. Enabled separate composite cache

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.

How to choose the right mobile app technology for your Bitrix project?

Service Worker on Bitrix – a separate adventure. The composite cache (CPagesCache) serves an HTML page from the file cache, while the Service Worker caches resources via the Cache API. Two caching layers that know nothing about each other. If you don't separate their strategies, the user sees an outdated cart after adding an item. We start any PWA project on Bitrix by configuring proper separation: Service Worker handles static assets (CSS, JS, fonts) with Cache First, while HTML and API responses always use Network First with a cache fallback. The Bitrix composite cache operates server-side and does not intersect with the client side.

What mobile app types fit your Bitrix ecosystem?

PWA (Progressive Web App) – a web application that looks like a native app but lives in the browser. No store installation needed — add to home screen. React Native – cross-platform by Meta. JavaScript, one codebase — native iOS and Android app with full device API access. Flutter – cross-platform by Google on Dart. Own Skia rendering engine, stable 60/120 FPS. Bitrix24 mobile app – ready-made corporate solution: CRM, tasks, chat, video calls.

PWA beats native development in launch speed by 3 times, and React Native is 40% cheaper than Flutter in labor costs for a typical online store.

How to implement PWA on Bitrix without cache conflict?

manifest.json – icon, name, display: standalone, theme_color, start_url. The user installs the site on the home screen. Place the file in the root and include via <link rel="manifest"> in header.php of the template.

Service Worker – the core of PWA. Register in footer.php:

• Cache First for static: /bitrix/cache/, CSS, JS, fonts, product images
• Network First for HTML and API (/ajax/, /bitrix/services/). If network unavailable – serve cache
• Stale While Revalidate for catalog — show cached, update in background
• Separate logic for cart: always Network Only, otherwise the user sees phantom items

Key nuance – conflict with Bitrix composite. The composite module caches HTML on the server and serves static files. Service Worker should not intercept these responses for authorized users — otherwise a logged-out user will see the previous cart. Solve by checking the BX_USER_ID cookie in the fetch handler.

Push notifications – Firebase Cloud Messaging or OneSignal. Order status (OnSaleStatusOrder → trigger push), promotions, stock arrival. Save device token in user UF field.

Offline catalog – previously viewed items available without internet. IndexedDB for cards, Cache API for images.

Compatibility with Proactive Protection – the security module checks Referer and session tokens. Service Worker during prefetch may not send required headers — configure exceptions in BX_SECURITY_SESSION_VIRTUAL.

Performance improvement of mobile site after PWA implementation is 60-80% Time to Interactive, and mobile conversion rates increase by 25-35%.

According to Wikipedia, PWA combines the best of web and native apps, and with proper Service Worker strategy it works seamlessly on Bitrix CMS.

React Native for online stores on Bitrix

When PWA is not enough – React Native provides a full native app with a single codebase.

Architecture:

• Backend: Bitrix serves data via REST API. Standard methods catalog.product.list, sale.order.add for catalog and orders. For custom entities – custom controllers via \Bitrix\Main\Engine\Controller
• Intermediate layer: BFF (Backend for Frontend) on Node.js or GraphQL. Aggregate 3-5 requests to Bitrix API into one response for the mobile client – mobile internet doesn't tolerate extra round trips
• Frontend: React Native application

Online store functionality:

• Catalog: search, filters, sorting – data from CIBlockElement::GetList via REST
• Product page: gallery (react-native-fast-image), description, specs, reviews
• Cart and checkout with persistence via AsyncStorage
• Personal account: orders, favorites, profile, addresses
• Push: order status, promotions, abandoned cart – FCM/APNs, triggers on Bitrix events
• Native features: barcode scanner (react-native-camera), geolocation for pickup points, Face ID / Touch ID (react-native-biometrics)
• Offline: catalog and favorites via AsyncStorage / WatermelonDB
• Deep linking: react-navigation deep link → specific product from push or ad

React Native is chosen because:

• React developers already know 80% of the stack
• Ecosystem: thousands of ready packages in npm
• Hot Reload – instant feedback during development
• CodePush by Microsoft – update JS bundle without store publication. Fix a bug in minutes instead of 2-3 days of review

Flutter vs React Native: when to choose Flutter

Alternative to React Native. Choose when you need custom UI with heavy animations.

Strengths:

• Skia engine – 60/120 FPS on complex animations where React Native starts to lag due to bridge
• Pixel-perfect identity on iOS and Android – own rendering, not platform widgets
• Dart: strictly typed, errors at compile time, not in production on user's device
• Material Design and Cupertino widgets out of the box

When Flutter:

• Interface with complex animations and custom screen transitions
• Critical to have identical UI on both platforms
• Plans for web and desktop (Flutter supports all three targets)
• Team knows Dart or is ready to invest

Integration with Bitrix:

• REST API on Bitrix side (similar to React Native)
• dio package for HTTP with interceptors: automatic auth token addition, retry on 5xx
• State: Riverpod or BLoC – depends on scale
• Local storage: Hive for key-value, sqflite for complex offline queries

For non-standard interface, Flutter provides identical behavior on both platforms – saving up to 30% of time on cross-platform bugs.

How to prepare API for mobile app on Bitrix?

A mobile app is only as good as its API.

Design:

• RESTful with versioning (/api/v1/, /api/v2/) – backward compatibility during updates
• JWT + refresh token. Access – 15 minutes, refresh – 30 days. Store refresh in Keychain (iOS) / EncryptedSharedPreferences (Android)
• Cursor pagination (?after=eyJ...) – stable loading without duplicates when adding new items
• Sparse fieldsets: ?fields=id,name,price,image – return only what the screen needs, save traffic

Optimization for mobile networks:

• Aggregated endpoints: one request per screen instead of five. /api/v1/home returns banners, recommendations, promotions, and categories in one response
• Gzip compression – in Bitrix enabled via \Bitrix\Main\Config\Option::set('main', 'use_compression', 'Y')
• ETag / Last-Modified – 304 Not Modified saves traffic and time
• Retry with exponential backoff + offline queue (requests accumulate and send when network restores)
• Images by device size: CFile::ResizeImageGet() with parameters from DPR header

Push notifications:

• FCM (Android) + APNs (iOS)
• Triggers on Bitrix events: OnSaleStatusOrder, OnCatalogStoreProductUpdate, OnSaleBasketSaved
• Segmentation: personalization based on CRM behavior
• Funnel analytics: delivery → open → transition → conversion

What is included in turnkey mobile app development?

• Analysis – current site audit, load testing, bottleneck profiling (SQL queries, caching). Feature requirements gathering
• API design – REST/GraphQL schema design with cursor pagination and sparse fieldsets, integration with 1C via CommerceML, fiscalization (54-FZ, ATOL, OFD)
• PWA implementation – Service Worker setup, manifest, push notifications, offline catalog, testing on real devices
• Native app development – React Native or Flutter: screen layout, API integration, camera, geolocation, deep linking
• Bitrix24 integration – REST OAuth, webhooks, Open Lines, Bizproc, CRM synchronization
• Testing – load testing (k6), regression, cross-platform on iOS/Android, offline scenario testing
• Deployment – publication on App Store / Google Play, CI/CD setup, monitoring (Sentry, Firebase Crashlytics)
• Documentation – API description, architecture, update instructions. Handover of access and source code

Result: working application, documentation, server and store access, client team training.

Why is PWA recommended as the first step?

PWA validates your mobile hypothesis quickly. With 2-3 weeks of work you get a working prototype that users can install on their home screen. If mobile traffic and conversion data confirm demand, we scale up to a native app with full device access. This approach reduces upfront investment and provides real metrics before committing to a 4-6 month native development cycle.

Our team consists of certified 1C-Bitrix developers with over 7 years of experience. During this time, we have completed 20+ mobile projects – from PWA for retail chains to native apps for distributors with CDEK and 1C integration. We guarantee compatibility with current platform and module versions.

Order a preliminary assessment: we will send an architectural plan and timeline within 2 business days. Contact us for a developer consultation on technology choice – fill out the form on the website or call. Get your project started with a clear roadmap.