Сайт идеален на десктопе и сломан для половины пользователей — и Яндекс это уже посчитал

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

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

Сначала посмотрите свои цифры, а не чужую статистику

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

Откройте отчёт по устройствам в Метрике за последние три месяца и выпишите четыре числа отдельно для десктопа и для телефонов:

• Долю визитов. Сколько людей приходит с каждого типа устройств.
• Долю отказов. Разрыв больше десяти пунктов в пользу десктопа — сигнал, что на телефоне что-то мешает.
• Глубину просмотра. Если с телефона смотрят одну страницу против трёх с компьютера, навигация не работает.
• Конверсию в целевое действие. Самое важное число. Здесь чаще всего обнаруживается, что мобильный трафик составляет большинство визитов и меньшинство заявок.

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

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

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

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

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

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

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

Если нужны детали, смотрите «Ваш сайт технически идеален, а торчит на второй странице? Вот чего Яндекс от вас теперь требует».

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

Что ломает мобильную версию чаще всего

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

Поломка	Как проявляется	Как проверить за минуту
Горизонтальная прокрутка	Страница ездит вбок, часть текста за экраном	Провести пальцем влево на любой странице
Мелкий шрифт	Приходится увеличивать пальцами, чтобы читать	Прочитать абзац на вытянутой руке
Тесные кнопки	Промахи, нажатие соседней ссылки	Нажать каждый пункт меню большим пальцем
Всплывающее окно на весь экран	Крестик мелкий или за краем экрана	Зайти с телефона как новый посетитель
Прыгающая вёрстка	Контент смещается, промахиваешься по ссылке	Смотреть на страницу первые три секунды загрузки
Тяжёлые картинки	Долгая загрузка, белый экран	Открыть сайт на мобильном интернете, не по Wi-Fi
Неработающая форма	Клавиатура закрывает поля, кнопка не нажимается	Отправить настоящую заявку с телефона
Скрытый телефон	Номер только в подвале или картинкой	Найти способ позвонить за пять секунд

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

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

Как проверять: три способа и их границы

Проверять мобильную версию можно быстро и поверхностно или медленно и по существу. Нужны оба подхода, но начинать стоит с последнего.

1. Настоящий телефон. Единственный честный способ. Возьмите свой телефон, отключите Wi-Fi, откройте сайт из поиска, а не по закладке, и пройдите весь путь до отправки заявки. Всё, что вас раздражает по дороге, раздражает и посетителя, только он не обязан терпеть.
2. Режим устройства в браузере. Инструменты разработчика позволяют сузить окно до размеров телефона и подставить замедленное соединение. Показывает вёрстку и скорость, но не показывает работу пальцем: промахи по кнопкам, поведение клавиатуры, реакцию на прокрутку.
3. Автоматические проверки скорости. Дают баллы и список замечаний по конкретной странице. Полезны как список подозреваемых, но это один замер одного адреса на условном устройстве — судить по нему обо всём сайте нельзя.

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

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

Скорость на телефоне: за что бороться

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

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

• Сжатие картинок и современные форматы. Обычно самый крупный кусок веса страницы. Изображение шириной в две тысячи пикселей на экране шириной в четыреста — оплаченный трафик посетителя, потраченный впустую.
• Отложенная загрузка того, что ниже экрана. Браузер не должен грузить картинки из подвала, пока человек до него не долистал.
• Ревизия сторонних скриптов. Чаты, виджеты обратного звонка, счётчики, карты, шрифты со сторонних сервисов. Каждый добавляет запросы и время. Половина обычно не нужна или нужна не на всех страницах.
• Резервирование места под элементы. Заданные размеры картинок и блоков избавляют от прыжков вёрстки: контент не скачет, пока подгружаются части страницы.
• Кэширование и сжатие на сервере. Настраивается один раз и работает на весь сайт.

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

Подробнее об этом — в статье «Нулевые заходы на сайт в Яндекс Метрике».

Мобильная выдача — отдельная выдача

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

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

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

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

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

Что смотреть в Вебмастере

Если нужна помощь по теме — исправление ошибок сайта.

Панель для вебмастеров показывает мобильное состояние сайта с той стороны, с которой его видит поиск, — и это дополняет вашу аналитику, а не дублирует её.

• Раздел с оценкой удобства на мобильных. Там перечислены страницы с конкретными замечаниями: мелкий шрифт, тесные элементы, содержимое шире экрана. Это адресный список, а не общая оценка.
• Отчёт по скорости. Показывает данные по реальным посетителям, разделённые по типам устройств, а не результат одного замера.
• Статистика обхода. Полезна, чтобы увидеть, какие адреса робот берёт чаще, и не уходит ли квота на служебные мобильные адреса, если у вас осталась отдельная версия.
• Раздел исключённых страниц. Если страницы выпадают с пометкой о низком качестве, а поведение на телефоне плохое, это связанные вещи, а не два разных вопроса.
• Проверка отображения страницы. Показывает, каким робот видит содержимое. Если часть текста подгружается скриптом после нажатия, здесь это будет заметно сразу.

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

Тему разбирал отдельно: «Счетчик Яндекс Метрика — убивает ваш сайт».

Чеклист: привести мобильную версию в порядок

Порядок работ выстроен по влиянию на деньги, а не по сложности. Первые пункты чинят потерю обращений, последние — восприятие.

1. Форма заявки отправляется с телефона до конца: поля заполняются, клавиатура не закрывает кнопку, письмо доходит.
2. Телефон и способ связи доступны с первого экрана в одно нажатие, номер — ссылкой, а не картинкой.
3. Горизонтальной прокрутки нет ни на одной странице, включая карточки товара и статьи блога.
4. Всплывающие окна не занимают весь экран, крестик крупный и в зоне досягаемости большого пальца.
5. Кнопки и ссылки достаточно крупные и разнесены, чтобы не промахиваться.
6. Основной текст читается без увеличения пальцами.
7. Картинки сжаты, отдаются в подходящем под экран размере, нижние грузятся отложенно.
8. Вёрстка не прыгает при загрузке: под баннеры, картинки и виджеты зарезервировано место.
9. Меню открывается и закрывается предсказуемо, пункты не перекрывают контент.
10. Таблицы и широкие блоки прокручиваются внутри себя, а не растягивают страницу.
11. Контент на телефоне тот же, что на компьютере: ничего не скрыто ради компактности.

После правок обязательно вернитесь в аналитику через две-три недели и сравните те же четыре числа по устройствам, с которых начинали. Если разрыв между десктопом и мобильными сократился — работа сделана. Если нет — искали не там, и стоит пересмотреть записи визитов заново.

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

Нужна ли отдельная мобильная версия на поддомене?
Сейчас почти никогда. Отдельный мобильный поддомен — наследие тех времён, когда адаптивная вёрстка была дорогой. Он удваивает работу по поддержке, требует правильной перелинковки между версиями и постоянно расходится по содержанию с основным сайтом. Адаптивная вёрстка проще во всём.

Достаточно ли, что сайт «адаптивный» по словам разработчика?
Нет. Адаптивность означает, что вёрстка подстраивается под ширину экрана. Она не гарантирует, что форма отправляется, кнопки не тесные, а картинки не весят по несколько мегабайт. Проверять всё равно нужно руками на телефоне.

Что важнее — скорость или удобство?
Удобство, если считать по деньгам. Медленный, но понятный сайт даст заявку от терпеливого посетителя. Быстрый, но с неотправляющейся формой не даст ничего никому. Сначала чините путь до обращения, потом ускоряйте.

Можно ли скрывать часть текста под кнопку «показать полностью»?
Технически можно, но с оговоркой: содержимое должно присутствовать в коде страницы, а не подгружаться отдельным запросом после нажатия. В первом случае оно учитывается, во втором может быть не увидено вовсе.

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

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

Из чего складывается продвижение сайта и как оно работает:

14:31

Коротко

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

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