Мобильная версия сайта: как найти и устранить ошибки, которые крадут ваших клиентов

Коротко: Мобильная версия сайта – это основной канал привлечения клиентов в 2024 году: более 65% российского интернет-трафика идёт со смартфонов. Google оценивает сайты именно по мобильной версии (mobile-first индексация с 2019 года). Проверить состояние своего мобильного сайта можно за 5 минут с помощью бесплатных инструментов – Google PageSpeed Insights, теста на мобилопригодность и Chrome DevTools.

Мобильная версия сайта: почему это не опция, а необходимость

Мобильная версия сайта – это адаптированное отображение веб-ресурса на экранах смартфонов и планшетов, при котором навигация, контент и интерактивные элементы корректно работают на сенсорном экране без горизонтальной прокрутки и масштабирования. Речь не о separate mobile site на субдомене m.domain.ru – современный стандарт называется адаптивная вёрстка (responsive design): один сайт, который перестраивается под любой размер экрана.

Если вы думаете, что ваш сайт выглядит прекрасно – вы, скорее всего, смотрите на него с большого монитора. То, что видит ваш потенциальный клиент в очереди в магазине на экране шириной 360 пикселей и при слабом 4G-сигнале, – это совершенно другая история. И именно с этой историей он принимает решение – остаться или уйти.

Почему половина клиентов уходит молча

Вот сценарий, который повторяется миллионы раз в день. Человек гуглит что-то нужное, находит ваш сайт, тапает по ссылке – и видит текст размером с муравья, кнопку «Купить» за краем экрана и форму с пятнадцатью полями, которую нужно заполнять клавиатурой размером с семечку. Он закрывает вкладку. Молча. Без объяснений. Он просто уходит к конкуренту, у которого всё работает нормально.

По данным Google, 53% пользователей покидают мобильную страницу, если она загружается дольше 3 секунд. Не 30 – именно три. Это меньше, чем нужно, чтобы открыть холодильник и убедиться, что там ничего интересного нет. По данным Statista, в России мобильный трафик составляет более 65% от общего – в нишах локального бизнеса, доставки, медицины и интернет-магазинов эта цифра часто перевалила за 80%.

Конверсия на мобильных традиционно ниже, чем на десктопе – но не потому что люди с телефонов принципиально не хотят покупать. А потому что большинство мобильных версий сайтов – это катастрофа, замаскированная под веб-дизайн. Когда мобильный опыт нормальный – люди покупают.

Пятиминутный аудит: что проверять и в каком порядке

Чтобы понять реальное состояние вашего мобильного сайта, не нужно нанимать агентство за 200 000 рублей и ждать трёхмесячного отчёта. Достаточно 5 минут и трёх бесплатных инструментов.

Шаг первый: возьмите телефон и зайдите на сайт сами

Звучит банально – но большинство владельцев бизнеса последний раз смотрели на свой сайт с телефона в момент запуска. С тех пор сайт обновлялся, добавлялись разделы, менялись плагины – и всё это могло превратить мобильную версию в нечто несовместимое с нормальным пользованием.

Зайдите с реального телефона, с обычного 4G-соединения, а не с офисного Wi-Fi. Прокрутите страницу вниз. Попробуйте нажать на кнопку. Заполните форму. Найдите номер телефона и тапните по нему – он должен сразу предложить звонок, а не скопировать текст в буфер. Если за эту минуту у вас возникло хотя бы одно раздражение – у ваших клиентов оно возникает каждый раз. И они не такие терпеливые.

Шаг второй: Google PageSpeed Insights

Заходите на pagespeed.web.dev, вводите адрес сайта, нажимаете «Анализировать» и через 30 секунд получаете оценку от 0 до 100 – отдельно для мобильных, отдельно для десктопа. Смотрите именно на мобильную оценку:

• 90-100 – отлично, так держать
• 70-89 – норм, но есть над чем работать
• 50-69 – проблемы влияют на позиции в поиске и на конверсию
• 0-49 – это не сайт, это наказание для пользователей

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

Три метрики, на которые смотреть в первую очередь:

LCP (Largest Contentful Paint) – время загрузки главного контента страницы. Норма – до 2,5 секунды. Больше 4 секунд – серьёзная проблема.

INP (Interaction to Next Paint) – как быстро сайт реагирует на действие пользователя. Норма – меньше 200 миллисекунд.

CLS (Cumulative Layout Shift) – насколько элементы прыгают при загрузке. Знаете, когда тапаете на кнопку, а она в момент нажатия съезжает вниз и вы случайно нажимаете не туда? Это оно. Норма – меньше 0,1.

Шаг третий: тест на мобилопригодность от Google

Заходите на search.google.com/test/mobile-friendly, вводите URL. Инструмент скажет прямо: страница удобна или нет – и покажет список конкретных проблем. Типичные находки:

• текст слишком мелкий для чтения без масштабирования
• ссылки расположены слишком близко – пальцем не попасть
• контент выходит за пределы экрана
• viewport не настроен (это значит, что сайт показывается как уменьшенная десктопная версия)

Шаг четвёртый: эмулятор в Chrome DevTools

Открываете сайт в Chrome, нажимаете F12, в верхнем левом углу панели разработчика находите иконку телефона и планшета. Браузер переключается в режим симуляции мобильного устройства. В выпадающем меню – конкретные модели: iPhone 14, Samsung Galaxy S20, Pixel 7. Или задаёте произвольные размеры экрана.

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

Шаг пятый: скорость в реальных условиях

Инструмент WebPageTest (webpagetest.org) проверяет сайт с реального устройства при реальном мобильном соединении – 3G, 4G, LTE. Это важно: ваш сайт может отлично грузиться на офисном Wi-Fi, но становиться тягучим кошмаром при слабом сигнале – а именно в таких условиях часто сидят ваши клиенты. Выбираете локацию (есть европейские точки тестирования), тип соединения, запускаете – и через минуту получаете подробный график с указанием, что именно тормозит загрузку.

Самые частые проблемы мобильных версий: галерея типичных ошибок

Неоптимизированные изображения

Кто-то загрузил фотографию весом 6-8 мегабайт, потому что «так красивее». На десктопе с быстрым интернетом она кое-как тянется. На мобильном при 4G – это несколько секунд ожидания, которые большинство пользователей не выдерживают. Правило простое: фотографии для веба должны весить не больше 200-300 килобайт. Ещё лучше – использовать форматы WebP или AVIF, которые сжимают изображения в 2-3 раза эффективнее JPEG при том же визуальном качестве.

Горизонтальный скролл

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

Кнопки и ссылки, в которые невозможно попасть

Google рекомендует минимальный размер тапабельных элементов – 48×48 пикселей. Когда ссылки расположены в тексте с межстрочным интервалом в 14 пикселей, попасть пальцем куда нужно – это лотерея. Особенно в нижних колонтитулах, где порой собираются десятки ссылок на расстоянии двух миллиметров друг от друга. Пользователи такие лотереи не выигрывают – они уходят.

Всплывающие окна на весь экран

Попап с подпиской на рассылку, который на десктопе занимает треть экрана и легко закрывается крестиком, на мобильном нередко перекрывает всё содержимое. А крестик закрытия находится где-то за пределами экрана или имеет размер 12×12 пикселей – то есть закрыть его без ошибки практически невозможно. Google с 2017 года официально снижает позиции сайтов с агрессивными интерстициальными элементами на мобильных. Это и санкция от поисковика, и прямая потеря пользователей одновременно.

Нечитаемый шрифт

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

Неадаптированные формы

Форма с пятнадцатью полями, выпадающими списками и капчей – это испытание даже на десктопе. На мобильном это барьер, который большинство не преодолеет. Мобильная форма должна содержать минимум полей – имя и телефон в большинстве случаев достаточно. Поля должны автоматически вызывать нужный тип клавиатуры: числовую для телефона, email-клавиатуру для почты. И никаких капч в виде «выберите все светофоры» – на маленьком экране это отдельный вид пытки.

Что говорят цифры: мобильный трафик по нишам

Прежде чем решить, насколько критична мобильная оптимизация именно для вашего бизнеса, посмотрите на данные по отраслям. По усреднённым данным аналитических платформ за 2023-2024 годы:

• Локальный бизнес и услуги (салоны, ремонт, доставка): 75-85% мобильного трафика
• Интернет-магазины: 65-75% заказов начинаются с мобильного устройства
• Медицинские сайты и клиники: 70-80% – люди ищут врача со смартфона, часто в стрессовой ситуации
• B2B и промышленность: 40-55% – здесь доля десктопа выше, но она продолжает снижаться
• Новостные и контентные сайты: 70-90% – контент потребляют в основном со смартфонов

Даже в самой «десктопной» нише – B2B – игнорировать мобильную версию означает терять каждого второго посетителя. В нишах с преимущественно мобильной аудиторией плохая мобильная версия – это просто закрытый бизнес, только с работающим офисом и платящим арендой.

Как Google оценивает мобильные сайты и почему это влияет на ваши позиции

С ноября 2019 года Google официально перешёл на mobile-first индексацию для всех новых сайтов, а к 2021 году перевёл на неё весь индекс. Это означает, что поисковый робот Googlebot в первую очередь сканирует мобильную версию вашего сайта – и именно её содержимое, скорость и удобство определяют позиции в выдаче.

Практические последствия для вас как владельца сайта:

• Если на мобильной версии меньше текста, чем на десктопной – Google видит усечённый контент и ранжирует его соответственно
• Если мобильная версия грузится медленно – Core Web Vitals (те самые LCP, INP, CLS) напрямую влияют на позиции в поиске с 2021 года
• Если сайт неудобен на мобильном – поведенческие факторы (быстрый уход со страницы, отказы) сигнализируют Google, что ресурс не релевантен запросу

По данным исследования BrightEdge, органический поиск приносит более 53% всего трафика на сайты. Если мобильная оптимизация проседает – вы теряете этот канал целиком, не только мобильных пользователей.

Реальные потери в деньгах: как считать стоимость плохой мобильной версии

Абстрактные проценты убеждают хуже, чем конкретные цифры. Давайте посчитаем на простом примере.

Предположим, ваш сайт получает 1000 посетителей в месяц. 65% из них – мобильные, то есть 650 человек. Конверсия на мобильном у вас 0,5% – 3-4 заявки в месяц. При нормально работающей мобильной версии средняя конверсия в вашей нише – 2-3%. Это 13-20 заявок. Средний чек – 15 000 рублей.

Разница: 10-16 заявок в месяц, или 150 000 – 240 000 рублей выручки, которую вы не получаете. Ежемесячно. Из-за сайта, который плохо работает на телефоне.

Стоимость исправления типичных мобильных проблем у фрилансера – от 15 000 до 80 000 рублей в зависимости от масштаба. В агентстве – от 50 000 до 200 000 рублей. Это разовые вложения, которые окупаются за первый же месяц при описанных выше цифрах трафика.

Что делать дальше: приоритеты после аудита

После того как вы прогнали сайт через все четыре инструмента, на руках – список проблем. Теперь важно не бросаться чинить всё сразу, а расставить приоритеты по принципу «максимальный эффект при минимальных усилиях».

Первый приоритет: скорость загрузки

Если PageSpeed показывает меньше 60 баллов на мобильном – начинайте отсюда. Оптимизация изображений и удаление лишних плагинов или скриптов в большинстве случаев поднимают оценку на 20-30 пунктов без серьёзных технических работ. Это самое дешёвое и быстрое улучшение с наибольшим влиянием на конверсию и позиции в поиске.

Второй приоритет: ключевые конверсионные элементы

Кнопка «Позвонить», форма заявки, кнопка «Купить» – всё, что напрямую ведёт к деньгам, должно работать безупречно. Проверьте, что кнопка звонка действительно набирает номер, а не просто копирует его. Убедитесь, что форма отправляется с мобильного без ошибок. Проверьте, что поле телефона открывает числовую клавиатуру, а не буквенную.

Третий приоритет: навигация и структура

Пользователь должен за три тапа добраться до любого раздела сайта. Если ваше меню – это горизонтальная полоса из восьми пунктов, которая на мобильном сворачивается в нечитаемый ряд иконок без подписей, пора переделывать навигацию. Стандарт для мобильного – «бургер-меню» с развёрткой или упрощённая нижняя панель с основными разделами.

Адаптивная вёрстка против мобильного приложения: что выбрать

Этот вопрос регулярно возникает у владельцев бизнеса с активной мобильной аудиторией. Разберём без маркетинговой шелухи.

Адаптивный сайт – это один ресурс для всех устройств. Не нужно поддерживать отдельную кодовую базу, Google индексирует его напрямую, пользователь попадает на него из поиска без дополнительных шагов. Для 95% малого и среднего бизнеса этого достаточно.

Мобильное приложение оправдано, если у вас есть регулярно возвращающаяся аудитория, которой нужен офлайн-доступ, push-уведомления и функции, недоступные в браузере – например, доступ к камере, геолокация в реальном времени, сложные пользовательские профили. Доставка еды, фитнес-трекер, банк – да. Сайт стоматологии или интернет-магазин инструментов – нет.

Создавать приложение вместо нормального мобильного сайта – это как строить отдельный вход для каждого нового клиента вместо того, чтобы починить главную дверь.

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

Вопрос, который задают в первую очередь. Честный ответ: зависит от того, что именно нужно исправить.

Оптимизация скорости существующего сайта (изображения, кэш, скрипты) – от 15 000 до 40 000 рублей у фрилансера, от 30 000 до 80 000 в агентстве. Занимает от трёх дней до двух недель.

Доработка адаптивности существующего сайта (исправление вёрстки, навигации, форм) – от 30 000 до 100 000 рублей в зависимости от объёма проблем и технической сложности CMS.

Новый сайт с нормальной мобильной версией «из коробки» – от 80 000 рублей за посадочную страницу до 300 000+ за полноценный многостраничный сайт. При заказе нового сайта мобильная адаптивность должна быть прописана в техническом задании как базовое требование, а не дополнительная опция за доплату.

Если подрядчик называет адаптивный дизайн «отдельной услугой с наценкой» – это 2012 год, а не 2024. Уходите.

SEO и мобильная версия: связь, которую нельзя игнорировать

Мобильная оптимизация и SEO-продвижение – это не два разных инструмента, а части одного механизма. Современное SEO-продвижение невозможно без технически корректной мобильной версии: Google просто не поднимет сайт в топ, если Core Web Vitals на мобильном в красной зоне.

Обратная ситуация тоже верна: можно довести мобильную версию до идеала, но без системной работы с контентом, ссылочной массой и семантикой трафик не вырастет сам по себе. Мобильная оптимизация убирает технические барьеры – SEO строит трафик поверх этого фундамента.

Если вы сейчас вкладываете деньги в рекламу в Яндекс Директ и при этом ваша мобильная версия набирает 40 баллов в PageSpeed – вы платите за клики, которые не конвертируются. Это деньги в мусорное ведро с красивым интерфейсом.

Практический вывод

Мобильная версия сайта – это не технический нюанс для IT-отдела. Это то, что видит больше половины ваших потенциальных клиентов в момент принятия решения. Пять шагов аудита из этой статьи занимают 20 минут и не стоят ни рубля. Они дадут вам конкретное понимание: есть ли у вас проблема и насколько она серьёзна.

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

Агентство Nedigital занимается разработкой и оптимизацией сайтов под ключ – от технического аудита и исправления мобильной версии до запуска нового сайта с правильной адаптивной вёрсткой. Посмотреть выполненные проекты можно в разделе наших работ. Если хотите понять, что именно тормозит ваш сайт и сколько стоит это исправить – оставьте заявку, разберём конкретную ситуацию.

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

Как быстро можно исправить мобильную версию сайта?

Зависит от масштаба проблем: оптимизация изображений и базовые правки вёрстки занимают от трёх дней до двух недель. Если сайт требует полной переработки адаптивной вёрстки – срок увеличивается до четырёх-восьми недель. В большинстве случаев самые критичные проблемы со скоростью и конверсионными элементами закрываются за одну-две недели.

Обязательно ли делать отдельное мобильное приложение?

Для большинства малого и среднего бизнеса – нет. Адаптивный сайт закрывает 95% потребностей мобильной аудитории, индексируется поисковиками и не требует от пользователя ничего скачивать. Мобильное приложение оправдано только при наличии регулярно возвращающейся аудитории и функций, которые браузер принципиально не поддерживает.

Влияет ли мобильная оптимизация на рекламу в Яндекс Директ?

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

Что такое Core Web Vitals и почему это важно для бизнеса?

Core Web Vitals – это три метрики Google (LCP, INP, CLS), которые измеряют скорость загрузки, отзывчивость и стабильность страницы. С 2021 года они напрямую влияют на позиции сайта в поиске. Плохие показатели CWV означают не только неудобство для пользователей, но и потерю органического трафика – основного бесплатного канала привлечения клиентов.

Можно ли самостоятельно исправить мобильную версию без разработчика?

Часть проблем – да: оптимизировать изображения через бесплатные сервисы вроде Squoosh, отключить лишние плагины на WordPress, поправить размер шрифта через встроенный редактор темы. Но системные проблемы с вёрсткой, горизонтальным скроллом и адаптивностью требуют работы с кодом – здесь без разработчика не обойтись.

Антон · Nedigital

Telegram-канал

В Telegram-канале разбираю нейросети и контент-заводы изнутри: что реально приносит заявки бизнесу, сколько это стоит и какие фейлы случаются по дороге. Только проверенное на своих и клиентских проектах.

Подписаться на канал