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

Почему мобильная версия решает судьбу заявок

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

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

Как понять, что проблема в мобильной версии, а не в рекламе:

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

Если сайт вообще не приносит заявок, причина может быть шире — мы разбирали все варианты в статье почему сайт не приносит заявки.

Чек-лист: проверка со своего телефона за 10 минут

Возьмите свой телефон. Лучше — ещё и телефон кого-то из близких с другой системой: iPhone и Android показывают сайты по-разному. Выключите Wi-Fi и проверяйте через мобильный интернет.

1. Откройте сайт из поиска, а не по закладке: введите в Яндексе название компании или главную услугу. Засеките, через сколько секунд вы увидели текст и кнопку. Если смотрите на белый экран дольше 3–4 секунд — это проблема (подробнее о том, как измерить точно, — в отдельной статье про скорость загрузки сайта).
2. Прочитайте первый экран. Понятно ли без прокрутки, что это за компания, какая услуга, в каком городе и что сделать дальше?
3. Нажмите на телефон. Должен открыться набор номера с уже вписанным номером. Если ничего не произошло или телефон — картинка, клиент не будет переписывать его вручную.
4. Нажмите на мессенджер. Должно открыться приложение с вашим чатом, а не страница «скачайте приложение» и не чужой профиль.
5. Найдите цену. Сколько прокруток и нажатий до неё? Открывается ли таблица цен целиком или уезжает за край экрана?
6. Заполните форму. Открывается ли цифровая клавиатура для телефона? Не закрывает ли клавиатура кнопку «Отправить»? Не прыгает ли масштаб при нажатии на поле?
7. Отправьте заявку. Появилось ли подтверждение? Пришла ли заявка вам на почту или в CRM? Проверьте реально — мы регулярно находим формы, которые «отправляются» в никуда.
8. Закройте всплывающие окна. Сколько их было? Легко ли попасть в крестик? Не появилось ли новое окно через 10 секунд?
9. Поверните телефон горизонтально и проверьте, не разваливается ли страница. Затем прокрутите вбок: если страница сдвигается в сторону, где-то есть элемент шире экрана.
10. Пролистайте до конца главную и одну страницу услуги. Нет ли наложенных друг на друга блоков, обрезанных фото, текста мелким шрифтом.

Все пункты, где вы засомневались, выпишите. Это и есть список задач — дальше расставим приоритеты.

Типичные ошибки, которые убивают заявки

Таблица собрана по тому, что мы чаще всего находим при разборе мобильных версий сайтов малого бизнеса.

Про размер кнопок есть понятный ориентир. Руководство web.dev об областях нажатия рекомендует делать их около 48 пикселей и разносить соседние элементы примерно на 8 пикселей — это приблизительно размер подушечки пальца.

Всплывающие окна: где граница

Всплывающие окна — отдельная тема, потому что на телефоне они в разы навязчивее, чем на компьютере. Окно, которое на мониторе занимает угол, на смартфоне закрывает всё.

Google в руководстве о навязчивых межстраничных окнах прямо называет проблемой элементы, которые закрывают контент, и советует вместо них использовать баннеры, занимающие небольшую часть экрана. Исключение — обязательные по закону окна, например согласие на cookie или подтверждение возраста.

Как сделать окно, которое не мешает:

• Не показывать сразу. Окно, которое появилось раньше, чем человек прочитал заголовок, закрывают не глядя.
• Показывать по действию. Например, после прокрутки до раздела цен или при попытке уйти со страницы — это лучше работает на компьютере, на телефоне аналогом служит долгая неактивность.
• Один раз за визит. Если человек закрыл окно, не показывайте его снова при переходе на другую страницу.
• Крупный крестик. Если закрыть окно сложно, человек закроет сайт.
• Плашка вместо окна. Узкая полоса внизу экрана с предложением и кнопкой работает мягче и не перекрывает текст.

Баннер о cookie тоже считается: если он занимает треть экрана и не закрывается, это такая же помеха.

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

Как проверить мобильность в Яндекс Вебмастере

Ручная проверка показывает удобство. Яндекс отдельно проверяет техническую пригодность страниц для мобильных — это влияет на то, как сайт воспринимает поиск.

Что требует Яндекс по рекомендациям для мобильных сайтов:

• метатег viewport с width=device-width, initial-scale=1 — без него телефон показывает сайт как уменьшенную копию компьютерной версии;
• страницы открываются корректно и без горизонтальной прокрутки на устройствах с разрешением от 320 пикселей;
• текст читается без увеличения;
• нет Flash, Silverlight и Applet — они не работают на телефонах;
• страницы отвечают кодом 200 OK.

Где проверить:

1. «Инструменты» → «Проверка мобильных страниц» — вводите адрес конкретной страницы и смотрите, оптимизирована ли она и как её видит робот.
2. «Оптимизация сайта» → «Диагностика сайта» — если там есть сообщение «Сайт не оптимизирован для мобильных устройств», после исправлений нажмите «Проверить». Полная перепроверка, по справке, может занять до двух недель.

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

А что с Google? Его тест на оптимизацию для мобильных и отчёт об удобстве для мобильных отключены 1 декабря 2023 года. Вместо них Google предлагает Lighthouse — встроенный в Chrome инструмент аудита — и PageSpeed Insights. Если вам до сих пор пересылают ссылку на «Mobile-Friendly Test», это старая инструкция.

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

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

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

Что исправить в первую очередь

Не нужно чинить всё сразу. Порядок по влиянию на заявки:

1. Связь. Ссылка tel: на номере, рабочая ссылка на мессенджер, форма, которая реально отправляется и приходит вам. Это часы работы, а потеря от ошибки — каждая несостоявшаяся заявка.
2. Форма. Два-три поля, цифровая клавиатура для телефона, кнопка не перекрыта виджетами, понятное подтверждение после отправки.
3. Первый экран. Что за услуга, где, сколько примерно стоит и одна главная кнопка — без прокрутки.
4. Всплывающие окна. Убрать окна на весь экран в первые секунды, оставить одно мягкое предложение.
5. Технические ошибки Вебмастера. viewport, горизонтальная прокрутка, мелкий текст.
6. Скорость. Тяжёлые фото и видео на первом экране — частая причина медленной загрузки на мобильном интернете.
7. Всё остальное: выравнивания, отступы, анимации.

Пример: сколько стоит одна ошибка

Условный пример, не кейс студии. Студия натяжных потолков в Самаре, 1 500 визитов в месяц из рекламы, 70% — со смартфонов, то есть 1 050 мобильных визитов. На компьютерах сайт конвертирует 4%, на смартфонах — 1,5%.

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

Если проверка выявила много проблем и непонятно, с чего начать, оставьте контакты — посмотрим мобильную версию и скажем, что исправить первым.