Проверить мобильную версию сайта можно в три шага: автоматические сервисы (Яндекс Вебмастер, PageSpeed Insights) покажут технические проблемы и скорость, режим разработчика в браузере — вёрстку на разных экранах, а тест на реальных телефонах — удобство. Только комбинация всех трёх способов даёт полную картину.
Почему мобильная версия так важна
Для большинства сайтов малого и среднего бизнеса значительная часть посетителей приходит со смартфонов — это легко проверить в Яндекс Метрике в отчёте «Технологии — Тип устройства». Если на телефоне сайт неудобен, эти люди уходят к конкурентам, а поисковые системы видят плохие поведенческие сигналы.
Поисковики оценивают сайт с учётом его мобильной версии: Google индексирует сайты в первую очередь по мобильной версии, Яндекс учитывает удобство для мобильных пользователей в мобильной выдаче. Поэтому проблемы на смартфонах бьют одновременно по SEO, рекламе и конверсии.
Способ 1. Автоматические сервисы
Яндекс Вебмастер
В Вебмастере есть инструмент проверки мобильных страниц. Введите адрес, и сервис покажет, как страница отображается на смартфоне и есть ли проблемы: не задан viewport, контент шире экрана, слишком мелкий текст. Кроме того, раздел «Диагностика» сообщает о проблемах, найденных роботом на всём сайте.
PageSpeed Insights
Сервис Google проверяет скорость и качество загрузки отдельно для мобильных и компьютеров. Смотрите в первую очередь на мобильную вкладку и показатели Core Web Vitals:
- LCP — как быстро появляется основной контент;
- INP — как быстро страница реагирует на нажатия;
- CLS — насколько «прыгает» вёрстка при загрузке.
Если есть данные реальных пользователей, ориентируйтесь на них, а не только на лабораторный тест. Подробнее про эти показатели — в статье о Core Web Vitals.
Google Search Console
Отчёт об основных интернет-показателях группирует страницы с проблемами по мобильным и десктопным устройствам. Удобно, чтобы увидеть, какие шаблоны страниц тормозят массово.
Яндекс Метрика
Сравните поведение мобильных и десктопных посетителей: отказы, глубину просмотра, конверсию в цели. Если на телефонах отказы заметно выше, а конверсия ниже — это сигнал к детальной проверке. Записи Вебвизора с фильтром по смартфонам покажут конкретные проблемы.
Способ 2. Режим разработчика в браузере
В любом современном браузере на компьютере есть эмуляция мобильных устройств.
- Откройте сайт и нажмите F12 (или правой кнопкой — «Просмотреть код»).
- Включите режим устройства — значок с телефоном и планшетом на панели.
- Выберите модель из списка или задайте ширину вручную.
- Проверьте несколько ширин: узкий смартфон около 360 пикселей, популярный смартфон около 390–430, планшет около 768 и 1024 в обеих ориентациях.
- Включите замедление сети в настройках, чтобы увидеть загрузку на мобильном интернете.
Режим разработчика удобен для быстрой проверки вёрстки, но не передаёт реальных ощущений: касание пальцем, поведение клавиатуры, особенности браузеров на iOS и Android. Поэтому он не заменяет проверку на устройствах.
Способ 3. Проверка на реальных телефонах
Возьмите минимум два устройства: iPhone с Safari и Android-смартфон с Яндекс Браузером или Chrome. Желательно, чтобы один из них был недорогим или не самым новым — так вы увидите, как сайт работает у значительной части аудитории.
Сценарии для проверки
- Зайти на сайт из поиска на ключевую страницу услуги или категории.
- Найти цену, условия, контакты.
- Позвонить по номеру с сайта одним касанием.
- Заполнить и отправить форму заявки.
- Для магазина — найти товар через поиск и фильтры, добавить в корзину, оформить заказ до шага оплаты.
- Перейти в мессенджер по кнопке.
Пусть проверку сделает человек, который не участвовал в разработке, — он заметит то, к чему команда уже привыкла.
Попросите его проговаривать вслух, что он ищет и что ожидает увидеть после нажатия. Засекайте, сколько времени уходит на каждый сценарий, и отмечайте моменты, когда человек сомневается или возвращается назад. Проверяйте и в вертикальной, и в горизонтальной ориентации, а также при включённом крупном шрифте в настройках телефона.
Чек-лист мобильной версии
Вёрстка и контент
- Нет горизонтальной прокрутки, контент не выходит за край экрана.
- Текст читается без увеличения, размер основного шрифта не меньше 16 пикселей.
- Картинки и видео масштабируются под ширину экрана.
- Таблицы либо адаптированы, либо прокручиваются внутри своего блока.
- Первый экран сразу объясняет, что предлагается, и не занят целиком баннером.
Навигация и элементы управления
- Кнопки и ссылки достаточно крупные, чтобы попасть пальцем, и не стоят вплотную друг к другу.
- Меню открывается и закрывается без проблем, пункты не обрезаются.
- Телефон оформлен кликабельной ссылкой.
- Фиксированная шапка или панель не занимает слишком много места.
- Всплывающие окна легко закрыть, крестик не уезжает за экран.
Формы
- Для полей открывается правильная клавиатура: цифровая для телефона, с символом @ для почты.
- Кнопка отправки видна при открытой клавиатуре.
- Сообщения об ошибках понятны и видны рядом с полем.
- Согласие на обработку персональных данных по 152-ФЗ отображается корректно и не перекрывает форму.
Скорость
- Страница становится пригодной для использования за несколько секунд на мобильном интернете.
- Изображения сжаты и отдаются в современных форматах.
- Вёрстка не прыгает при загрузке шрифтов, баннеров и виджетов.
- Сторонние виджеты — чаты, квизы, счётчики — не тормозят страницу.
Типичные ошибки и как их исправить
| Проблема | Причина | Решение |
|---|---|---|
| Сайт выглядит как уменьшенная десктопная версия | Нет адаптивной вёрстки или не задан viewport | Добавить мета-тег viewport и адаптивные стили |
| Горизонтальная прокрутка | Элемент фиксированной ширины, широкая таблица или картинка | Найти элемент в режиме разработчика и ограничить ширину |
| Кнопка чата перекрывает кнопку заявки | Виджеты расположены в одном углу | Сместить виджет или скрыть его на части страниц |
| Долгая загрузка | Тяжёлые изображения, слайдеры, лишние скрипты | Сжатие, ленивая загрузка, отказ от лишних виджетов |
| На iPhone ломается форма | Особенности Safari | Тестировать на реальном устройстве и исправлять стили |
На конструкторах вроде Tilda мобильную версию каждого блока нужно проверять отдельно: блоки, собранные в Zero Block, часто требуют ручной настройки под каждую ширину. На WordPress проблемы часто создают плагины и слайдеры, которые не рассчитаны на мобильные экраны.
Как оформить результаты проверки
Чтобы исправления не потерялись, фиксируйте каждую найденную проблему в общей таблице или задаче для разработчика. Для каждой записи укажите:
- Адрес страницы и тип шаблона — карточка, категория, услуга, статья.
- Устройство, браузер и ширину экрана, на которых воспроизводится проблема.
- Что именно происходит и что должно происходить вместо этого.
- Скриншот или короткую запись экрана с телефона.
- Приоритет: мешает ли проблема заявке или покупке, или это косметика.
Сначала исправляйте то, что ломает ключевые сценарии: отправку форм, звонок, корзину, оформление заказа. Косметические недочёты — неровные отступы, переносы в заголовках — можно собрать в отдельный пакет. После исправлений снова пройдите сценарии на тех же устройствах и сравните в Метрике конверсию мобильных посетителей до и после.
Как часто проверять
Проверяйте мобильную версию после каждого значимого изменения: нового дизайна блока, установки плагина, подключения виджета, обновления темы. Раз в квартал полезно проходить весь чек-лист по ключевым страницам — даже если никто ничего не менял, обновления браузеров и сторонних сервисов иногда ломают вёрстку.
Частые вопросы
Чем адаптивная вёрстка отличается от отдельной мобильной версии?
Адаптивная вёрстка — это один сайт, который подстраивается под ширину экрана. Отдельная мобильная версия живёт на другом адресе. Сегодня стандарт — адаптивная вёрстка: её проще поддерживать, и не возникает проблем с дублями и редиректами.
Хватит ли проверки в PageSpeed Insights?
Нет. Сервис оценивает скорость и часть технических параметров, но не показывает, удобно ли заполнить форму или найти цену. Автоматические проверки нужно дополнять ручным тестом на реальных смартфонах.
Какую ширину экрана считать минимальной?
Ориентируйтесь на узкие смартфоны около 360 пикселей по ширине и проверяйте, что на них ничего не ломается. Точнее понять, какие устройства у вашей аудитории, поможет отчёт по разрешениям экрана в Яндекс Метрике.
Что делать, если мобильная версия безнадёжно устарела?
Если сайт не адаптивный и сделан давно, точечные исправления часто обходятся дороже нового шаблона. Оцените объём работ: иногда разумнее переработать вёрстку ключевых страниц или весь сайт целиком.
Pear Advert проверяет и исправляет мобильные версии в рамках доработки существующих сайтов, а если сайт пора обновить полностью — делаем новый адаптивный сайт. Чтобы обсудить задачу, заполните бриф.
