Зачем проверять работу мобильной версии
Больше 70% трафика в рунете приходит с мобильных устройств. Яндекс давно учитывает мобильную оптимизацию как фактор ранжирования и помечает мобилефрендли-сайты в результатах поиска. Google с 2021 года использует Mobile-First Indexing — робот сканирует и индексирует мобильную версию сайта как основную. Если ваш сайт плохо работает на смартфоне, вы теряете и позиции, и пользователей.
Мобильная версия — это не уменьшенная копия десктопной. Это другой контекст использования: маленький экран, тач-управление, нестабильное соединение, ограниченное терпение пользователя. Кнопка, удобная на десктопе, может быть неклибабельной на смартфоне. Таблица, которая выглядит аккуратно на 1920px, превращается в нечитаемую кашу на 375px.
Я регулярно провожу аудиты, где сайт выглядит идеально на десктопе, но на мобильном — горизонтальная прокрутка, наложение элементов, невидимые кнопки, формы, которые невозможно заполнить. Каждая такая проблема — потерянный клиент.
Пошаговая инструкция
Шаг 1. Проверьте через инструменты разработчика в браузере
Самый быстрый способ увидеть мобильную версию — DevTools в браузере. Откройте сайт в Chrome или Яндекс Браузере, нажмите F12, затем Ctrl+Shift+M (или кликните иконку телефона/планшета в панели DevTools).
Проверьте сайт в нескольких разрешениях:
- 375×667 — iPhone SE / стандартный смартфон (самое распространённое).
- 390×844 — iPhone 14 / современные смартфоны.
- 412×915 — Samsung Galaxy S21 / крупные Android-устройства.
- 768×1024 — iPad / планшеты.
- 320×568 — старые устройства (всё ещё используются).
На каждом разрешении проверяйте:
- Нет ли горизонтальной прокрутки. Весь контент должен помещаться в ширину экрана.
- Текст читается без масштабирования. Базовый размер шрифта — не менее 16px.
- Кнопки и ссылки нажимаются без промахов. Минимальный размер интерактивного элемента — 48x48px, расстояние между элементами — не менее 8px.
- Формы заполняются удобно. Поля ввода не обрезаются, клавиатура не закрывает кнопку отправки.
- Изображения масштабируются корректно. Нет обрезки, нет выхода за пределы контейнера.
- Меню работает: открывается, подпункты доступны, закрывается без проблем.
Шаг 2. Проверьте через Яндекс Вебмастер
В Яндекс Вебмастере перейдите в «Инструменты» → «Проверка мобильных страниц». Введите URL и получите отчёт о проблемах, которые видит Яндекс. Сервис показывает конкретные ошибки: мелкий текст, близко расположенные ссылки, контент шире экрана, отсутствие viewport.
Также проверьте раздел «Диагностика» → «Безопасность и удобство для мобильных». Здесь Яндекс сообщает о массовых проблемах, которые он обнаружил при обходе сайта.
Шаг 3. Проверьте наличие метатега viewport
Метатег viewport — фундамент адаптивного дизайна. Без него мобильный браузер отобразит десктопную версию сайта, уменьшенную до ширины экрана. Проверьте, что в <head> каждой страницы присутствует:
<meta name="viewport" content="width=device-width, initial-scale=1">В WordPress этот тег обычно добавляется темой автоматически. Если его нет — добавьте через functions.php:
add_action('wp_head', function() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
}, 1);Убедитесь, что в viewport нет параметра maximum-scale=1 или user-scalable=no — они запрещают масштабирование, что мешает пользователям с проблемами зрения. Яндекс и Google могут отметить это как ошибку юзабилити.
Шаг 4. Проверьте скорость загрузки на мобильных
Мобильные устройства обычно работают через мобильный интернет, который медленнее и нестабильнее, чем Wi-Fi. Скорость загрузки критична.
Инструменты для проверки:
- PageSpeed Insights (pagespeed.web.dev) — показывает отдельные оценки для мобильной и десктопной версий. Обращайте внимание на метрики Core Web Vitals: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), INP (Interaction to Next Paint).
- DevTools → Network — включите троттлинг «Slow 3G» или «Fast 3G» и загрузите сайт. Если при 3G сайт грузится дольше 5 секунд — нужна оптимизация.
- DevTools → Lighthouse — запустите аудит в режиме «Mobile». Получите конкретные рекомендации по улучшению производительности.
Основные проблемы скорости на мобильных:
- Тяжёлые изображения без сжатия и без формата WebP.
- Отсутствие ленивой загрузки (lazy loading) для изображений ниже первого экрана.
- Неминифицированные CSS и JS файлы.
- Рендер-блокирующие ресурсы: CSS и JS, которые загружаются синхронно и блокируют отрисовку страницы.
- Отсутствие кеширования статических ресурсов.
Шаг 5. Проверьте контент мобильной версии
С приходом Mobile-First Indexing контент мобильной версии стал основным для индексации. Если на мобильной версии скрыт контент, который есть на десктопе, — поисковик его не увидит.
Проверьте:
- Весь текст доступен. Если часть текста скрыта за аккордеоном или табами — это нормально, Яндекс и Google считывают такой контент. Но если контент скрыт через
display: noneтолько для мобильных и нигде не раскрывается — он может быть проигнорирован. - Все изображения отображаются. Не скрывайте ключевые изображения на мобильных через CSS. Используйте адаптивные изображения (
srcset) для разных разрешений. - Структурированные данные одинаковы. Schema.org разметка должна присутствовать и на мобильной версии. Проверьте через «Просмотр исходного кода» на мобильном разрешении.
- Внутренние ссылки сохранены. Если на мобильной версии упрощено меню и убраны ссылки — робот не увидит их при обходе.
Шаг 6. Проверьте типичные элементы интерфейса
Пройдитесь по сайту на реальном мобильном устройстве (не только в DevTools) и проверьте ключевые элементы:
- Мобильное меню: открывается ли, работает ли «бургер», доступны ли подпункты, закрывается ли при нажатии на пункт.
- Телефон кликабелен: номер телефона должен быть обёрнут в ссылку
<a href="tel:+7...">. - Формы: поля корректного типа (
type="email",type="tel"— для правильной мобильной клавиатуры), кнопка отправки не перекрыта клавиатурой. - Попапы: не перекрывают весь экран, есть крестик закрытия достаточного размера. Яндекс и Google штрафуют за навязчивые межстраничные объявления (interstitials) на мобильных.
- Таблицы: на узком экране таблицы должны скроллиться горизонтально (обёрнуты в
overflow-x: auto) или адаптироваться под мобильный формат. - Видео: встроенные видео не выходят за пределы экрана, используют
max-width: 100%.
Шаг 7. Протестируйте на реальных устройствах
DevTools эмулирует мобильные устройства, но не воспроизводит все нюансы: тач-события, инерцию прокрутки, поведение виртуальной клавиатуры, производительность на слабых процессорах. Протестируйте на реальном смартфоне.
Минимальный набор для тестирования:
- iPhone с Safari (iOS) — второй по популярности мобильный браузер в России.
- Android с Chrome — самый популярный мобильный браузер.
- Если есть возможность — бюджетный Android-смартфон. На устройствах с 2-3 ГБ оперативной памяти сайт может тормозить, даже если на флагмане работает идеально.
Если реальных устройств нет, используйте сервис BrowserStack (browserstack.com) — он позволяет тестировать на реальных устройствах удалённо.
Шаг 8. Исправьте найденные проблемы
Самые частые проблемы и их решения:
- Горизонтальная прокрутка: найдите элемент, который шире экрана. Обычно это изображение без
max-width: 100%, таблица,<pre>блок или элемент с фиксированной шириной в пикселях. Добавьтеoverflow-x: hiddenна<body>как временное решение, но обязательно исправьте корневую причину. - Мелкий текст: установите базовый размер шрифта минимум 16px для
<body>. Используйте относительные единицы (rem,em) вместо пикселей для масштабируемости. - Неклибабельные элементы: увеличьте размер кнопок и ссылок через
padding. Минимальная зона нажатия — 48x48px. - Перекрытие элементов: проверьте
z-index,position: fixedиposition: absoluteэлементы. На мобильных фиксированные шапки и плавающие кнопки часто перекрывают контент.
Типичные ошибки
- Тестировать только в DevTools. Эмулятор в DevTools не показывает реальное поведение тач-устройств: инерцию прокрутки, задержку при тапе, поведение виртуальной клавиатуры, производительность на слабом железе. Обязательно проверяйте на реальном смартфоне.
- Скрывать контент на мобильных через display: none. Если контент важен для SEO — он должен быть на мобильной версии. Mobile-First Indexing означает, что индексируется мобильная версия. Скрытый контент = невидимый контент для робота.
- Использовать навязчивые попапы. Полноэкранные баннеры, которые перекрывают контент сразу при загрузке — прямой сигнал для понижения в мобильной выдаче. Яндекс и Google борются с этим на уровне алгоритмов. Если нужен попап — показывайте его после 30 секунд или при скролле 50%.
- Не адаптировать формы. Форма на десктопе может быть в две колонки, с длинными лейблами и выпадающими списками. На мобильном — одна колонка, крупные поля, правильные типы ввода. Форма, которую неудобно заполнить, — потерянная конверсия.
- Забывать про ландшафтную ориентацию. Часть пользователей поворачивает телефон. Если сайт ломается при повороте — это проблема. Проверяйте оба режима.
- Делать разные URL для мобильной и десктопной версий. Отдельный мобильный сайт на m.vash-sajt.ru — устаревший подход. Он создаёт проблемы с дублями, каноникализацией и обслуживанием. Адаптивный дизайн (один URL, один HTML, CSS-медиазапросы) — стандарт, рекомендованный Яндексом и Google.
- Не проверять Core Web Vitals для мобильных. Метрики CWV для десктопа и мобильных могут кардинально отличаться. Сайт с оценкой 90 на десктопе может получить 35 на мобильном. Всегда проверяйте обе версии в PageSpeed Insights.
Что проверить в итоге
- Метатег
<meta name="viewport" content="width=device-width, initial-scale=1">присутствует на всех страницах. - Нет горизонтальной прокрутки ни на одной странице при разрешении 375px.
- Базовый размер шрифта — не менее 16px, текст читается без масштабирования.
- Все интерактивные элементы (кнопки, ссылки, поля форм) имеют зону нажатия не менее 48x48px.
- Мобильное меню работает корректно: открывается, подпункты доступны, закрывается.
- Номера телефонов обёрнуты в
<a href="tel:...">— кликабельны. - Формы адаптированы: одна колонка, правильные типы полей, кнопка не перекрыта клавиатурой.
- Нет полноэкранных навязчивых попапов при загрузке страницы.
- Контент мобильной версии идентичен десктопной — ничего критичного не скрыто.
- Core Web Vitals для мобильной версии в зелёной или жёлтой зоне (LCP < 4s, CLS < 0.25, INP < 500ms).
- Проверка в Яндекс Вебмастере «Проверка мобильных страниц» не выявляет критических ошибок.
- Сайт протестирован на реальном мобильном устройстве, а не только в эмуляторе.
