Коротко: аудит мобильной версии — это проверка сайта на телефоне по чек-листу: адаптивность, скорость, размер шрифта, размер кнопок, отсутствие горизонтальной прокрутки, корректность форм и меню. Проводят инструментами (PageSpeed Insights, DevTools в режиме устройства) и обязательно на реальном смартфоне.
Что проверяем
| Пункт | Норма |
|---|---|
| Адаптивность | вёрстка перестраивается |
| Шрифт | не меньше 16px |
| Кликабельные зоны | не меньше 44×44 px |
| Горизонтальная прокрутка | отсутствует |
| Скорость | хорошая оценка в метриках |
| Формы | удобны, поля не «прыгают» |
| Меню | открывается и закрывается |
Вкладки: как проверять
- DevTools (F12) → иконка устройства → переключите размеры.
- PageSpeed Insights — мобильный отчёт и рекомендации.
- Проверка удобства от Google — для оценки читаемости и кликов.
- Обязательно: открыть на настоящем телефоне.
- Нет горизонтальной прокрутки (кроме специальных блоков с собственной прокруткой);
- текст не «выпирает» за края;
- картинки не искажены и не растягиваются;
- таблицы либо прокручиваются, либо превращаются в карточки;
- липкая шапка не перекрывает контент.
Мобильная скорость особенно чувствительна к:
- тяжёлым изображениям (сжимайте и используйте современные форматы);
- большим скриптам (удаляйте ненужные);
- шрифтам (подключайте только нужные начертания);
- анимациям (ограничивайте);
- кэшу и сжатию (включите их).
- Кнопки крупные и с отступами — по ним легко попасть пальцем.
- Телефон в формах —
type="tel"для цифровой клавиатуры. - Ссылки в тексте не сливаются, подчёркнуты или выделены.
- Меню не «застревает» и закрывается после выбора пункта.
- Модальные окна закрываются удобной кнопкой.
- Нет перекрытий всплывающих баннеров с контентом.
Практика: полный мобильный аудит
- Открыть сайт на телефоне и пройти основные сценарии.
- Проверить главную, карточку и форму.
- Проверить скорость в PageSpeed (мобильный режим).
- Составить список проблем с приоритетами.
- Исправить критичное: прокрутку, размеры, скорость.
- Повторить проверку после правок.
Частые ошибки: причина → решение
| Проблема | Причина | Решение |
|---|---|---|
| Горизонтальная прокрутка | фикс-ширина, большой padding | max-width:100%, border-box |
| Мелкий текст | шрифт <16px | увеличить |
| Тяжело кликать | маленькие кнопки | 44×44px минимум |
| Долго грузится | тяжёлые картинки | сжать, современные форматы |
| Форма «прыгает» | автомасштаб iOS | font-size:16px полям |
Проверьте себя
Вопросы и ответы
В DevTools включите подсветку выхода за границы или пройдите по элементам: чаще всего виноваты фикс-ширины, большие картинки и таблицы.
Скорость и «сломанную» вёрстку: они напрямую влияют на отказы. Косметику — во вторую очередь.
Нет. Один адаптивный сайт — правильный подход. Отдельная мобильная версия создаёт дубли и усложняет поддержку.
После каждого крупного изменения: смены темы, добавления плагинов, новых блоков. Иначе регрессии остаются незамеченными.
Итоги
- Мобильный аудит: адаптив, шрифт, клики, прокрутка, скорость, формы.
- Инструменты — DevTools и PageSpeed, финал — реальный телефон.
- Приоритет исправлений: вёрстка и скорость.
- Проводите проверку после каждого крупного изменения.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.