Чек-лист тестирования мобильной версии сайта: 30 проверок перед запуском

Практический чек-лист для тестирования сайта на мобильных: вёрстка, навигация, формы, медиа, скорость, SEO и доступность, с инструментом для каждой проверки.

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

Перед началом: подготовьте тестовые устройства

Понадобятся три вида просмотра:

Быстрый мобильный вид на компьютере для проверки вёрстки на множестве страниц: режим устройства в Chrome DevTools или расширение вроде Mobile View Extension. Разница описана в статье расширение-симулятор или DevTools.
Настоящие мобильные движки (и десктопные браузеры из чек-листа кроссбраузерного тестирования): Safari для iOS через Xcode Simulator или реальный iPhone и Chrome на Android. См. статьи про проверку сайта на iPhone и проверку сайта на Android.
Хотя бы один настоящий телефон среднего уровня для касаний, клавиатуры и скорости.

Минимальный набор ширин (что означают эти числа, объяснено в статье что такое размер viewport): 360 px, 390–402 px и 430–440 px в портретной ориентации, плюс один горизонтальный размер и один планшетный.

1. Вёрстка и читаемость

Ни на одной странице нет горизонтальной прокрутки. Если страница скроллится вбок, найдите элемент шире экрана; обычно виноваты фиксированная ширина, длинные URL и широкие таблицы.
Основной текст не меньше 16 px, строки не шире экрана.
Заголовки переносятся аккуратно, без одиноких слов на строке.
Изображения масштабируются под экран и сохраняют пропорции.
Порядок контента логичен, когда колонки встают друг под друга. Самое важное не уезжает под длинный сайдбар.
В горизонтальной ориентации ничего не прячется за вырезом экрана или индикатором «Домой» (если используете вёрстку во всю ширину, проверьте env(safe-area-inset-*)).
На странице есть правильный мета-тег viewport. Без него телефоны показывают уменьшенную десктопную страницу. Подробнее в статье мета-тег viewport.

2. Навигация

Меню открывается и закрывается одним касанием и закрывается после выбора ссылки.
Все пункты меню, включая вложенные, доступны без наведения.
На каждой странице есть логотип или ссылка на главную.
«Липкая» шапка в горизонтальной ориентации занимает лишь небольшую часть высоты экрана.
Кнопка «Назад» (и жест «Назад» на Android) возвращает туда, куда ожидается, в том числе в одностраничных приложениях.

3. Касания и взаимодействие

Области касания достаточно большие и разнесены. WCAG 2.2 задаёт минимум 24 × 24 CSS-пикселя, а гайдлайны Apple и Google рекомендуют около 44–48 px.
Карусели и слайдеры листаются свайпом и имеют видимые элементы управления.
Всплывающие окна и баннеры cookie легко закрыть, и при заходе они не перекрывают весь экран.
Ссылки в тексте отличимы без наведения.

4. Формы

Каждое поле вызывает нужную клавиатуру: type="email", type="tel", inputmode="numeric".
Текст в полях не меньше 16 px, чтобы Safari на iOS не увеличивал масштаб при фокусе.
Экранная клавиатура не закрывает поле ввода и кнопку отправки.
Автозаполнение работает для имени, email, адреса и платёжных данных (атрибуты autocomplete).
Сообщения об ошибках появляются рядом с полем и видны без прокрутки.

5. Медиа и ресурсы

Изображения отдаются в размерах под экран (srcset и sizes), а не десктопными файлами, уменьшенными в браузере.
Видео не запускаются автоматически со звуком и на iPhone воспроизводятся внутри страницы, где это задумано (playsinline).
Иконки и логотипы чёткие на экранах высокой плотности (SVG или изображения 2x/3x).

6. Скорость

Основной контент быстро появляется на замедленном соединении. Посмотрите полевые данные в PageSpeed Insights и запустите лабораторный тест; оба способа описаны в статье о проверке скорости сайта на мобильных.
Макет не прыгает во время загрузки (Cumulative Layout Shift).
Страница быстро реагирует на первое касание (Interaction to Next Paint).

7. SEO и доступность на мобильных

У мобильной страницы тот же основной контент, заголовки, структурированные данные и мета-теги, что и у десктопной. Google индексирует мобильную версию.
Текст можно увеличить до 200% без поломки вёрстки, а страницей можно пользоваться с экранным диктором хотя бы на одном телефоне.
Аудит Lighthouse в мобильном режиме не показывает критичных проблем с доступностью и SEO. Порядок действий: аудит Lighthouse для мобильных в Chrome.

Короткая версия для каждого релиза

На каждый деплой 30 проверок никто делать не будет. Для обычных релизов:

откройте изменённые страницы в мобильном виде на 360 и 430 px;
проверьте, нет ли горизонтальной прокрутки и сломанных меню;
отправьте одну форму с настоящего телефона;
взгляните на отчёт о скорости главной посадочной страницы.

Это занимает минут десять и ловит большую часть регрессий.

Частые ошибки при тестировании мобильной версии

Проверять только изменением размера окна. Так меняется ширина, но не user agent, плотность пикселей или тип ввода, а некоторые сайты отдают настоящим телефонам другую страницу. Подробнее: как открыть мобильную версию сайта на компьютере.
Проверять только на новом флагмане. У большинства посетителей устройства медленнее, чем у разработчиков.
Игнорировать горизонтальную ориентацию и планшеты. Многие макеты ломаются именно в районе 768–1024 px; см. как посмотреть сайт как на iPad.
Проверять только страницы без авторизации. Личному кабинету и оформлению заказа часто достаётся меньше всего внимания на мобильных.

Частые вопросы

Как протестировать сайт на мобильных без телефона?

Для вёрстки используйте мобильный вид в десктопном Chrome, для Safari на iPhone Xcode Simulator на Mac, для Android эмулятор Android Studio. Финальную проверку ключевых сценариев делайте на настоящем телефоне.

Какая проблема мобильных сайтов встречается чаще всего?

Контент шире экрана, из-за которого появляется горизонтальная прокрутка. Обычно виноваты элемент фиксированной ширины, широкая таблица или изображение без max-width: 100%.

Есть ли официальный мобильный тест от Google?

Google закрыл Mobile-Friendly Test в декабре 2023 года и теперь предлагает Lighthouse. Альтернативы перечислены в статье чем заменить проверку оптимизации для мобильных Google.