Мобильная конверсия: как поднять на смартфонах

Десктопная версия сайта продаёт, а мобильная — нет. Знакомая картина: трафик со смартфонов составляет основную долю, а заявок с него заметно меньше, чем должно быть пропорционально. Причина почти всегда не в товаре и не в рекламе, а в том, что мобильный посетитель ведёт себя иначе и сайт нужно строить под него.

01Чем мобильный посетитель отличается от десктопного

Смартфон — это короткие сессии в транспорте, в очереди, в обеденный перерыв. Внимания меньше, времени меньше, экран в 4–6 раз меньше по площади. Пользователь не читает, а сканирует, и принимает решение «остаться или закрыть» в первые секунды.

Из этого вытекают три фактора, которые тянут конверсию вниз:

• Дольше грузится: мобильный интернет нестабильнее Wi-Fi, и каждая лишняя секунда стоит заявок.
• Сложнее заполнить форму: набирать текст на экранной клавиатуре утомительно, особенно одной рукой.
• Меньше доверия к десктопным макетам: текст мелкий, кнопки промахиваются, навигация прячется.

02Скорость загрузки — точка номер один

Если первый экран рендерится дольше 3 секунд, значительная часть посетителей уходит. На мобильном это ощущается острее: пока сайт загружается, человек уже листает мессенджер. Что проверить в первую очередь:

• Размер изображений: WebP вместо JPEG, lazy-load для всего ниже первого экрана, корректные srcset.
• Шрифты: подключайте только нужные начертания, добавляйте font-display:swap.
• Сторонние скрипты: чаты, пиксели, виджеты — каждый прибавляет вес. Отложите загрузку до взаимодействия.

Метрики Core Web Vitals (LCP, INP, CLS) Яндекс и поисковые системы учитывают в ранжировании, но самое главное — их видит ваш покупатель. Подробнее о технической стороне — в материалах раздела «Разработка сайтов».

03Первый экран: что должно быть видно без скролла

На смартфоне в первый экран помещается мало: заголовок, короткий подзаголовок, ключевая кнопка. Не пытайтесь засунуть туда слайдер с пятью офферами, статичные обещания и фотографию офиса.

Минимально жизнеспособный первый экран:

• Что вы делаете — одна строка, понятная без контекста.
• Для кого и в чём польза — короткий подзаголовок.
• Одно главное действие — кнопка с осмысленным текстом (не «отправить», а «получить расчёт»).

04Формы: главная утечка конверсии на мобильном

На смартфоне поля формы — это барьер. Чем больше полей, тем выше шанс, что человек отвалится. Правила, которые работают почти всегда:

• Сократите форму до двух-трёх полей: имя, телефон, иногда суть запроса.
• Используйте правильные типы инпутов: tel для телефона, email для почты — система покажет нужную клавиатуру.
• Подставляйте маски ввода и валидируйте мягко, без алертов на каждый символ.
• Кнопка отправки — на всю ширину, с осмысленным текстом и подтверждением действия.

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

05Кнопки звонка и WhatsApp

На смартфоне у человека под рукой телефон — буквально. Поэтому прямые контактные действия часто конвертируют лучше формы. Что стоит сделать:

• Закреплённая кнопка «Позвонить» в шапке или внизу экрана с тегом tel:.
• Кнопка мессенджера (WhatsApp/Telegram) рядом — для тех, кто не любит говорить голосом.
• Не перегружайте экран: достаточно одной-двух плавающих кнопок, иначе они закроют контент.

06Тапабельность и читаемость

Рекомендованный минимум для тач-цели — около 44×44 пикселя. Если кнопки и ссылки мельче, посетитель промахивается и злится. Что проверить:

• Размер шрифта основного текста — не меньше 16 px, иначе iOS будет зумировать страницу при фокусе на поле.
• Расстояние между кликабельными элементами — хотя бы 8 px.
• Контрастность текста и кнопок — иначе на солнце сайт нечитаем.

07Что мерить и как искать утечки

Сегментируйте отчёты Яндекс.Метрики по типу устройства. Сравнивайте конверсию в заявку, время на странице, глубину просмотра. Смотрите Вебвизор именно мобильных сессий — увидите, где люди тыкают мимо, бросают форму, не находят кнопку. Подробнее о том, как читать данные и где ещё искать рычаги роста, — в статье «Как повысить конверсию сайта» и в услугах раздела «Дизайн и аналитика».

Официальная документация по теме — Справка Яндекс.Вебмастера.