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

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

Почему мобильная версия — главная

Google смотрит на сайт глазами смартфона

Google работает по принципу индексации с приоритетом мобильного контента (mobile-first indexing): сайт сканирует мобильный Googlebot, и для индексации и ранжирования используется именно мобильная версия страниц. Из документации Google следует несколько практических правил:

• основной контент на мобильном и десктопе должен быть одинаковым — если вы «упростили» мобильную версию, убрав тексты, позиции упадут;
• заголовки страниц, мета-описания и микроразметка должны совпадать;
• контент, который подгружается только после клика, свайпа или ввода текста, Google не увидит — основной текст нельзя «прятать» за взаимодействием;
• свернуть текст в аккордеон или вкладки можно: это нормальный способ упорядочить контент на маленьком экране.

Скорость оценивают на телефоне

Core Web Vitals Google считает отдельно для мобильных и десктопов. PageSpeed Insights в мобильном режиме эмулирует смартфон среднего класса с медленным мобильным интернетом. Поэтому сайт, который «летает» на офисном компьютере, на мобильном нередко получает заметно более низкий балл.

Откуда на самом деле приходят ваши клиенты

Общенациональные счётчики вроде StatCounter показывают для Украины заметную долю десктопов — они учитывают все просмотры страниц, включая офисную работу, B2B-сервисы и учёбу. Для конкретного бизнеса важно не среднее по стране, а собственная аудитория, и здесь картина обычно такая:

Проверьте собственные данные в GA4: Отчёты → Технологии → Обзор, параметр «Категория устройства». Смотрите не только на долю сессий, но и на конверсию по устройствам. Если мобильных посетителей 70%, а заявок с мобильных только 30%, — это и есть ваши потерянные деньги.

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

Для большинства бизнесов ответ простой: адаптивный сайт, спроектированный от мобильного.

Принципы mobile-first дизайна

«Адаптив» и «mobile-first» — не одно и то же. Адаптив — когда десктопный макет сжимают до размера телефона. Mobile-first — когда сначала проектируют страницу для экрана 360–390 px, а потом расширяют её для больших экранов. Разница ощутимая: во втором случае на мобильном нет «остатков» десктопа — мелких иконок, таблиц на пол-экрана, меню из двенадцати пунктов.

Ширины, на которых стоит тестировать

Распространённые ширины экранов Android-смартфонов — 360–412 px, iPhone — 375–430 px. Минимальная ширина для проверки — 360 px. Если на ней что-то не помещается, появляется горизонтальный скролл — одна из самых раздражающих ошибок.

Зона большого пальца

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

• главное действие — в закреплённой панели внизу: «Позвонить», «Записаться», «Корзина»;
• важные кнопки не ставят в верхние углы;
• пункты меню крупные и разнесены, чтобы не промахнуться.

Размеры, которые стоит запомнить

Формы, которые удобно заполнять с телефона

• правильные типы полей: для телефона — цифровая клавиатура, для email — клавиатура с символом «@»;
• атрибуты автозаполнения, чтобы браузер подставил имя и телефон одним касанием;
• маска +380 и никаких требований вводить номер «без пробелов и скобок»;
• 2–3 поля вместо 6–8;
• альтернатива форме — кнопки Telegram и Viber, которые открывают чат сразу в приложении.

Контент без потерь

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

Скорость на смартфоне: что её убивает

Целевые показатели Core Web Vitals: LCP до 2,5 с, INP до 200 мс, CLS до 0,1. Что они означают и как их измерить — в статье Core Web Vitals, а пошаговое ускорение — в статье скорость сайта.

Как протестировать мобильную версию за 30 минут

1. Реальный телефон. Откройте сайт на недорогом Android и на iPhone через мобильный интернет, а не офисный Wi-Fi. Пройдите путь клиента: найти услугу, узнать цену, оставить заявку.
2. PageSpeed Insights в режиме для мобильных. Смотрите не только на балл, но и на данные реальных пользователей, если у сайта достаточно трафика.
3. Режим устройств в Chrome DevTools — ширины 360, 390 и 412 px плюс горизонтальная ориентация.
4. Google Search Console, отчёт «Основные интернет-показатели» для мобильных. Отдельный отчёт об удобстве для мобильных и инструмент проверки оптимизации для мобильных Google отключил ещё в конце 2023 года, так что ориентируйтесь на Lighthouse и Core Web Vitals.
5. Microsoft Clarity — бесплатные записи сессий и тепловые карты. Ищите «гневные нажатия» (rage clicks): места, где люди раз за разом жмут на некликабельные элементы.
6. GA4 — сравнение конверсии мобильных и десктопных посетителей.

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

1. Горизонтальный скролл из-за широкой таблицы или картинки.
2. Номер телефона обычным текстом, а не ссылкой для звонка.
3. Поп-ап на весь экран, который сложно закрыть.
4. Кнопки и ссылки так близко, что нажимаешь не то.
5. Текст 12–14 px, который приходится увеличивать пальцами.
6. Поля форм со шрифтом меньше 16 px — страница «прыгает» при вводе на iPhone.
7. Меню с тремя уровнями вложенности.
8. Главный оффер «уехал» за первый экран из-за огромного баннера.
9. Контент, убранный из мобильной версии «для простоты», — и потерянный для Google.
10. Фоновое видео, которое съедает мобильный трафик и батарею.
11. Чат-виджет, закрывающий кнопку «Заказать».
12. Встроенная карта, которая перехватывает прокрутку страницы.
13. Элементы, появляющиеся только при наведении мышкой.
14. Меню или прайс в PDF, который нужно скачивать и масштабировать.
15. Содержимое, которое смещается во время загрузки, — и палец попадает не туда.

Сколько стоит хорошая мобильная версия

В нормальном процессе разработки отдельной цены за «мобильную версию» нет: адаптив проектируется сразу. Во всех наших пакетах адаптив под смартфоны входит в базовую стоимость, а PageSpeed 90+ на мобильных мы гарантируем — или дорабатываем бесплатно (условия — на странице гарантий). Лендинг — от 8 900 ₴ за 2–3 дня, сайт-визитка — от 11 900 ₴ за 3–4 дня.

Если же у вас старый сайт без адаптива, «дописать мобильную версию» к устаревшей вёрстке часто стоит почти как новый сайт, а результат всё равно уступает страницам, спроектированным от мобильного. Тогда выгоднее сделать редизайн сайта: он стоит 70% от цены нового пакета вместе с переносом контента и 301-редиректами, чтобы не потерять позиции.

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

• нет горизонтального скролла на ширине 360 px;
• оффер и кнопка действия видны на первом экране;
• телефон — кликабельная ссылка, есть кнопки мессенджеров;
• внизу экрана закреплена панель с главным действием;
• основной текст от 16 px, поля форм от 16 px;
• кнопки от 44–48 px в высоту, с отступами;
• форма — 2–3 поля с правильными типами и автозаполнением;
• изображения сжаты и адаптивны;
• PageSpeed для мобильных 90+, Core Web Vitals «зелёные»;
• контент на мобильном и десктопе одинаковый;
• нет поп-апов на весь экран и виджетов, закрывающих кнопки;
• конверсия мобильных в GA4 не отстаёт от десктопа в разы.

Вывод

Мобильная версия — не «урезанный десктоп», а основная версия вашего сайта: по ней Google ранжирует, на ней клиент решает, обращаться или нет. Проектируйте от маленького экрана, тестируйте на реальном телефоне и измеряйте конверсию отдельно для мобильных.

Хотите узнать, как ваш сайт выглядит и работает на смартфоне? Пройдите бесплатный аудит сайта: за минуту он проверит скорость по Google PageSpeed, мобильную версию и базовые технические ошибки.