65% трафика с телефона: как я адаптировал блог под мобильные

Я долго не парился насчёт мобильной версии. Думал, адаптивность есть в теме — и ладно. Но когда зашёл в GA4 и увидел, что 65% посетителей сидят с телефона, пересмотрел своё отношение.

Первое, что я сделал — проверил сайт через Google Mobile-Friendly Test. Оказалось, текст на телефоне слишком мелкий, а кнопки расположены близко друг к другу. Пришлось править CSS.

Второе — изображения. Картинки в статьях весили по 1-2 мегабайта. На мобильных они грузились вечность. Я сжал всё через WebP Express (прямо на сервере). Размер уменьшился на 70%, а качество почти не изменилось.

Третье — убрал всплывающие окна и попапы. На телефоне они раздражают адски. Вместо этого добавил ненавязчивую подписку в конце статьи.

Четвёртое — меню. Дефолтное бургер-меню работало криво. Переделал на простое выпадающее меню внизу экрана. На одну руку удобно тыкать.

После этих изменений скорость на мобильных выросла с 40 до 85 баллов PageSpeed. А показатель отказов упал на 15%. Стоило того.

Больше статей про WordPress — от установки до продвижения — я собрал в сводном гайде.

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

Начну с того, как я жил до этого. Я запустил блог, выбрал тему с «адаптивностью» и считал, что вопрос мобильной версии закрыт. Реальность оказалась другой. Когда я впервые зашёл в GA4 и увидел цифру 65% — посетители с телефона — мне стало стыдно. Почти две трети аудитории смотрели сайт на маленьких экранах, а я даже не удосужился проверить, как он там выглядит. Это была моя главная ошибка: верить в «адаптивность из коробки» вместо того, чтобы проверить её руками.

Первый шаг — тест на мобильную дружелюбность. Я прогнал сайт через Google Mobile-Friendly Test. Результат меня отрезвил: страница считается «мобильной», но есть проблемы. Текст на телефоне слишком мелкий — приходится щуриться и приближать. Кнопки расположены слишком близко друг к другу — легко промахнуться пальцем. Эти, казалось бы, мелочи — самые частые причины, почему люди уходят с мобильного сайта. Я взялся за CSS: увеличил базовый размер шрифта, добавил отступы между интерактивными элементами.

Второй шаг — картинки. Это была самая болезненная проблема. Картинки в статьях весили по 1-2 мегабайта. На мобильном интернете, особенно в поездках, такие изображения грузились вечность. Страница с пятью картинками превращалась в тяжёлый чемодан. Я поставил WebP Express и сжал все изображения прямо на сервере. Размер уменьшился на 70%, а качество почти не изменилось. Визуально читатель разницы не заметил, но страницы стали грузиться в разы быстрее. Это, пожалуй, самая эффективная оптимизация из всех, что я сделал.

Про WebP стоит сказать отдельно. Формат WebP позволяет хранить изображения заметно компактнее, чем JPEG или PNG, при том же визуальном качестве. Плагин WebP Express конвертирует картинки на сервере и отдаёт браузеру подходящий формат. Современные браузеры понимают WebP без проблем. Для мобильного трафика это особенно важно: меньше трафик — быстрее загрузка — меньше расход интернета у читателя. Я бы советовал включить конвертацию в WebP первым делом, если у тебя много картинок.

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

Четвёртый шаг — меню. Дефолтное бургер-меню в моей теме работало криво: открывалось медленно, пункты были мелкими, кликать неудобно. Я переделал его на простое выпадающее меню внизу экрана. Почему внизу? Потому что на телефоне большой палец чаще всего лежит в нижней части экрана, и до нижнего меню легче дотянуться. Это называется mobile-first UX, и такие мелочи реально влияют на удобство. После переделки пользоваться сайтом с телефона стало заметно приятнее.

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

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

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

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

Ещё совет про попапы и рекламу. На мобильном любые навязчивые элементы вредят сильнее, чем на десктопе. Экран маленький, терпение короткое. Если у тебя есть попапы — пересмотри их. Возможно, стоит отказаться от них в пользу ненавязчивых элементов. Я убрал все всплывашки и ни капли не пожалел. Показатель отказов упал, а подписчики никуда не делись. Иногда меньше — это больше, особенно на мобильном.

Подведу итог. Мобильная оптимизация превратила мой сайт из «терпимо» в «удобно». Текст стал читаемым, картинки — лёгкими, меню — удобным, попапы — исчезли. Скорость выросла с 40 до 85 баллов, отказы упали на 15%. Всё это — результат простых, конкретных действий, которые может повторить каждый. Если у тебя блог и больше половины трафика с телефона — начинай с этих четырёх шагов: проверь адаптивность, сожми картинки, убери попапы, настрой меню. И не забудь проверить результат на реальном устройстве. Потому что мобильный пользователь — это твой главный читатель, и он заслуживает удобного сайта.

Расскажу ещё о нескольких вещах, которые я сделал и которые помогли сделать сайт по-настоящему мобильным. Первое — это viewport и мета-теги. Звучит технически, но важно: правильный мета-тег viewport заставляет сайт адаптироваться к ширине экрана, а не масштабироваться. Я проверил, что он стоит в шапке, и убрал ограничение на зум — многие любят приближать текст. Мелочь, а влияет на восприятие.

Второе — это touch-события. Я заметил, что некоторые элементы на сайте — слайдеры, кнопки — не всегда реагируют на касание с первого раза. Пришлось немного доработать CSS и скрипты, чтобы они корректно обрабатывали touch-события. Сейчас все интерактивные элементы работают с пальцем без задержек. Если у тебя есть элементы, которые требуют наведения мышью, — на мобильном они просто не сработают, и это надо учесть.

Третье — это про внешний вид в админ-панелях и редакторах. Я проверил, что редактировать статьи можно и с телефона — иногда удобнее дописать мысль со смартфона, чем бежать к компьютеру. WordPress даёт нормальную мобильную админку, но я убедился, что мои кастомные блоки не ломают её. Если ты тоже пишешь в блог — проверь, удобно ли тебе править статьи с телефона.

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

И пятое — про постоянный контроль. Я периодически открываю сайт с телефона, просто чтобы убедиться, что всё работает: меню, формы, картинки, скорость. Иногда после обновлений что-то «съезжает», и лучше поймать это сразу. Мобильная версия — это не «настроил и забыл», это живая часть сайта, за которой нужно следить. Включи это в свою регулярную рутину — пять минут в день на проверку с телефона, и сайт всегда будет в порядке.

И напоследок про главную цифру этой истории. 65% мобильного трафика — это не какая-то абстрактная статистика. Это две трети твоих читателей, которые пришли с телефона и которые ждут, что сайт будет удобным. Я потратил на мобильную оптимизацию несколько вечеров, и они окупились: скорость, отказы, глубина просмотра — всё улучшилось. Если ты ещё не занимался мобильной версией своего сайта — посмотри на свою аналитику. Если там больше половины «mobile» — ты знаешь, с чего начать. Не откладывай. Твои мобильные читатели этого ждут.

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