Как улучшить мобильную версию сайта — опыт "Хорошопа"

15 апреля 2021 года платформа для создания интернет-магазинов "Хорошоп" презентовала обновленную мобильную версию клиентских сайтов. Специалисты платформы более детально расскажут о результатах своей работы и о том, как обновление повлияло на интернет-магазины клиентов.

---

Зачем мы обновляли мобильную версию

Первая мобильная версия "Хорошопа" была разработана в 2016 году. У нее был актуальный дизайн и технологии, которые даже спустя пять лет оставались на достойном уровне, но e-commerce изменился. Трафик с мобильных устройств вырос в два раза, а доля покупок — в четыре. Мобильная версия сайта стала едва ли не важнее десктопной, поэтому мы решили сделать ее еще лучше. Нужно было:

• обновить дизайн;

• улучшить пользовательский опыт;

• ускорить загрузку страниц.

Если удобство интерфейса можно оценить по набору функций, то со скоростью загрузки страниц все сложнее. Скорость загрузки можно оценить на глаз, но это слишком субъективно, а разница будет заметна только на фоне совсем медленных сайтов. Можно даже сидеть с секундомером, хотя такой способ сомнителен. Среди всех методов оценки, общепринятым считается Google PageSpeed Insights.

Google PageSpeed Insights — это сервис, который анализирует содержание и скорость загрузки страниц, оценивая их производительность по 100-балльной шкале. В пользу Google PageSpeed Insights есть два важных аргумента. Во-первых, оценка влияет на ранжирование сайта в поисковой выдаче, во-вторых — сервис общедоступен и анализ всех сайтов проходит по одинаковому алгоритму.

Подавляющее большинство мобильных сайтов, даже у крупных интернет-магазинов, получают оценку на уровне 30-40 баллов, а все, что ниже 50 — слабый результат по мнению PageSpeed Insights. Эти магазины могут повысить оценку путем оптимизации мобильной версии, но это дорогостоящий вариант, который могут себе позволить не все. "Хорошоп" поставил перед собой цель повысить оценку сразу для всех клиентских сайтов.

Некоторые разработчики считают, что у оценки Google PageSpeed Insights нет прямой связи с удобством и скоростью сайта. Хотя сервис заявляет обратное. Мы взяли на себя роль разрушителей мифов и углубились в эту тему, чтобы понять от чего на практике зависит оценка. Опытным путем установлено, что улучшение скорости и юзабилити сайта приводит к улучшению оценки. А если внедрять рекомендации сервиса для повышения оценки, то улучшается скорость и удобство. Вывод был однозначным — с сервисами Google лучше не спорить.

Новый дизайн мобильной версии

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

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

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

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

Оценка скорости загрузки страниц

Для оценки скорости сайта мы брали страницы, на которые идет основная доля трафика. Прежде всего, это страницы каталога и товара, а уже после — главная страница. Обновленная мобильная версия демо-сайта получила 99 баллов от Google PageSpeed Insights. После добавления элементов, которые используют большинство интернет-магазинов, например Facebook Pixel и кастомных шрифтов, — оценка составила 80 баллов.

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

Работающие клиентские сайты получают оценки на уровне 70-90 баллов — это в два раза выше, чем до обновления мобильной версии. И это результат, которого мы хотели достичь — мобильная версия стала работать быстрее. Оценка PageSpeed Insights может стать еще больше, но это уже зависит от действий клиентов и того, как они будут использовать инструменты "Хорошопа". 

Рост продаж после обновления

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

На другом проекте коэффициент транзакций и количество страниц за сеанс выросли относительно десктопа, сравнявшись с ним. У третьего интернет-магазина, который мы изучали, коэффициент транзакций вырос на 30%. 

Обновление мобильной версии получили 2500 клиентов "Хорошопа", независимо от своего тарифа. Ознакомиться со всеми изменениями в новой версии вы можете посмотрев нашу презентацию на YouTube. А наши слова можно всегда проверить на практике — для этого у вас есть 14 дней бесплатного теста нашего продукта.