Редизайн интернет-магазина спортивных костюмов: увеличение скорости загрузки на 35%, конверсии — на 11,5%

Омская студия маркетинга, дизайна и разработки «31» рассказывает о том, как изменились метрики сайта компании «Русич Спорт» спустя месяц после обновления.

«Русич Спорт» — омская фирма, занимающаяся пошивом спортивных костюмов. На сайт производителя ежемесячно заходит 65–70 тысяч человек. В соцсетях компании — более 80 тысяч подписчиков и 500 отзывов, которые однозначно говорят: «Русич Спорт» — это суперкрутое качество.

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

Последний год мы занимаемся SEO-продвижением и, несмотря то что нам удалось войти в тройку по основным запросам «спортивный костюм Россия», «спортивный костюм СССР» в «Яндексе» и Google, мы упёрлись в потолок. Лучше всего проблема решалась новой структурой сайта.

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

По ходу работы появилась идея добавить классические страницы мужских и женских костюмов, и сейчас мы работаем над выходом на верх поисковой выдачи по запросам «мужские спортивные костюмы» и «женские спортивные костюмы». Планируемый прирост трафика — 100–150% в течение года.

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

В первую очередь AJAX был плох скоростью загрузки сайта.

Средняя скорость отрисовки сайта в течение месяца до релиза составляла 3,411 секунды, а после — 2,187 секунды (в период с 21 января по 16 февраля). Скорость увеличилась на 35%.

Время до загрузки DOM в течение месяца до релиза составляло 10,412 секунды, после — 8,426 секунды. Стало лучше на 19%.

В течение месяца до релиза время ответа сервера составляло 1,665 секунды, после — 0,982 секунды. Улучшение на 41%.

Процент отправки DNS-запросов в течение месяца до релиза составлял 37,6%, после — 20,3%. Улучшение на 41%.

За месяц до релиза время загрузки и парсинга HTML составляло 2,006 секунды, после — 1,072 секунды. Снижение на 46%.

Что касается Google PageSpeed Insights. До редизайна показатели для мобильных и компьютеров были 17 и 71 пункт соответственно.

Обновление увеличило скорость загрузки для мобильных устройств до 36 пунктов, для компьютеров — до 76-ти.

Прогресс заметен, но всё же сайт не в зелёной зоне.

Таблица размеров. Прежде в таблице размеров мужских костюмов были только российские обозначения (46–62), без указания разных ростовок. Сейчас же в таблице есть и международные размеры, и все варианты ростовок с пояснениями дополнительных мерок: объёма груди, талии, бёдер, длины внутренней части ноги и других.

Блоки соцсетей с указанием количества подписчиков. У «Русич Спорт» много поклонников, а прошлый сайт и виджеты соцсетей об этом никак не говорили. Мы сделали блоки с указанием всех соцсетей и количества подписчиков в них.

Десктопная версия сайта до редизайна

Мобильная версия сайта до редизайна

Проблем было очень много, особенно с мобильной вёрсткой. Поэтому в редизайне мы выбрали принципиальный подход: делать все макеты в трёх разрешениях для каждой страницы (1440 пикселей для ПК, 768 пикселей для планшетов и 320 пикселей для телефонов).

На пути к итоговому дизайну мы преодолели несколько итераций (шаг вперёд — два назад):

Первый рабочий вариант оказался сильно «перестилизованным».

Был вариант дизайна с новыми блоками, но старыми карточками товаров в каталоге.

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

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

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

В результате мы сделали лендинги для коллекций «Россия», «СССР», «Олимпиада 80», а также «Мужских спортивных костюмов» и «Женских спортивных костюмов». Дизайн первых трёх отличается другими блоками, а также фоновым видео на начальных экранах.

После лендингов коллекций мы решили заняться карточками товаров. Идея состояла в том, чтобы сделать их подробными. Нам хотелось донести ценность продукта и объяснить, почему он стоит своих денег (один из самых частых вопросов в соцсетях «Русич Спорт» — «а почему так дорого?»).

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

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

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

Основным сервисом сквозной веб-аналитики для «Русич Спорт» служит Roistat. Он удобен тем, что в отчёты автоматически добавляются данные отслеживания звонков. Так мы видим изменения конверсии всего проекта, а не только заявки с сайта.

Конверсия в заявки за последние четыре месяца:

Улучшения, которые мы планируем реализовать в ближайшее время:

#редизайн #лендинг