mysurik.ru

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

Оптимизация мобильной версии WordPress сайта.

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

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

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

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

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

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

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

Комментарии

  • WebP Express рулит. Я на all in one WP Migration переехал — и картинки туда же конвертирует.

  • Про меню внизу — хорошая идея. Я сделал плавающую панель с основными разделами. На телефоне удобно.

  • Google Mobile-Friendly Test показал что шрифт мелкий. Пришлось увеличить базовый размер до 18px на мобильных.

  • У меня 80% с телефона заходят. Спасибо за советы, особенно про попапы — убрала их, отказ упал.

  • Сжал картинки через Imagify. WebP Express не захотел работать на моём хостинге.

  • Согласен с каждым пунктом. Особенно про боль с настройкой. Такое надо в Википедию добавлять.

  • Подскажи, а для новичка реально повторить? Или нужен опыт? Такое надо в Википедию добавлять.

  • Сделал по гайду — всё чётко. Спасибо за труды! А у меня не взлетело — порт был занят. Проверьте занятость портов.

  • Мне кажется или это реально лучший гайд по теме? В закладки навечно.

Ваш комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *