Mobile-first и Mobile Usability: текущие требования
Что должно быть на мобайле: тач-таргеты, шрифт, viewport, отсутствие горизонтального скролла.
Симптом
- Страница не отображается корректно на мобильных устройствах: элементы растянуты, текст обрезается.
- Кнопки и ссылки слишком мелкие, трудно нажать.
- При попытке прокрутить страницу появляется горизонтальный скролл.
- В Google Search Console появляется предупреждение «Mobile Usability» (неудобная навигация, слишком маленькие элементы).
- Пользователи жалуются на «неудобный» интерфейс, время отклика растёт.
Причина
Google использует mobile‑first индексирование: поисковый движок сначала анализирует мобильную версию сайта. Если на мобильном устройстве нарушены основные принципы удобства, страница получает штрафы.
Ключевые технические факторы:
| Фактор | Что происходит | Почему это важно |
|---|---|---|
| Viewport | Отсутствует или неверно задан meta viewport. |
Мобильный браузер масштабирует страницу, создавая «масштабированную» версию, что ломает адаптивность. |
| Тач‑таргеты | Кнопки, ссылки < 44 px по высоте/ширине. | Пользователи с пальцами не могут точно нажать, увеличивает кликабельность ошибок. |
| Шрифт | Размер шрифта < 12 px. | Текст становится нечитаемым, пользователи вынуждены увеличивать масштаб. |
| Горизонтальный скролл | Элемент шире экрана (например, таблица, изображение). | Пользователь вынужден прокручивать влево/вправо, нарушается пользовательский опыт. |
| Загрузка контента | Большой размер изображений/скриптов, медленная загрузка. | Увеличивает время до первого байта, ухудшает показатель Core Web Vitals. |
Как проверить
-
Google Search Console
- Перейти в раздел Mobile Usability → Issues.
- Список ошибок (неудобные элементы, горизонтальный скролл, слишком маленькие шрифты). -
Инструмент Lighthouse (Chrome DevTools)
- Открыть DevTools → Lighthouse → Generate report.
- В разделе Best Practices и Accessibility проверить значения Tap target size, Minimum font size. -
Проверка viewport
bash curl -I https://example.com | grep -i viewport
- В ответе должен быть тег<meta name="viewport" content="width=device-width, initial-scale=1">. -
Проверка ширины элементов
bash chrome://inspect
- В режиме «Device toolbar» откройте страницу, щёлкните правой кнопкой по элементу → Inspect.
- В панели Styles проверьтеwidthиmin-width. -
Проверка горизонтального скролла
bash chrome://inspect
- В режиме «Device toolbar» включите «Toggle device emulation» → «Show device frame».
- Если появляется горизонтальная полоса прокрутки, найдите элемент, вызывающий её.
Решение
-
Добавить правильный viewport
html <meta name="viewport" content="width=device-width, initial-scale=1"> -
Увеличить размеры тач‑таргетов
css a, button, .btn { min-height: 44px; min-width: 44px; padding: 10px; } -
Установить минимум шрифта
css body { font-size: 16px; /* минимум 12‑14 px, но 16 px удобно */ } -
Избежать горизонтального скролла
- Ограничить ширину изображений и таблиц:
css img, table { max-width: 100%; height: auto; }
- Убедиться, что контейнеры не выходят за пределы экрана:
css .container { overflow-x: hidden; } -
Оптимизировать загрузку
- Сжать изображения (WebP, AVIF).
- Использовать lazy‑loading для изображений и видео.
- Минифицировать CSS/JS. -
Проверить после изменений
- Перезапустите Lighthouse, убедитесь, что ошибки в Mobile Usability исчезли.
- В Google Search Console нажмите Validate Fix → Validate Fix → Validate Fix (три раза).
Связанные
Не хотите разбираться сами?
Запустите технический аудит сайта за 5 минут — получите PDF-отчёт с разбором всех 64 параметров и конкретными точками роста. Или закажите комплексное SEO-продвижение сайта — починим всё это и возьмём на себя дальнейшую оптимизацию.