# Оптимизация мобильного интернет-магазина: Core Web Vitals, оформление заказа и конкретные правки, которые поднимают конверсию

> 70-85% трафика интернет-магазинов приходит с мобильных. Десять конкретных зон (Web Vitals, размер зон касания, автозаполнение форм, Apple Pay, зона большого пальца), которые закрывают разрыв в конверсии между мобильными и десктопом, с реальными инструментами и ориентирами.

Ryan Badger - 1 мая 2025 г. - 8 мин чтения

## Почему мобильная версия решает всё

70-80% трафика вашего интернет-магазина приходит с мобильных. В большинстве потребительских категорий доля доходит до 85%. Конверсия на десктопе обычно в 2-3 раза выше, чем на мобильных, и это говорит не о том, что десктоп лучше, а о том, что в большинстве магазинов мобильная версия просто сломана.

Хорошо оптимизированная мобильная версия способна закрыть этот разрыв, а нередко и перевернуть его: некоторые DTC-бренды сегодня конвертируют на мобильных на уровне десктопа или выше. Разница конкретна, измерима и в основном сводится к аккуратности, а не к изобретательности.

В этой статье разберём, что на самом деле двигает мобильную конверсию: ориентиры, инструменты и конкретные вещи, которые стоит исправить. Не «проектируйте mobile-first», а точные проверки, которые дают накопительный эффект.

## 1. Core Web Vitals и почему за ними следит Google

Google использует Core Web Vitals как фактор ранжирования и как показатель качества пользовательского опыта. Помимо SEO, сами эти метрики хорошо предсказывают конверсию.

### LCP (Largest Contentful Paint)

Время до отрисовки самого крупного элемента в видимой части экрана (обычно главного изображения или H1). Цель: меньше 2,5 секунды на мобильном 4G.

Самые частые причины плохого LCP:

- Главное изображение не сжато или слишком большое
- Загрузка веб-шрифта блокирует отрисовку
- Сторонние скрипты (чат-виджеты, аналитика, инструменты A/B-тестов) в `<head>`

### INP (Interaction to Next Paint)

Время от действия пользователя (касания) до следующего визуального обновления. Цель: меньше 200 мс.

Самые частые причины плохого INP:

- Страницы, перегруженные JavaScript (магазины на React/Vue без разделения кода)
- Скрипты аналитики или чата, которые срабатывают синхронно при взаимодействии
- Задержка касания в старых мобильных браузерах

### CLS (Cumulative Layout Shift)

Элементы, которые прыгают по странице, пока она загружается. Цель: меньше 0,1.

Самые частые причины:

- Изображения без атрибутов width/height
- Реклама или сторонние встраиваемые блоки, которые подгружаются после контента
- Шрифты, которые загружаются и меняют размер текста

### Как проверить

Бесплатно: [PageSpeed Insights](https://pagespeed.web.dev/) запускает Lighthouse и показывает все три метрики. Проверяйте страницу товара, которая приносит больше всего выручки, а не главную. Исправьте красное, смиритесь с жёлтым, двигайтесь дальше.

Платно и глубже: WebPageTest.org для анализа водопада загрузки, вкладка Performance в Chrome DevTools для локального профилирования.

## 2. Скорость на мобильном меньше 3 секунд (настоящий мобильный, а не десктоп с замедлением)

«Мобильный эмулятор» в десктопном браузере использует быстрое соединение и быстрый процессор. Реальные телефоны работают с более медленной сетью и более слабыми процессорами. Разрыв существенный.

Тестируйте на реальных телефонах по 4G. Если страница грузится 2 секунды в мобильном эмуляторе Chrome, то на Android среднего класса по 4G это, скорее всего, 4-5 секунд.

### Главные ускорения (по порядку)

1. **Оптимизация изображений:** сжатие до качества 80%, изменение размера до реально нужного, отдача в WebP или AVIF. Shoprocket делает это автоматически через Cloudflare
2. **Ленивая загрузка контента ниже первого экрана.** Изображения, iframe и тяжёлые скрипты не должны грузиться, пока до них не доскроллили
3. **Отложите некритичный JavaScript.** Аналитика, чат-виджеты и инструменты A/B-тестов не должны блокировать отрисовку
4. **Агрессивно кэшируйте статику.** Кэш на год для изображений, шрифтов, CSS и JS с адресами, содержащими отпечаток версии
5. **Используйте CDN** (Cloudflare, Fastly или встроенный в вашу платформу). Он отдаёт файлы с ближайших к покупателю серверов
6. **Сократите сторонние скрипты.** Каждый пиксель и тег добавляет ~50-200 мс; проверьте, что из этого действительно нужно

## 3. Размер зон касания

Human Interface Guidelines от Apple требуют зоны касания не меньше 44×44 пикселей. Google Material требует 48×48. Большинство «мобильных» версий тем не дотягивают ни до того, ни до другого.

**Что исправить:**

- Кнопки высотой не менее 44px с внутренними отступами 8-12px
- Ссылки в навигации высотой не менее 44px
- Поля форм высотой не менее 44px (это ещё и улучшает доступность)
- Расстояние между соседними зонами касания не менее 8px

Проверка: откройте свой магазин на телефоне. Попробуйте нажать большим пальцем на навигацию по категориям. Промахиваетесь? Это проблема зон касания.

## 4. Особенности мобильного оформления заказа

Корзина и оформление заказа на мобильных - там, где утекает больше всего конверсии. Конкретный список задач:

### Формы в один столбец

Формы в два столбца работают на десктопе и не работают на мобильных. Выстраивайте каждое поле вертикально. Без исключений.

### Правильные типы полей ввода

- Поле email: `type="email"` (открывает клавиатуру для email с символом @)
- Телефон: `type="tel"` (цифровая клавиатура)
- Почтовый индекс: `type="text" inputmode="numeric"` для стран с числовыми индексами
- Номер банковской карты: `type="text" inputmode="numeric" autocomplete="cc-number"` (чтобы работало автозаполнение)

Большинство платформ делают это правильно из коробки. Всё равно откройте форму на телефоне; если появляется не та клавиатура, исправьте.

### Дружелюбность к автозаполнению

Браузеры могут автоматически заполнить имя, адрес, email, телефон и данные карты, если атрибуты `autocomplete` в форме указаны верно. Покупатель, который нажимает на подсказку автозаполнения, оформляет заказ за 3 секунды. Без автозаполнения ему приходится вручную вводить 12 и более полей.

Стандартные значения autocomplete: `name`, `email`, `tel`, `street-address`, `postal-code`, `country`, `cc-number`, `cc-exp`, `cc-csc`, `cc-name`.

### Закреплённая кнопка «В корзину» на страницах товара

Прокрутите мобильную страницу товара на 3 экрана вниз, и кнопка «В корзину» окажется за пределами экрана. Решение: добавьте закреплённую нижнюю панель с ценой и кнопкой «В корзину», которая появляется, когда исходная кнопка уходит из вида.

### Apple Pay + Google Pay + Link

Это самые сильные рычаги мобильного оформления заказа. Оплата одним касанием без ввода данных и встроенная биометрическая аутентификация.

- **Apple Pay:** включается автоматически после подтверждения домена в Stripe (Shoprocket берёт это на себя)
- **Google Pay:** аналогично
- **Stripe Link:** подставляет карту и адрес из межсайтовой идентификации Link

Каждое мобильное оформление заказа без них теряет покупателей. Включите все три.

## 5. Сокращение полей формы

Каждое поле в мобильном оформлении заказа - точка трения. Проведите аудит полей:

**Обычно нужны:**

- Email
- Адрес доставки (имя, улица, город, индекс, страна)
- Платёжные данные (или Apple/Google Pay)

**Часто запрашивают лишнее:**

- Номер телефона (только если он нужен для доставки или службам доставки; многим не нужен)
- Дата рождения (при покупке почти никогда не нужна)
- Название компании (только для B2B)
- Подписка на рассылку (с предустановленной галочкой там, где это законно; иначе отдельный чекбокс)
- "Как вы о нас узнали?" (перенесите в опрос после покупки)

Меньше полей = быстрее оформление = выше доля завершённых заказов. Каждое убранное поле - это примерно 5-10% прироста завершения мобильного оформления, и эффекты накапливаются.

## 6. Читаемый шрифт и длина строки на мобильных

- **Основной текст:** минимум 16px (значение по умолчанию в iOS и рекомендация Google Material)
- **Длина строки:** 45-75 символов
- **Межстрочный интервал:** 1,4-1,6 от размера шрифта
- **Контраст:** минимум WCAG AA (4,5:1 для основного текста, 3:1 для крупного)

Если покупатели увеличивают пальцами описание товара, ваш шрифт слишком мелкий. Если им приходится поворачивать телефон набок, чтобы прочитать, строка слишком длинная или шрифт слишком тесный.

## 7. Управление одной рукой

Большинство людей пользуются телефоном одной рукой, дотягиваясь большим пальцем снизу справа (или снизу слева, если левша). Важные действия должны находиться в этой зоне большого пальца.

- Главный призыв к действию («В корзину», «Оформить заказ», «Купить сейчас») ближе к низу
- Бургер-меню вверху слева или справа, в пределах досягаемости пальца
- Кнопка «Назад» должна вести себя предсказуемо (браузерная «Назад», как правило, лучше самодельных кнопок)

Не заставляйте дважды нажимать на труднодоступные места. Каждая гимнастика для большого пальца стоит вам покупателей.

## 8. Страница товара для мобильных

Десктопные страницы товара часто показывают всё сразу (галерея слева, характеристики справа, описание ниже). Такая раскладка не переносится на мобильные; контент нужно выстроить последовательно.

Эффективная последовательность мобильной страницы товара:

1. Главное изображение (галерея со свайпом)
2. Название + цена
3. Выбор варианта (размер, цвет)
4. «В корзину» (главный призыв к действию)
5. Сигналы доверия (рейтинг, бесплатная доставка, возврат)
6. Описание (сворачиваемое, свёрнуто после 3 строк)
7. Характеристики / детали (сворачиваемые)
8. Краткая сводка отзывов с раскрытием «показать все»
9. Похожие товары
10. FAQ (сворачиваемый)

Контент ниже первого экрана стоит грузить лениво. Мобильный покупатель часто принимает решение о покупке уже в первых трёх блоках; загрузка всего подряд замедляет это решение.

## 9. Тестирование на реальных устройствах

Не в DevTools. Не в мобильном эмуляторе браузера. На реальных телефонах по мобильной сети.

Минимальный набор для проверки:

- iPhone SE (маленький экран, устаревшее устройство)
- iPhone 15 Pro (новейшая iOS, Safari)
- Samsung Galaxy среднего класса (Android, Chrome)
- Старый Android по 4G (вскрывает проблемы с производительностью)

Бонус: попросите трёх друзей с разными телефонами попробовать что-нибудь купить в вашем магазине. Наблюдайте за ними. То, с чем они мучаются, и есть ваш список правок.

## 10. Избегайте паттернов, убивающих мобильную конверсию

Типичные ошибки, которые губят мобильную конверсию:

### Всплывающие окна на весь экран

Окно «Подпишитесь и получите скидку 10%!», закрывающее экран при заходе с мобильного. Google понижает такие сайты в мобильной выдаче. Покупатели натыкаются на него и уходят. Используйте встроенные формы подписки.

### Автовоспроизведение видео со звуком

Тратит трафик, раздражает пользователей, а iOS часто блокирует его и так. Автовоспроизведение без звука допустимо для видео в шапке; автовоспроизведение со звуком враждебно к пользователю.

### Состояния при наведении на сенсорных экранах

"Наведите, чтобы увидеть детали" не работает на сенсорных экранах. Если в вашей теме на мобильных всё ещё есть паттерны с раскрытием при наведении, они фактически сломаны.

### Крошечные кнопки «закрыть» в модальных окнах

Крестик в 16 пикселей в углу невозможно нажать большим пальцем. Делайте кнопки закрытия 44×44 или используйте кнопки «Закрыть» во всю ширину внизу модального окна.

### Горизонтальная прокрутка в сетках товаров

На мобильных горизонтальные карусели товаров прячут 80% товаров за пределами экрана. Вертикальная сетка (2 столбца на мобильных) конвертирует лучше.

## Что Shoprocket берёт на себя для мобильных

Большинство обязательного минимума работает из коробки:

- **Автоматическая оптимизация изображений:** изменение размера, сжатие, WebP и ленивая загрузка для каждого изображения товара
- **Выдвижная корзина (а не корзина на отдельной странице)** по умолчанию на мобильных
- **Закреплённая мобильная кнопка «В корзину»** поддерживается в магазинах на темах
- **Адаптивное оформление заказа** с правильными типами полей, автозаполнением и вертикальной раскладкой
- **Apple Pay + Google Pay + Stripe Link**: оплата одним касанием через Stripe
- **Адаптивный виджет живого чата**
- **Раздача через CDN** Cloudflare для всех файлов
- **Core Web Vitals оптимизированы из коробки** для размещённого на Shoprocket магазина

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Если вы встраиваете виджет: скорость и дизайн окружающей страницы под вашим контролем. Виджет Shoprocket загружается лениво и не блокирует отрисовку вашей страницы, но общая скорость страницы остаётся на вас.

> **Совет:** раз в квартал прогоняйте через PageSpeed Insights три самые прибыльные страницы товаров в мобильной версии. Запишите три показателя Core Web Vitals. В следующем квартале сравните. Ухудшение - тихий убийца конверсии; ловите его раз в квартал, а не после того, как ущерб уже нанесён.

## Коротко

- **Мобильные - это 70-85% трафика.** Большинство магазинов относится к ним как к второстепенной задаче; не повторяйте это
- **Три метрики Core Web Vitals, за которыми нужно следить:** LCP, INP, CLS. Меньше 2,5 с / 200 мс / 0,1
- **Тестируйте на реальных устройствах по 4G,** а не в эмуляторе браузера
- **Оформление заказа:** формы в один столбец, правильные типы полей, автозаполнение, Apple/Google Pay, закреплённые кнопки действий
- **Меньше полей формы** = выше доля завершённых заказов. Проверьте, что действительно нужно
- **Зоны касания минимум 44×44.** Расстояние между ними минимум 8px
- **Зона большого пальца важна.** Главные кнопки ближе к низу; бургер-меню вверху слева или справа
- **Избегайте убийц мобильной конверсии:** экранных всплывающих окон, автозвука, состояний при наведении, крошечных кнопок закрытия

[Начните бесплатный пробный период](https://app-v3.shoprocket.io/signup) и получите автоматическую оптимизацию изображений, Apple Pay и мобильное оформление заказа с первого дня. 14 дней, без карты.

---

- HTML version: https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion
- Language: Русский (ru)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)