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

Пятница, 19:40: клиент уходит с телефона

Вы открываете Метрику в конце недели. Визитов с телефонов 71 процент, заявок с них — 12. Половина звонков длится меньше двадцати секунд.

Клиент ищет ремонт квартиры, стоя в метро, открывает вашу страницу и ждёт загрузки. Тянется к кнопке «Рассчитать стоимость», а она уехала за край экрана: блок свёрстан под ширину 1200 пикселей. Он уменьшает страницу двумя пальцами, попадает в соседнюю ссылку и возвращается в выдачу.

Через сорок минут заявку получает конкурент. Бюджет на Директ за этот визит уже израсходован.

Диагностика своими руками: шесть проверок на сегодня

Возьмите смартфон, выключите Wi-Fi и включите мобильный интернет. Пройдите путь до заявки и записывайте числа, а не впечатления.

• Ширина страницы. Горизонтальная прокрутка или мелкий текст означают, что тег viewport задан неверно.
• Скорость. В PageSpeed Insights для мобильных LCP выше 2,5 секунды — визиты теряются до первого экрана.
• Шрифт и кнопки. Текст меньше 16 пикселей и кнопки ниже 44 пикселей дают промахи по касаниям.
• Контакты в шапке. Номер должен набираться одним касанием, а не копироваться вручную.
• Отправка формы. Тестовая заявка из мобильной сети должна дойти в почту или CRM за пару минут.
• Цели в аналитике. Без разметки звонка и формы стоимость обращения неизвестна.

Четыре группы причин: вёрстка, скорость, форма, контроль

Первая группа — вёрстка. Фиксированная ширина контейнера, размеры в пикселях, баннер поверх кнопки. Такой сайт открывается как уменьшенная копия настольной, и худший вариант страницы достаётся 68–75 процентам аудитории.

Вторая — скорость. Несжатые фото по 3–5 МБ, шесть счётчиков аналитики и внешние шрифты дают LCP 6–9 секунд вместо нормальных 2,5. Каждая секунда ожидания сверх нормы отнимает около 7 процентов конверсии.

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

Четвёртая — контроль. Нет целей в Метрике и коллтрекинга: правки делаются наугад, результат измерить нечем.

Цена бездействия: 1 440 000 ₽ в год на одном лендинге

Лендинг услуг, бюджет 60 000 ₽ в месяц, цена клика 45 ₽. Получаем 1333 визита: 60 000 ₽ ÷ 45 ₽ = 1333 визита.

Конверсия сайта 1,2%: 1,2% от 1333 = 16 обращений, то есть 3750 ₽ за каждое. Приведём страницу к нормальным для услуг 3%: 3% от 1333 = 40 заявок, а обращение дешевеет до 1500 ₽.

Разница — 24 заявки в месяц: 40 − 16 = 24. При конверсии в сделку 20 процентов и среднем чеке 25 000 ₽ это 4,8 сделки и 120 000 ₽ выручки ежемесячно. За год: 120 000 ₽ × 12 = 1 440 000 ₽.

Пересборка мобильной версии лендинга стоит от 10 000 ₽ и окупается первой дополнительной сделкой.

Как изменится ситуация за год

Доля мобильных визитов прибавляет 2–3 процентных пункта в год, и вместе с ней растёт объём потерянных обращений при том же бюджете.

Поисковые системы ранжируют страницы по мобильной версии, поэтому медленный на телефоне сайт проигрывает конкурентам с той же тематикой, даже если текст на странице сильнее.

Правки в старой сборке задевают соседние блоки, вёрстка обрастает заплатками, и через год дешевле собрать страницу заново, чем продолжать ремонт.

План на вечер: семь шагов без программиста

План ниже — это mobile first своими руками: от узкого экрана к широкому, от дешёвых правок к дорогим. Порядок выстроен так, чтобы первые шаги дали эффект сразу.

1. 01Добавьте тег viewport с шириной по устройству: без него остальные правки почти не работают.
2. 02Задайте изображениям и блокам максимальную ширину в 100 процентов и уберите фиксированные 1200 пикселей.
3. 03Сожмите фотографии и переведите их в WebP: вес файлов падает в 3–5 раз.
4. 04Поднимите основной шрифт до 16 пикселей, а кнопки — до 44 пикселей по высоте.
5. 05Сократите форму до четырёх полей: имя, телефон, задача и согласие на обработку данных.
6. 06Сделайте номер в шапке кликабельным по схеме tel: и выведите кнопку звонка в нижнюю панель.
7. 07Настройте в Метрике цели на форму, звонок и переход в мессенджер, затем проверьте результат на трёх телефонах с разной шириной экрана.

Где возможности конструктора заканчиваются

Самостоятельные правки заканчиваются там, где начинается логика, а не оформление.

Первое. Стили для телефона ломают настольную версию. Один медиазапрос тянет пересчёт сетки и всплывающих окон, и на широком экране кнопка уезжает под футер.

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

Третье. Скорость упирается в сборку. Чтобы удержать LCP в пределах 2,5 секунды, нужно переписать подключение шрифтов, изображений и скриптов, а не отметить галочку в панели оптимизации.

Состав работ и цены

Работы идут в три шага. Сначала аудит: открываем сайт на реальных устройствах, снимаем замеры PageSpeed, проходим путь до заявки и отдаём список дефектов по приоритету. Аудит стоит 0 ₽, ведёт его Максим Холмов.

Затем адаптация сайта под телефон: пересборка сетки, мобильная типографика, кликабельные контакты, короткая форма и цели в аналитике. От 10 000 ₽ для лендинга, от 30 000 ₽ для многостраничного сайта, от 80 000 ₽ для интернет-магазина.

Три месяца поддержки входят в стоимость, далее от 5 000 ₽ в месяц. Код, доступы и документация остаются у заказчика.

Вывод: сначала мобильная версия, потом реклама

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

Начните с шести проверок из второго блока. Если нашлись горизонтальная прокрутка и медленная загрузка, посчитайте потери и передайте правки тому, кто отвечает за результат. Аудит стоит 0 ₽ и покажет, хватит ли точечного ремонта.