Мобильная версия сайта: почему без неё нет трафика и заявок

Сайт почти всегда принимают на большом мониторе: в переговорной, на ноутбуке руководителя, в презентации подрядчика. А клиенты открывают его по-другому — с телефона, одной рукой, в транспорте, по нестабильному мобильному интернету, между двумя другими делами. Если мобильная версия сделана «по остаточному принципу», бизнес теряет дважды: поисковые системы показывают сайт ниже, а те, кто всё-таки пришёл, уходят, не дойдя до заявки. Разберём, почему поиск оценивает сайт именно по телефону, какие ошибки встречаются чаще всего, как проверить свой сайт без программиста за полчаса и что делать, если проверка показала проблемы.

Начните со своих цифр, а не с чужих

Доля мобильного трафика сильно зависит от ниши, региона и каналов привлечения, поэтому любые «средние по рынку» проценты мало что скажут о вашем бизнесе. Свою цифру можно узнать за пару минут. В Яндекс Метрике откройте отчёт «Технологии → Устройства» и посмотрите не только долю визитов с телефонов, но и показатели в разрезе устройств:

• Доля визитов со смартфонов — сколько людей вы вообще можете потерять из-за плохой мобильной версии.
• Отказы и глубина просмотра на смартфонах в сравнении с компьютерами. Сильный разрыв не в пользу телефонов — первый признак проблемы.
• Конверсия в цели по устройствам: заявки, звонки, клики по мессенджерам. Если с телефонов приходит много людей, а заявок от них мало, мобильная версия теряет деньги.
• Источники мобильного трафика: реклама, поиск, соцсети. Трафик из рекламы — оплаченный, и потери на нём самые болезненные.

Почему поиск смотрит на сайт глазами телефона

Google индексирует сайты по мобильной версии: то, что видит робот, представившийся смартфоном, и есть содержимое страницы для поиска. Яндекс ещё с 2016 года учитывает, насколько страница удобна на мобильных устройствах, при ранжировании в мобильной выдаче. Практический вывод простой: мобильная версия — не уменьшенная копия сайта, а основная. Если на телефоне что-то скрыто или отсутствует, для поиска этого может не существовать.

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

Адаптивная вёрстка или отдельная мобильная версия

• Адаптивная вёрстка — один адрес, одно содержимое, которое перестраивается под ширину экрана. Поддерживать один сайт, контент всегда совпадает, поисковики рекомендуют именно этот вариант. Для подавляющего большинства бизнес-сайтов — правильный выбор.
• Отдельная версия на поддомене вида m.site.ru — два набора страниц, которые нужно синхронизировать, связывать специальной разметкой и правильно перенаправлять пользователя в зависимости от устройства. Каждая из этих точек регулярно ломается: телефон открывает десктопную страницу, контент на двух версиях расходится, перенаправление ведёт на главную вместо нужной страницы.
• Динамическая выдача — один адрес, но сервер отдаёт разный код телефону и компьютеру. Усложняет поддержку и кэширование, оправдана в редких случаях.
• Если у вас до сих пор работает отдельная мобильная версия, переход на адаптивную вёрстку — это переезд с перенаправлениями, и проводить его нужно так же аккуратно, как редизайн.

Ошибки, которые убивают заявки с телефона

• Горизонтальная прокрутка. Широкая таблица, картинка или блок выходит за край экрана, страница начинает «ездить» вбок. Выглядит как сломанный сайт.
• Мелкие кнопки и ссылки вплотную друг к другу. Палец попадает не туда, человек раздражается и уходит.
• Форма с неправильными полями: для телефона открывается буквенная клавиатура, для e-mail нет символа @, автозаполнение отключено, а обязательных полей больше, чем нужно для первого контакта.
• Кнопка отправки, закрытая липкой плашкой с cookie, чатом или нижним меню.
• Всплывающее окно на весь экран сразу после захода, которое трудно закрыть, — с телефона крестик часто мельче ногтя.
• Телефон и адрес, на которые нельзя нажать. Номер должен открывать звонок, адрес — карту.
• Карта или слайдер, которые перехватывают прокрутку: человек листает страницу, а двигается карта.
• Мелкий шрифт и слабый контраст: серый текст на светлом фоне на улице не читается совсем.
• Первый экран, полностью занятый фотографией или видео: чтобы понять, что предлагают, нужно пролистать.

Скорость на телефоне — отдельная проверка

Телефон клиента почти всегда слабее рабочего компьютера, а мобильная сеть — медленнее офисной. Поэтому сайт, который «нормально грузится» в офисе, может показывать на мобильных совсем другие цифры. Смотрите полевые данные Core Web Vitals отдельно для мобильных в Google Search Console или PageSpeed Insights. Что означают показатели и как их исправлять, мы разобрали в статье Core Web Vitals: что это такое и как их починить. Не забывайте, что скорость влияет и на позиции, и на то, дождётся ли посетитель первого экрана.

Проверка за 30 минут без программиста

• Возьмите свой телефон, отключите Wi-Fi и откройте сайт через поиск — так, как это сделает клиент. Засеките, через сколько вы поняли, что здесь предлагают.
• Пройдите путь клиента целиком: найдите услугу или товар, узнайте цену, оставьте заявку или оформите заказ. Не «посмотрите», а именно доведите до конца.
• Попробуйте позвонить по номеру из шапки и открыть адрес на карте одним нажатием.
• Поверните телефон горизонтально и обратно: не ломается ли вёрстка.
• Попросите коллегу с другим телефоном — старым Android или iPhone с маленьким экраном — повторить то же самое.
• На компьютере откройте сайт в Chrome, включите режим устройства в инструментах разработчика и поставьте ширину 360 пикселей. Пролистайте ключевые страницы: нет ли прокрутки вбок и наезжающих элементов.
• Сравните в Метрике конверсию по устройствам до и после исправлений — это главный показатель результата.

Что исправлять первым

Если проверка нашла много проблем, не пытайтесь чинить всё сразу. Разумный порядок:

• Всё, что мешает оставить заявку: формы, кнопки, телефон, перекрывающие элементы. Это быстрые исправления с прямым эффектом на деньги.
• Страницы, куда идёт платный трафик и откуда приходит больше всего заявок из поиска.
• Скрытое на мобильных содержимое — чтобы поиск видел то же, что на компьютере.
• Скорость первого экрана на телефоне.
• Всё остальное: шрифты, отступы, второстепенные блоки — по мере возможности.

Форма заявки на телефоне: разбор по деталям

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

• Количество полей. Для первого контакта обычно достаточно имени и телефона. Каждое лишнее поле на телефоне ощущается тяжелее, чем на компьютере.
• Тип клавиатуры. Поле телефона должно открывать цифровую клавиатуру, поле почты — клавиатуру с символом @. Это одна настройка в коде, но многие сайты её пропускают.
• Маска ввода. Если форма требует номер в строго определённом формате и не принимает его с пробелами или с восьмёркой в начале, часть людей не сможет отправить заявку.
• Автозаполнение. Телефон умеет подставлять имя и номер владельца — не мешайте ему.
• Понятные ошибки. Сообщение «Неверный формат» без указания поля на маленьком экране почти не заметно. Ошибка должна появляться рядом с полем и объяснять, что исправить.
• Подтверждение. После отправки человек должен увидеть, что заявка принята и что будет дальше. Иначе он нажмёт ещё раз или уйдёт с ощущением, что ничего не сработало.
• Альтернатива. Кнопки звонка и мессенджера рядом с формой — для тех, кому проще написать, чем заполнять поля.

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

Это не реальный кейс, а схема, по которой можно посчитать свои потери. Допустим, по Метрике со смартфонов на сайт приходит 2 000 визитов в месяц, а конверсия в заявку на телефонах вдвое ниже, чем на компьютерах. Если после исправления формы и первого экрана мобильная конверсия подтянется хотя бы до середины разрыва, вы получите дополнительные заявки ровно от того же трафика — без увеличения рекламного бюджета. Умножьте число таких заявок на конверсию в продажу и средний чек, и станет понятно, сколько разумно потратить на доработку мобильной версии и как быстро она окупится.

Особые места интернет-магазина и сайта услуг

У магазина и у сайта услуг на телефоне разные узкие места, и проверять их стоит отдельно.

• Каталог: фильтры должны открываться в отдельной панели и применяться без перезагрузки всей страницы, а выбранные значения — оставаться видимыми. Фильтр, который после каждого выбора возвращает в начало списка, на телефоне превращается в мучение.
• Карточка товара: фото, цена, наличие и кнопка покупки — на первом экране или сразу под ним. Характеристики и отзывы — ниже, но в коде страницы, а не по запросу.
• Корзина и оформление: возможность купить без регистрации, минимум шагов, понятная итоговая сумма с доставкой до последнего шага.
• Сайт услуг: цена или хотя бы диапазон «от» видны без долгой прокрутки, есть кнопка звонка и мессенджера, которая всегда под рукой.
• Онлайн-запись: выбор даты и времени крупными элементами, без мелкого календаря, в который невозможно попасть пальцем.

Мобильная версия и приложение — разные задачи

Иногда на плохие показатели с телефонов отвечают предложением сделать мобильное приложение. Это смешение задач. Приложение устанавливают люди, которые уже знают вас и возвращаются регулярно. Новые клиенты из поиска и рекламы придут на сайт — и если он неудобен на телефоне, до установки приложения дело не дойдёт. Когда приложение действительно оправдано, а когда достаточно хорошего сайта, разобрано в статье приложение или мобильная версия сайта.

Доработать или переделать

Если сайт в целом свежий и проблемы точечные — неудобная форма, мелкие кнопки, скрытый текст, тяжёлые картинки, — достаточно доработки. Если же сайт изначально делался под широкий экран, мобильная версия собрана поверх него «как получилось», а каждая правка ломает что-то в другом месте, дешевле в итоге переделать вёрстку на адаптивную с нуля. Этот выбор лучше делать по результатам короткого технического аудита — что в него входит, описано в чек-листе технического аудита.

Как не сломать мобильную версию снова

• Принимайте каждую новую страницу и доработку сначала на телефоне, потом на компьютере.
• Добавляйте в техническое задание требование: нет горизонтальной прокрутки на ширине 360 пикселей, кнопки достаточного размера, основной текст не мельче 16 пикселей.
• Не добавляйте всплывающие окна и виджеты без проверки на телефоне — особенно с рекламных посадок.
• Раз в месяц смотрите в Метрике конверсию по устройствам: просадка на смартфонах — сигнал, что что-то сломалось.
• Загружайте изображения через админку, которая сжимает их под размер экрана.

Вывод

Мобильная версия — не дополнительная опция, а основной сайт: по ней оценивают страницы поисковики, и через неё к вам приходит значительная часть клиентов. Начните с собственных данных Метрики и с простого теста — попробуйте оформить заявку на своём сайте с телефона, стоя на улице. Если это неудобно вам, клиентам тоже. Если проблемы оказались глубже точечных правок, адаптивная вёрстка и скорость на мобильных входят у нас в базовый результат разработки сайта.