Зачем проверять работу мобильной версии
Больше 70% трафика в рунете приходит с мобильных устройств. Яндекс давно учитывает мобильную оптимизацию как фактор ранжирования и помечает мобилефрендли-сайты в результатах поиска. Google с 2021 года использует Mobile-First Indexing - робот сканирует и индексирует мобильную версию сайта как основную. Если ваш сайт плохо работает на смартфоне, вы теряете и позиции, и пользователей.
Мобильная версия - это не уменьшенная копия десктопной. Это другой контекст использования: маленький экран, тач-управление, нестабильное соединение, ограниченное терпение пользователя. Кнопка, удобная на десктопе, может быть неклибабельной на смартфоне. Таблица, которая выглядит аккуратно на 1920px, превращается в нечитаемую кашу на 375px.
Я регулярно провожу аудиты, где сайт выглядит идеально на десктопе, но на мобильном - горизонтальная прокрутка, наложение элементов, невидимые кнопки, формы, которые невозможно заполнить. Каждая такая проблема - потерянный клиент.
Главная ловушка этого пункта - проверить одну страницу и счесть вопрос закрытым. Тема почти всегда адаптивна «в целом», а ломаются отдельные шаблоны: статья с таблицей, карточка товара с характеристиками, страница с калькулятором, лендинг с фиксированной сеткой. Проверять нужно каждый тип страницы, а не сайт вообще.
Пошаговая инструкция
Шаг 1. Проверьте через инструменты разработчика в браузере
Самый быстрый способ увидеть мобильную версию - DevTools в браузере. Откройте сайт в Chrome или Яндекс Браузере, нажмите F12, затем Ctrl+Shift+M (или кликните иконку телефона/планшета в панели DevTools).
Проверьте сайт в нескольких разрешениях:
- 320px - старые и бюджетные устройства. Ориентир простой: если вёрстка держится на 320px, она держится везде. С этой ширины и начинайте.
- 375×667 - iPhone SE / стандартный смартфон (самое распространённое).
- 390×844 - iPhone 14 / современные смартфоны.
- 412×915 - Samsung Galaxy S21 / крупные Android-устройства.
- 768×1024 - iPad / планшеты в портретной ориентации.
Обязательно возьмите по одной странице каждого шаблона: главная, категория, карточка товара или услуги, статья блога, страница с формой, страница контактов. Проблемы адаптивности живут в шаблонах, и проверка одной главной их не находит.
На каждом разрешении проверяйте:
- Нет ли горизонтальной прокрутки. Весь контент должен помещаться в ширину экрана.
- Текст читается без масштабирования. Базовый размер шрифта - не менее 16px.
- Кнопки и ссылки нажимаются без промахов. Минимальный размер интерактивного элемента - 48x48px, расстояние между элементами - не менее 8px.
- Формы заполняются удобно. Поля ввода не обрезаются, клавиатура не закрывает кнопку отправки.
- Изображения масштабируются корректно. Нет обрезки, нет выхода за пределы контейнера.
- Меню работает: открывается, подпункты доступны, закрывается без проблем.
- Элементы не наложились друг на друга и важный контент не пропал.
Шаг 2. Проверьте через Яндекс Вебмастер
В Яндекс Вебмастере перейдите в «Инструменты» → «Проверка мобильных страниц». Введите URL и получите отчёт о проблемах, которые видит Яндекс. Сервис показывает конкретные ошибки: мелкий текст, близко расположенные ссылки, контент шире экрана, отсутствие viewport.
Также проверьте раздел «Диагностика» → «Безопасность и удобство для мобильных». Здесь Яндекс сообщает о массовых проблемах, которые он обнаружил при обходе сайта. Для сайтов, ориентированных на российский рынок, эта проверка приоритетнее любой другой.
⚠ Отдельного мобильного теста у Google больше нет. Инструмент Mobile-Friendly Test и отчёт «Удобство для мобильных» в Search Console закрыты 1 декабря 2023 года. Если встретите совет «прогнать страницу через search.google.com/test/mobile-friendly» - он устарел. Со стороны Google теперь используйте Lighthouse в режиме Mobile и PageSpeed Insights.
Шаг 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) для изображений ниже первого экрана.
- Отсутствие адаптивных изображений: на смартфон грузится та же картинка, что и на десктоп. Используйте атрибут
srcsetили CDN с автоматическим подбором размера. - Неминифицированные 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) на мобильных.
- Плавающие виджеты: баннер про куки, кнопка обратного звонка и виджет чата не должны закрывать кнопки, ссылки и поля форм. Это самая частая причина «кнопка есть, но нажать нельзя».
- Фиксированная шапка: не перекрывает контент при прокрутке и не съедает половину экрана на 320px.
- Таблицы: на узком экране таблицы должны скроллиться горизонтально (обёрнуты в
overflow-x: auto) или адаптироваться под мобильный формат. - Видео: встроенные видео не выходят за пределы экрана, используют
max-width: 100%.
Шаг 7. Протестируйте на реальных устройствах
DevTools эмулирует мобильные устройства, но не воспроизводит все нюансы: тач-события, инерцию прокрутки, поведение виртуальной клавиатуры, производительность на слабых процессорах. Протестируйте на реальном смартфоне.
Минимальный набор для тестирования:
- iPhone с Safari (iOS) - второй по популярности мобильный браузер в России. Часть проблем вёрстки видна только здесь: Chrome DevTools их не воспроизводит.
- Android с Chrome - самый популярный мобильный браузер.
- Если есть возможность - бюджетный Android-смартфон. На устройствах с 2-3 ГБ оперативной памяти сайт может тормозить, даже если на флагмане работает идеально.
Если реальных устройств нет, используйте сервис BrowserStack (browserstack.com) - он позволяет тестировать на реальных устройствах удалённо.
Шаг 8. Исправьте найденные проблемы
Самые частые проблемы и их решения:
- Горизонтальная прокрутка. Найдите элемент, который шире экрана. Четыре типовые причины: таблица с фиксированной шириной (оберните в контейнер с
overflow-x: auto), изображение без ограничения (правилоimg { max-width: 100%; height: auto; }), блок с шириной в пикселях (заменитеwidth: 800pxнаmax-width: 100%), встроенный iframe с видео или картой без адаптивной обёртки.overflow-x: hiddenна<body>- временная заплатка: она прячет симптом, а причину надо найти. - Iframe с видео или картой. Оберните в контейнер с
position: relative; padding-bottom: 56.25%; height: 0;, а самому iframe задайтеposition: absolute; width: 100%; height: 100%;. Соотношение 56.25% даёт пропорцию 16:9. - Мелкий текст. Базовый размер шрифта для
<body>- минимум 16px, межстрочный интервал не менее 1.4-1.5. Во вторичном тексте не опускайтесь ниже 14px даже в мобильных медиазапросах. Используйте относительные единицы (rem,em) вместо пикселей. - Неклибабельные элементы. Увеличьте размер кнопок и ссылок через
padding. Минимальная зона нажатия - 48x48px, между соседними элементами - не менее 8px. - Перекрытие элементов. Проверьте
z-index,position: fixedиposition: absolute. На мобильных фиксированные шапки, плавающие кнопки и боковые панели часто перекрывают контент - боковые панели должны перестраиваться, а не наезжать. - Скрытый контент. Если блок не помещается - перестройте его под мобильную версию, а не прячьте через
display: none. Спрятанное не индексируется.
Типичные ошибки
- Проверять только главную страницу. Главная адаптивна, а статья блога с таблицей или страница с калькулятором - нет. Проверяйте каждый тип шаблона: главную, категории, карточки, статьи, формы, лендинги.
- Тестировать только в DevTools. Эмулятор не показывает реальное поведение тач-устройств: инерцию прокрутки, задержку при тапе, поведение виртуальной клавиатуры, производительность на слабом железе. Обязательно проверяйте на реальном смартфоне.
- Проверять только в одном браузере. Chrome DevTools не покажет проблемы, специфичные для Safari на iOS. Минимум - прогон через BrowserStack или аналогичный сервис.
- Скрывать контент на мобильных через display: none. Если контент важен для SEO - он должен быть на мобильной версии. Mobile-First Indexing означает, что индексируется мобильная версия. Скрытый контент = невидимый контент для робота.
- Запрещать масштабирование. Атрибуты
user-scalable=noиmaximum-scale=1в viewport ограничивают пользователей с плохим зрением и нарушают рекомендации по доступности. - Использовать навязчивые попапы. Полноэкранные баннеры, которые перекрывают контент сразу при загрузке - прямой сигнал для понижения в мобильной выдаче. Яндекс и 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">присутствует на всех страницах, масштабирование не запрещено. - Нет горизонтальной прокрутки ни на одной странице при 320px и 375px.
- Базовый размер шрифта - не менее 16px, межстрочный интервал 1.4-1.5, текст читается без масштабирования.
- Изображения масштабируются под ширину экрана (
max-width: 100%), используетсяsrcset. - Таблицы и встроенные iframe обёрнуты адаптивно и не ломают вёрстку.
- Все интерактивные элементы (кнопки, ссылки, поля форм) имеют зону нажатия не менее 48x48px и отступ не менее 8px друг от друга.
- Мобильное меню работает корректно: открывается, подпункты доступны, закрывается.
- Номера телефонов обёрнуты в
<a href="tel:...">- кликабельны. - Формы адаптированы: одна колонка, правильные типы полей, кнопка не перекрыта клавиатурой.
- Плавающие виджеты (куки, чат, обратный звонок) не перекрывают кнопки и ссылки.
- Нет полноэкранных навязчивых попапов при загрузке страницы.
- Контент мобильной версии идентичен десктопной - ничего критичного не скрыто.
- Вёрстка не ломается при повороте экрана в ландшафтную ориентацию.
- Core Web Vitals для мобильной версии в зелёной или жёлтой зоне (LCP < 4s, CLS < 0.25, INP < 500ms).
- Проверка в Яндекс Вебмастере «Проверка мобильных страниц» не выявляет критических ошибок.
- Сайт протестирован на реальном мобильном устройстве, а не только в эмуляторе.
