Мобильная версия сайта давно перестала быть «дополнением» к основной: поиск оценивает страницы так, как их видит смартфон. Если на телефоне текст приходится масштабировать, кнопки не нажимаются, а картинки грузятся полминуты, позиции теряются даже при идеальном десктопе.
Разберём, что означает подход mobile-first на практике, чем адаптивная вёрстка отличается от отдельной мобильной версии, какие элементы интерфейса ломают поведенческие метрики и как проверить свой сайт без сложных инструментов.
Что означает mobile-first
Приоритет мобильной версии означает, что поисковая система использует для оценки именно мобильную отрисовку страницы. Если на телефоне часть контента скрыта, а на десктопе показана, считается, что скрытого текста не существует. Отсюда главное правило: важное содержимое должно быть доступно на любом экране.
Адаптив или отдельная версия
- Адаптивная вёрстка — одна страница, которая перестраивается под ширину экрана. Один адрес, один контент, одна оптимизация: предпочтительный вариант.
- Отдельная мобильная версия (адрес m.site.ru) — требует синхронизации контента, ссылок и разметки; ошибки синхронизации приводят к дублям и расхождению в выдаче.
- Динамическая отдача — один адрес, разный код для разных устройств. Гибко, но требует постоянной проверки на ошибки.
Читаемость: то, что замечает пользователь
Основной текст на экране телефона должен читаться без жестов масштабирования. Базовые ориентиры: размер шрифта основного текста не меньше 16 пикселей, длина строки 30–40 знаков, достаточные межстрочные интервалы, контраст текста к фону, а отступы по краям экрана — не меньше 16 пикселей.
- Заголовки не переносятся по одной букве и не обрезаются многоточием.
- Таблицы либо прокручиваются горизонтально, либо перестраиваются в карточки.
- Важные элементы не перекрываются всплывающими баннерами и согласиями на cookie.
- Ссылки в тексте отличимы от обычного текста, а не только по наведению.
Тапабельность интерфейса
Палец неточен: рекомендуемая область нажатия — не меньше 44–48 пикселей по каждой стороне. Проверьте меню, кнопки «Оставить заявку», переключатели фильтров и блоки с ценами. Если элементы стоят вплотную, пользователь случайно нажимает соседний и уходит со страницы — поиск фиксирует такие возвраты как признак плохого результата.
Отдельно проверьте навигацию: главное меню должно раскрываться без горизонтальной прокрутки, а кнопки «Позвонить» и «Написать» быть доступны в один тап.
Контент, который нельзя прятать
Скрытые блоки — самая частая причина расхождения между мобильной и десктопной версией. В аккордеонах, вкладках и каруселях прячут описания, характеристики, ответы на вопросы и контакты. Технически текст остаётся в коде, но поиск оценивает видимость: содержимое, спрятанное за кликом, теряет вес.
- Основной текст статьи не сокращается на телефоне.
- Характеристики и условия доставки доступны без дополнительных нажатий.
- Изображения не заменяются на «обрезанные» версии с частью смысла.
- Заголовки уровней сохраняются: заголовки H1 и H2 работают на мобильном так же, как на десктопе.
Скорость на смартфоне
Мобильный интернет медленнее и капризнее проводного, поэтому вес страницы критичен. Первый шаг — проверить, что изображения отдаются в современных форматах и корректных размерах, а не масштабируются в браузере: об этом подробно в статье про оптимизацию изображений для сайта.
Дальше смотрите на метрики отрисовки: время появления основного содержимого и стабильность макета. Сдвиги блоков особенно мешают на телефоне: пользователь целится в кнопку, а она уезжает вниз из-за подгрузившегося баннера. Полный список метрик и порядок их проверки — в разборе аудита скорости сайта.
Что ускоряет мобильную версию
- Сжатие и правильные размеры изображений, ленивая загрузка для блоков ниже экрана.
- Отказ от тяжёлых слайдеров и сторонних виджетов в первом экране.
- Явные размеры у медиа, чтобы макет не прыгал при загрузке.
- Кэширование и сжатие кода: это ускоряет повторные заходы.
Первый экран и структура материала
На смартфоне пользователь видит примерно треть того, что помещается на мониторе. Поэтому первый экран страницы решает, останется человек или вернётся к выдаче. Верхний блок должен отвечать на главный вопрос страницы: что это, для кого и что делать дальше. Длинные вступления, анонсы и лирика уместны в блоге, но и там лучше сразу дать суть.
- Заголовок и первый абзац — без прокрутки, на одном экране.
- Ключевое действие (заявка, звонок, добавление в корзину) — в первых двух экранах.
- Абзацы короткие: три-четыре строки на телефоне вместо десяти.
- Списки и подзаголовки помогают сканировать текст одним взглядом.
Структура влияет и на то, как поиск оценивает удобство: материал, разбитый на смысловые блоки, читают дольше, а возвраты к выдаче случаются реже. Это уже не техническая оптимизация, а работа с контентом — но именно она чаще всего решает исход.
Как проверить мобильную версию
- Откройте сайт на реальном телефоне, а не только в эмуляторе: эмулятор не покажет проблемы с жестами и шрифтами.
- Пройдите путь до целевого действия: поиск, фильтр, корзина, форма.
- Проверьте горизонтальную прокрутку: она не должна появляться ни на одной странице.
- Сравните содержимое мобильной и десктопной версии: тексты, ссылки, цены должны совпадать.
- Посмотрите отчёты панели вебмастера: ошибки удобства на мобильных видны отдельным блоком.
Ошибки
- Запрет масштабирования, из-за которого текст невозможно увеличить.
- Всплывающие окна, занимающие весь экран при входе.
- Скрытие описаний и характеристик в аккордеоны без необходимости.
- Разные адреса и разный контент у мобильной и десктопной версии.
- Кнопки меньше рекомендуемой области нажатия.
- Изображения в исходном размере, растянутые на весь экран.
Чек-лист
- Важный контент виден на смартфоне без дополнительных кликов.
- Шрифт основного текста не меньше 16 пикселей, строка не растянута.
- Зоны нажатия не меньше 44 пикселей, элементы не перекрываются.
- Нет горизонтальной прокрутки ни на одной проверенной странице.
- Страница грузится быстро на мобильном интернете, макет не сдвигается.
- Мобильная и десктопная версии содержат одинаковый текст и ссылки.
- Путь до целевого действия проходится в один тап на каждом шаге.
Заключение
Мобильная версия сайта — это теперь основная версия: её видит поиск, с ней работает большинство посетителей. Начните с реального смартфона, а не с отчётов: откройте страницу, прочитайте текст, попробуйте оставить заявку. Всё, что мешает на этом пути — масштабирование, спрятанные описания, мелкие кнопки, — стоит исправить в первую очередь, и эффект будет заметен и в метриках, и в позициях.