Оптимизация сайта для мобильных устройств: почему это важно и как правильно ее выполнить

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

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

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

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

• Область просмотра задана правильно. В коде страницы должен быть метатег viewport с шириной, равной ширине устройства. Без него браузер телефона рисует страницу как десктопную и уменьшает её целиком — текст превращается в нечитаемую сетку.
• Горизонтальной прокрутки нет. Ни один элемент не выходит за границу экрана. Чаще всего вылезают широкие таблицы, картинки с жёсткой шириной в пикселях и блоки с фиксированной вёрсткой, оставшиеся от старого дизайна.
• Текст читается без увеличения. Базовый размер шрифта не меньше шестнадцати пикселей, межстрочный интервал не плотнее полутора.
• Интерактивные элементы не слипаются. Между кнопками и ссылками достаточно расстояния, чтобы палец не попадал по соседней.
• Контент на мобильной и десктопной версиях совпадает. Тексты, заголовки, структурированные данные, ссылки внутренней перелинковки — всё это должно присутствовать на телефоне.
• Основной контент виден без взаимодействия. Если текст спрятан за кнопкой «показать полностью», он всё равно должен быть в HTML-коде, а не подгружаться скриптом после клика.
• Сайт недостаточно оптимизирован под мобильные устройства

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

Три способа сделать сайт мобильным и чем они различаются

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

Подход	Как устроен	Плюсы	Риски
Адаптивная вёрстка	Один адрес, один HTML, оформление меняется медиазапросами CSS	Нет дублей, правки делаются один раз, ссылки не расходятся	Тяжёлые десктопные ресурсы грузятся и на телефоне, если не разделены
Отдельная мобильная версия	Поддомен вида m.site.ru со своим шаблоном	Можно собрать лёгкую версию с нуля, не трогая основной сайт	Две копии контента, обязательные перекрёстные атрибуты, расхождение версий со временем
Динамическая отдача	Один адрес, сервер отдаёт разный HTML по типу устройства	Полный контроль над кодом для каждого типа	Нужен корректный заголовок Vary, ошибки определения устройства ломают выдачу

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

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

Скорость на телефоне: почему десктопные замеры обманывают

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

Тему разбирал отдельно: «Адаптивность сайта: почему это важно и как повысить ее уровень».

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

Помогу с продвижением: продвижение сайтов белыми методами — вывожу сайты в топ Яндекса белыми методами.

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

Общий разбор: как продвигать сайт в Яндексе:

0:55

Показатель	Что означает	Ориентир для мобильных	Что чинить при провале
Отрисовка основного контента	Момент, когда виден самый крупный элемент первого экрана	До 2,5 секунды	Вес и формат картинки первого экрана, ответ сервера, блокирующие стили
Смещение макета	Насколько содержимое прыгает во время загрузки	Не выше 0,1	Явные размеры у картинок и рекламных мест, шрифты с запасным начертанием
Задержка отклика	Пауза между нажатием и реакцией интерфейса	До 200 миллисекунд	Объём и приоритет скриптов, сторонние виджеты
Время ответа сервера	Скорость выдачи первого байта	До 0,6 секунды	Кэширование, база данных, хостинг, лишние редиректы
Общий вес страницы	Сколько данных скачивает телефон	Желательно до 1,5 мегабайта	Форматы изображений, шрифты, видеофоны, счётчики

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

Вёрстка и зоны нажатия: цифры, а не ощущения

Удобство мобильного интерфейса измеримо. Есть набор величин, проверенных на практике интерфейсных исследований, и отклонение от них ощущается пользователем как «неудобный сайт», хотя объяснить причину человек не может.

Смежный материал по теме — «Кроссбраузерность сайта: что это такое и почему это важно».

Элемент	Норма	Как проявляется нарушение
Область нажатия кнопки	Не меньше 44×44 пикселя	Промахи по кнопке, повторные нажатия, раздражение
Расстояние между ссылками	От 8 пикселей	Палец открывает соседний пункт меню
Основной текст	16 пикселей и выше	Приходится увеличивать пальцами, часть уходит за край
Длина строки	Комфортно 35–45 знаков	Слишком длинные строки на планшете, рваные переносы на телефоне
Боковые отступы	16 пикселей от края	Текст упирается в рамку, задевается ладонью
Высота первого экрана	Оффер и действие видны сразу	Человек не понимает, куда попал, и возвращается в выдачу

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

Всплывающие окна, баннеры и всё, что перекрывает экран

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

При этом не всякое окно вредно. Разделение проходит по тому, перекрывает ли оно основной контент сразу после перехода из поиска.

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

Путь до заявки: как теряются обращения с телефона

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

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

Текст и картинки на маленьком экране

Если нужна помощь по теме — обучение SEO-продвижению.

Совет «сокращайте текст для мобильных» звучит логично, но приводит к потере позиций, потому что урезанная страница отвечает на меньшее число запросов. Работает другой принцип: объём сохраняем, форму подачи меняем.

• Абзацы по три-четыре строки. На узком экране абзац из десяти строк выглядит стеной, и её пролистывают не читая.
• Подзаголовки чаще, чем на десктопе. Они работают навигацией: человек прокручивает и цепляется взглядом за нужный раздел.
• Списки вместо перечислений через запятую. Один пункт — одна мысль, читается по диагонали.
• Широкие таблицы в горизонтальную прокрутку. Оборачиваете таблицу в контейнер с прокруткой по горизонтали — она не ломает вёрстку и остаётся читаемой.
• Аккордеоны для второстепенного. Характеристики, условия доставки, юридические подробности сворачиваются, но остаются в коде страницы.
• Отложенная загрузка изображений. Все картинки, кроме первого экрана, грузятся по мере прокрутки. Картинке первого экрана отложенная загрузка противопоказана — она ухудшает главный показатель скорости.
• Сайт недостаточно оптимизирован под мобильные устройства

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

Если нужны детали, смотрите «Оптимизация сайта под мобильные устройства».

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

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

Очередь	Что делаем	Почему именно здесь
1	Viewport, горизонтальная прокрутка, работоспособность форм и телефонных ссылок	Пока сценарий обращения сломан, остальное не имеет значения
2	Вес изображений и формат, отложенная загрузка	Самое дешёвое ускорение с самым заметным результатом
3	Аудит сторонних скриптов и виджетов	Часто половина времени загрузки приходится на то, чем никто не пользуется
4	Совпадение контента мобильной и десктопной версий	Индексируется мобильная версия, вырезанное не участвует в ранжировании
5	Размеры кнопок, отступы, шрифты, клавиатуры полей	Влияет на конверсию сильнее, чем на позиции, но влияет заметно
6	Всплывающие окна и логика их показа	Устраняет риск понижения и возвращает часть уходящих сразу
7	Кэширование, ответ сервера, шрифты	Требует разработчика, даёт финальные доли секунды

Как проверить сайт самому за час

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

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

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

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

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

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

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

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

Коротко

• Оценка сайта строится по мобильной версии, поэтому всё, что вырезано с телефона, не участвует в ранжировании ни на одном устройстве.
• Для большинства проектов правильный выбор — адаптивная вёрстка; отдельный мобильный поддомен удваивает поддержку и рано или поздно расходится с основным сайтом.
• Скорость измеряют в мобильном режиме по конкретным показателям, а не по общему баллу; чаще всего тормозят тяжёлые картинки и сторонние виджеты.
• Удобство измеримо: кнопка от 44 пикселей, текст от 16, отступы от 16, расстояние между ссылками от 8 — отклонения человек чувствует, но объяснить не может.
• Всплывающее окно, перекрывающее контент сразу после перехода из поиска, — единственный элемент дизайна, за который прямо понижают страницу.
• Порядок работ: сначала работоспособность сценария заявки, потом вес изображений и скриптов, потом совпадение контента, и только затем тонкая настройка интерфейса и сервера.
• Сайт недостаточно оптимизирован под мобильные устройства

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