Мобильная версия сайта: требования, ошибки, влияние на SEO

Мобильная версия сайта — это не уменьшенная копия десктопного макета, а отдельный сценарий использования: человек держит телефон одной рукой, читает в очереди, платит со СБП и уходит через 8 секунд, если что-то не нажалось. На проектах 2025–2026 годов доля мобильного трафика держится в диапазоне 62–81% — и это уже не «мобильные пользователи», а большинство вашей аудитории.

Разница в поведении видна в цифрах: на десктопе конверсия в заявку у наших клиентов 2,4–3,6%, на телефоне — 1,1–1,9% при том же оффере. Причина почти всегда техническая: мелкий шрифт, форма на 9 полей, всплывающее окно на весь экран, кнопка «Купить» за пределами первого экрана.

Ниже — четыре подхода к мобильной версии, разбор типовых поломок, требования к скорости и чек-лист приёмки, по которому стоит принимать работу у подрядчика.

Ключевые выводы

• Адаптивная вёрстка на одном URL — базовый вариант для 90% проектов: 3–6 недель работы и 120–400 тыс. ₽ при адаптации существующего сайта.
• Отдельный m-поддомен стоит 350–700 тыс. ₽, требует отдельного SEO-сопровождения и почти всегда проигрывает адаптиву по трудозатратам.
• Mobile-first индексация означает, что Google и Яндекс оценивают сайт по мобильной версии: проблемы на телефоне бьют по позициям и на десктопе.
• Норматив Core Web Vitals для мобильных: LCP до 2,5 с, INP до 200 мс, CLS до 0,1. Переход LCP с 4 до 2 секунд давал нам рост конверсии на 8–15%.
• Мобильная страница каталога должна весить до 1,5 МБ и отдавать первый экран за 1,5–2 с на 4G; каждая лишняя секунда — минус 7–12% вовлечённости.
• Кнопки и тап-зоны от 44–48 px, шрифт основного текста от 16 px, поля формы с правильным типом ввода: это три правки, которые чаще всего дают самый быстрый прирост заявок.

Мобильная версия сайта: четыре подхода и что выбрать

Адаптивная вёрстка (responsive) — один HTML и один URL, который перестраивается под ширину экрана. Это дефолт для 2026 года: одна версия контента, один набор ссылок, меньше расходов на поддержку.

Динамическая отдача — сервер определяет устройство и отдаёт разную разметку по одному URL. Вариант для тяжёлых каталогов, где мобильную версию нужно сильно облегчать, но требует аккуратной настройки, чтобы робот видел тот же контент, что и пользователь.

Отдельный m-поддомен (m.example.ru) в 2026 году остаётся оправданным только в одном случае: если мобильный сценарий радикально другой, например курьерская работа или сканирование штрихкодов. PWA выбирают, когда нужны push-уведомления и повторные покупки, но ставить приложение ради этого не хочется. Полноценное приложение — отдельная история со своей сметой: сравнение подходов есть в разделе разработка приложений.

Что ломается на телефоне: девять типовых проблем

Проверьте свой сайт по этому списку — обычно находится 4–6 пунктов из девяти.

1. Шрифт меньше 16 px. Браузер зумит страницу при фокусе на поле, вёрстка разъезжается, пользователь теряет место, где заполнял форму.
2. Тап-зоны меньше 44 px. Ссылки в подвале и крестики у попапов нажимаются с третьего раза.
3. Всплывающее окно на весь экран в первые 5 секунд. Самая частая причина мгновенных отказов и падения поведенческих факторов.
4. Форма на 8–12 полей в один столбик. Каждое лишнее поле — минус 4–8% до отправки; для заявки хватает имени и телефона.
5. Горизонтальный скролл из-за фиксированной ширины блока. Ломает чтение и воспринимается как «сайт сломан».
6. Таблицы и PDF-прайсы вместо адаптивных блоков. Прайс в PDF на телефоне не читают — его скачивают и забывают.
7. Медленные изображения: фото товара по 2–4 МБ без сжатия в WebP или AVIF.
8. Капча, которая не проходится на телефоне, и авторизация по SMS с потерей кода при перезагрузке страницы.
9. Кнопка действия за пределами первого экрана. Пользователь не скроллит в поисках «Купить» или «Записаться».

Быстрый тест: откройте сайт на телефоне и попробуйте оформить заказ, не приближая экран. Если хотя бы раз пришлось зумить — вы теряете часть заявок.

Влияние на SEO и Core Web Vitals

С 2021 года Google индексирует мобильную версию как основную, Яндекс оценивает мобильное качество отдельным фильтром. Если на телефоне не читается текст, не индексируются ссылки или контент скрыт за табами, позиции проседают и на десктопе.

Практика: сжатие изображений, вынос сторонних скриптов в отложенную загрузку и перенос первого экрана в критический CSS снимают 1,5–2,5 секунды LCP без переделки дизайна. Если сайт на конструкторе вроде Tilda, часть ограничений не обойти — там помогает только вынос тяжёлой части на отдельные страницы или переезд.

Скорость и вес: сколько должен весить экран

Бюджет на мобильную страницу каталога: HTML до 100 КБ, CSS до 80 КБ, JS до 300 КБ в сжатом виде, изображения до 800 КБ, шрифты до 150 КБ. Итого 1,5 МБ — это тот порог, за которым на 4G начинаются заметные задержки. Для лендинга бюджет строже: 0,8–1,0 МБ.

Чек-лист приёмки мобильной версии

1. Все ключевые страницы открываются на ширине 320 px без горизонтального скролла.
2. Основной текст — от 16 px, межстрочный интервал от 1,4.
3. Кликабельные элементы — от 44×44 px, расстояние между ними не меньше 8 px.
4. Формы: правильные клавиатуры (tel, email, number), автозаполнение, понятные подписи.
5. Телефон и имя заполняются в одно касание, заявка отправляется без перезагрузки страницы.
6. Изображения в WebP или AVIF, с srcset под разные экраны.
7. Меню открывается одной кнопкой и закрывается свайпом или повторным тапом.
8. Всплывающие окна не перекрывают контент в первые 10 секунд и закрываются зоной от 44 px.
9. Липкая кнопка действия есть на всех коммерческих страницах: «Позвонить», «Записаться», «В корзину».
10. Таблицы и прайсы свёрстаны в адаптивные блоки, а не в PDF.
11. Проверка в PageSpeed Insights и Lighthouse: LCP, INP, CLS в зелёной зоне на мобильном профиле.
12. Тест на реальных устройствах: бюджетный Android 2022–2023 года, не только iPhone последней модели.

Последний пункт отсекает половину проблем. Мы регулярно видим сайты, которые идеально проходят Lighthouse на iPhone за 120 тыс. ₽ и разваливаются на Xiaomi за 15 тыс. ₽ — а именно на таких устройствах сидит значительная часть аудитории в регионах.

Сколько стоит и как долго

Адаптация существующего сайта под мобильные — 120–400 тыс. ₽ и 3–6 недель в зависимости от числа шаблонов: страница услуги, каталог, карточка, корзина, оформление заказа. Мобильная версия сайта обходится дешевле полного редизайна только тогда, когда структура и контент остаются прежними. Если сайт переделывается целиком по mobile-first, это уже полноценный редизайн: 450–900 тыс. ₽ и 6–12 недель. Разработка сайта с нуля стоит 450 тыс. – 1,8 млн ₽, но мобильный сценарий закладывается в макеты сразу, и переделывать через год нечего.

Отдельная строка — интеграции. Клиенты иногда формулируют задачу как «настройка 1С мобильная»: речь о мобильном приложении 1С:Мобильная бухгалтерия или адаптированных формах учёта, куда падают заявки с сайта. Такая настройка стоит 60–180 тыс. ₽ и 2–4 недели, включая сопоставление номенклатуры и статусов.

PWA с push-уведомлениями — 600 тыс. – 1,2 млн ₽, 2–3 месяца. Мобильное приложение на Flutter или React Native обойдётся в 1,5–4 млн ₽ и потребует 300–800 тыс. ₽ в год на поддержку. Приложение стоит делать, когда есть повторные покупки и понятная метрика удержания, а не «потому что у конкурентов есть».

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

Достаточно ли адаптивной вёрстки или нужно отдельное мобильное приложение?

Для 90% компаний достаточно адаптивного сайта: он дешевле, проще в поддержке и не требует уговаривать пользователя что-то скачивать. Приложение оправдано при повторных покупках от 3 раз в год, программе лояльности или работе курьеров.

Упадёт ли трафик, если сделать отдельный мобильный поддомен?

Риск есть: нужно настроить canonical между версиями, продублировать метаданные и следить за расхождениями контента. При ошибках мобильная версия конкурирует с основной в выдаче. Поэтому чаще рекомендуют адаптив, а не поддомен.

Мобильная версия сайта влияет на позиции в Яндексе?

Да. Яндекс оценивает удобство для мобильных отдельным алгоритмом, а Google использует mobile-first индексацию. Неудобный на телефоне сайт проседает и по десктопной выдаче, потому что робот видит именно мобильную разметку.

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

Поведенческие метрики меняются в первые 2–4 недели: растёт глубина просмотра, падает отказ на ключевых страницах. Позиции подтягиваются за 4–10 недель, после переобхода страниц роботом и обновления мобильного индекса.

Сколько стоит поддерживать мобильную версию?

Обычная поддержка сайта закрывает это без отдельной строки: 25–90 тыс. ₽ в месяц покрывают обновления шаблонов и правки вёрстки. Отдельный m-поддомен или PWA добавляют 15–40 тыс. ₽ в месяц, потому что тестировать нужно две кодовые базы.

Что делать дальше

Соберите статистику по устройствам за последние 3 месяца в Яндекс Метрике и посмотрите разрыв конверсии между телефоном и десктопом. Если он больше полутора раз, проблема в мобильной вёрстке, а не в оффере. Дальше пройдите чек-лист приёмки выше и выпишите, что не выполняется, — это и будет техзадание на первый этап работ.

Полезно заранее закрыть вопрос со скоростью: разбор нормативов и узких мест есть в материале скорость загрузки сайта. После правок стоит проверить, как они отразились на заявках, — методика разбора точек роста описана в статье конверсия сайта. Если мобильная версия требует полной переделки, посмотрите, как устроен процесс в разделе разработка сайтов, и заранее оцените риск потери трафика по материалу редизайн сайта.

Статья основана на практике проектов НейроДела и данных Яндекс Вордстата по кластеру «Разработка сайтов». Основной запрос материала — «мобильная версия сайта» (31 833 показов в месяц). Если у вас другая ситуация — напишите, разберём.