Чтобы сделать сайт мобильным, нужно проверить адаптивность вёрстки, скорость загрузки и удобство интерфейса на маленьких экранах. В этом материале разбираем конкретные проблемы, которые мешают пользователям с телефонов, и показываем, как их исправить.

Почему мобильная версия важнее десктопа

Больше половины трафика на сайты приходит с мобильных устройств. Google перешёл на mobile-first индексацию — это значит, что поисковик оценивает сайты по мобильной версии, даже если пользователь зашёл с компьютера. Если мобильная версия сайта неудобная или медленная, позиции в выдаче падают.

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

Что чаще всего ломается

Первая проблема — текст и кнопки слишком мелкие. На десктопе всё читается, а на телефоне приходится зумить. Минимальный размер шрифта для основного текста — 16 пикселей, для кнопок — не меньше 44×44 пикселя по рекомендациям Apple и Google. Если кнопки меньше, в них сложно попасть пальцем.

Вторая — элементы наезжают друг на друга или вылезают за границы экрана. Это происходит, когда вёрстка не адаптивная или использует фиксированную ширину в пикселях вместо процентов или относительных единиц. Горизонтальная прокрутка на мобильных — признак сломанной вёрстки.

Третья — всплывающие окна и баннеры, которые нельзя закрыть. На десктопе крестик видно, а на телефоне он либо слишком маленький, либо вообще за границей экрана. Google штрафует сайты с агрессивными попапами на мобильных в выдаче.

Четвёртая — медленная загрузка. Тяжёлые картинки, которые не сжаты и не адаптированы под размер экрана, скрипты, которые блокируют рендеринг. На мобильном интернете это критично: пользователь не будет ждать больше трёх секунд.

Как проверить свой сайт

Самый простой способ — открыть сайт на своём телефоне и попробовать выполнить целевое действие: найти информацию, заполнить форму, оформить заказ. Если что-то раздражает вас, это раздражает и пользователей.

Для системной проверки используйте инструменты:

  • Google Mobile-Friendly Test — показывает, считает ли Google ваш сайт удобным для мобильных, и перечисляет проблемы.
  • PageSpeed Insights — анализирует скорость загрузки отдельно для мобильных и десктопа, даёт конкретные рекомендации по оптимизации.
  • Режим разработчика в браузере — в Chrome или Firefox можно включить эмуляцию мобильных устройств и посмотреть, как выглядит сайт на разных экранах.
  • BrowserStack или LambdaTest — сервисы для проверки сайта на реальных устройствах удалённо, если нужно протестировать много моделей телефонов.

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

Адаптив против отдельной мобильной версии

Адаптивный сайт — это когда одна вёрстка подстраивается под любой экран через CSS-медиазапросы. Отдельная мобильная версия — это когда для телефонов делают отдельный сайт, обычно на поддомене m.site.ru.

Адаптивный подход удобнее: один код, одна админка, одинаковый контент на всех устройствах. Google рекомендует именно адаптивный дизайн, потому что не нужно настраивать редиректы и дублировать страницы. Проще поддерживать и обновлять.

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

Если у вас уже есть отдельная мобильная версия, проверьте, правильно ли настроены редиректы и теги link rel=canonical. Ошибки в настройке приводят к потере позиций в поиске.

Скорость на мобильных

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

Картинки — главный источник лишнего веса. Используйте современные форматы WebP или AVIF, они весят на 30–50% меньше JPEG при том же качестве. Подключайте адаптивные изображения через атрибут srcset, чтобы телефон загружал маленькую версию, а не огромный файл для ретина-дисплеев десктопов.

Отложенная загрузка (lazy loading) для картинок и видео, которые не видны сразу, ускоряет первую отрисовку страницы. Браузеры поддерживают это нативно через атрибут loading=lazy.

Минифицируйте CSS и JavaScript, убирайте неиспользуемый код. Инструменты вроде Webpack или Vite делают это автоматически. Критичные стили для первого экрана встраивайте inline, чтобы страница отрисовалась быстрее, пока загружаются остальные файлы.

Используйте CDN для статики и включите сжатие Gzip или Brotli на сервере. Это стандартные настройки, но многие хостинги их не включают по умолчанию.

Чек-лист: что проверить и исправить

Пройдитесь по этому списку, чтобы убедиться, что ваш сайт действительно удобен на мобильных:

  1. Размер текста — основной текст не меньше 16px, заголовки пропорционально крупнее. Не требует зума для чтения.
  2. Размер кнопок — минимум 44×44 пикселя, между кнопками достаточно отступов, чтобы не промахнуться.
  3. Viewport настроен — в head есть тег meta name="viewport" content="width=device-width, initial-scale=1". Без него браузер покажет десктопную версию в уменьшенном виде.
  4. Горизонтальная прокрутка отсутствует — весь контент помещается по ширине экрана, ничего не вылезает.
  5. Формы удобные — правильные типы полей (email, tel, number), автозаполнение работает, клавиатура подходящая для каждого поля.
  6. Всплывающие окна закрываются — крестик достаточно большой и не обрезается, попап не закрывает весь экран без возможности прокрутки.
  7. Навигация работает — меню открывается и закрывается, все ссылки кликабельны, не перекрываются другими элементами.
  8. Скорость загрузки — PageSpeed Insights показывает зелёную зону (90+) или хотя бы жёлтую (50–89). Первая отрисовка контента (FCP) меньше 1,8 секунды.
  9. Картинки адаптивные — используются srcset и современные форматы, изображения не огромные для маленького экрана.
  10. Тестирование на реальных устройствах — проверили на iPhone и Android-телефоне с разными размерами экрана.

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

Кто это написал

Мы в Perfinn разрабатываем сайты и не только: интернет-магазины, корпоративные порталы, интеграции с 1С и 1С-Битрикс, автоматизацию бизнес-процессов и внедрение ИИ в рабочие сценарии.

Расскажите задачу — предложим решение и оценим сроки: perfinn.ru