Скорость сайта и мобильная версия: как они влияют на результат рекламы

Вы платите за клик в момент, когда человек нажал на объявление. Но увидит ли он ваше предложение, зависит от того, как быстро загрузится страница и насколько ей удобно пользоваться на смартфоне. В большинстве ниш больше половины переходов из Яндекс Директа приходят с мобильных устройств, часто через мобильный интернет со слабым сигналом. Медленный и неудобный сайт превращает часть бюджета в оплаченные, но потерянные визиты. Разбираем, как это измерить, что исправлять в первую очередь и как проверять мобильную версию.

Как скорость загрузки съедает рекламный бюджет

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

Скорость влияет на результат сразу по нескольким направлениям:

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

Как измерить скорость сайта

Ориентироваться на то, как сайт открывается у вас в офисе на быстром интернете и мощном компьютере, нельзя. Нужны измерения в условиях, близких к реальным:

• Сервисы проверки скорости — онлайн-инструменты, которые эмулируют мобильное устройство и медленное соединение. Смотрите прежде всего на время отрисовки основного контента и время до интерактивности.
• Отчёт о времени загрузки в Метрике — показывает реальные данные ваших посетителей с разбивкой по устройствам и браузерам.
• Ручная проверка — откройте сайт на недорогом смартфоне через мобильный интернет, без вайфая. Желательно не на флагмане, а на среднем по мощности телефоне.
• Инструменты разработчика в браузере — позволяют включить троттлинг сети и увидеть, какие файлы грузятся дольше всего.

Ориентиры для посадочной страницы под рекламу: основной контент первого экрана должен появляться за 2–2,5 секунды на мобильном соединении, страница должна реагировать на нажатия без задержек, а элементы не должны «прыгать» во время загрузки.

Главные причины медленной загрузки

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

Мобильная версия: что проверить в первую очередь

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

1. Первый экран. Видны ли заголовок, оффер и кнопка без прокрутки? Часто на смартфоне весь первый экран занимает картинка или меню.
2. Размер текста. Читается ли основной текст без увеличения? Ориентир — от 16 пикселей.
3. Кнопки и ссылки. Легко ли попасть пальцем? Не стоят ли кнопки слишком близко друг к другу?
4. Телефон. Номер кликабельный и сразу открывает набор?
5. Формы. Открывается нужная клавиатура, поля не уезжают под неё, кнопка отправки видна?
6. Таблицы и прайсы. Не выходят ли за край экрана, можно ли их прочитать?
7. Всплывающие окна. Закрываются ли они на маленьком экране? Не перекрывают ли весь контент?
8. Горизонтальная прокрутка. Её не должно быть — страница не должна «ездить» вбок.
9. Меню. Открывается и закрывается без проблем, не занимает весь экран без возможности закрыть.

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

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

• Сравните конверсию по устройствам. Если на компьютерах конверсия 4%, а на смартфонах 1%, это почти всегда проблема сайта, а не аудитории. Разница в полтора раза бывает естественной, в три-четыре раза — сигнал к доработке.
• Сравните отказы. Резкий рост отказов на мобильных указывает на проблемы с первым экраном или скоростью.
• Посмотрите Вебвизор с фильтром по мобильным устройствам. Хаотичные прокрутки, многократные нажатия на одно место, попытки увеличить экран — признаки неудобства.
• Аналитика форм покажет, на каком поле мобильные посетители бросают заполнение.

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

Мобильный пользователь ведёт себя иначе

Дело не только в размере экрана. Человек со смартфоном часто отвлекается, читает урывками, хочет быстро получить ответ и предпочитает позвонить или написать в мессенджер, а не заполнять форму. Учитывайте это при проектировании:

• Сокращайте тексты: на мобильном длинные абзацы выглядят как стена.
• Используйте закреплённую панель внизу экрана с кнопками «Позвонить» и «Написать».
• Делайте ключевую информацию — цену, сроки, гарантию — видимой сразу, не прячьте её во вкладки и аккордеоны.
• Добавьте кнопки мессенджеров с заготовленным текстом сообщения.
• Не заставляйте скачивать PDF-прайсы — на смартфоне это неудобно.

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

Пошаговый план ускорения посадочной

1. Измерьте исходное состояние — скорость, отказы и конверсию по устройствам за последние 30 дней.
2. Оптимизируйте изображения — особенно на первом экране. Это самый быстрый и заметный выигрыш.
3. Уберите видео и слайдеры с первого экрана на мобильных.
4. Проведите ревизию скриптов — удалите виджеты и счётчики, которыми никто не пользуется. Оставшиеся загружайте после основного контента.
5. Включите кеширование и сжатие на сервере, проверьте хостинг.
6. Проверьте ссылки в объявлениях — они должны вести сразу на конечный адрес без редиректов.
7. Исправьте мобильную вёрстку по чек-листу выше.
8. Повторите измерения через 2–3 недели и сравните отказы и конверсию.

Типичные ошибки

• Проверять сайт только на своём компьютере. Ваши условия не совпадают с условиями клиентов.
• Гнаться за баллами сервисов проверки. Цифра в отчёте важна меньше, чем реальное время появления первого экрана и конверсия.
• Добавлять виджеты «для конверсии». Каждый новый чат, таймер или всплывающее окно замедляет страницу. Иногда удаление трёх виджетов повышает конверсию сильнее, чем их установка.
• Делать отдельную урезанную мобильную версию без цен и примеров работ. Мобильный посетитель тоже хочет всё это видеть.
• Игнорировать проблему, снижая ставки на мобильных. Так вы теряете самый массовый сегмент аудитории.

Когда стоит переделать посадочную целиком

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

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