Типичные ошибки мобильной версии

Двенадцать ошибок

Как найти источник горизонтальной прокрутки

// вставить в консоль браузера на проблемной странице
const W = document.documentElement.clientWidth;
[...document.querySelectorAll('*')]
  .filter(el => el.getBoundingClientRect().right > W + 1)
  .slice(0, 10)
  .forEach(el => console.log(Math.round(el.getBoundingClientRect().right), el));

Обычно виновники одни и те же: широкая таблица, блок кода, длинный URL без переносов, изображение с фиксированной шириной, элемент с отрицательным отступом.

Три ошибки, которые стоят дороже остальных

1. Потеря контента. Индексируется мобильная версия — вырезанный текст перестаёт существовать для поиска. Проверяется сравнением версий, см. урок об аудите.
2. Урезанное меню. Обрывает внутренние ссылки, части сайта становятся хуже связанными.
3. Lazy на картинке первого экрана. Одна строка в шаблоне ухудшает LCP на всём сайте.

Порядок проверки нового шаблона

1. Сравнить видимый текст мобильной и десктопной версий.
2. Отключить JavaScript — остались ли ссылки навигации.
3. Проверить scrollWidth против clientWidth.
4. Найти картинку первого экрана — нет ли на ней lazy.
5. Проверить наличие width/height у изображений.
6. Проверить viewport на запрет масштабирования.
7. Открыть на реальном телефоне и пройти целевой сценарий.
8. Прогнать через инструмент проверки URL в Search Console.

Итог

Большинство ошибок мобильной версии — это «улучшения», сделанные без проверки последствий. Самые дорогие связаны не с внешним видом, а с тем, что мобильная версия оказывается беднее десктопной. Проверка занимает полчаса на шаблон и окупается сразу.