Дизайн
Anton Kochenevsky
3462

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

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

В закладки
Аудио

А зачем редизайн-то?

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

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

Первая и главная причина — новая структура для SEO

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

Старая структура
Новая структура

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

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

Вторая причина — технический долг

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

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

Время до отрисовки (релиз отмечен на графике — 21 января, дата формирования отчета — 16 февраля)  Яндекс.Метрика

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

Время до загрузки DOM Яндекс.Метрика

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

Ответ сервера Яндекс.Метрика

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

Процент отправки DNS-запросов Яндекс.Метрика

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

Время загрузки и парсинга HTML Яндекс.Метрика

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

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

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

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

Новые функции

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

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

Улучшение дизайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Насколько выросла конверсия

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

Roistat

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

  • 22 октября — 21 ноября: 1,28%
  • 22 ноября — 21 декабря: 1,08%
  • 22 декабря — 21 января: 1,27%
  • 22 января — 21 февраля: 1,35% (месяц после редизайна)
  • средняя конверсия за последние три месяца: 1,21%
  • средняя конверсия за месяц после редизайна: 1,35%
  • прирост — 0,14 процентных пункта, или 11,5%

Планы на будущее

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Anton Kochenevsky", "author_type": "self", "tags": ["\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d","\u043b\u0435\u043d\u0434\u0438\u043d\u0433"], "comments": 20, "likes": 23, "favorites": 59, "is_advertisement": false, "subsite_label": "design", "id": 55599, "is_wide": false, "is_ugc": true, "date": "Mon, 25 Feb 2019 15:36:56 +0300", "is_special": false }
Объявление на vc.ru
Трибуна
Как я научился читать втрое быстрее и создал свой стартап Readlax
Что связывает школьные проверки техники чтения и повышение в должности? Почему непрочитанный список литературы на лето…
0
{ "id": 55599, "author_id": 47289, "diff_limit": 1000, "urls": {"diff":"\/comments\/55599\/get","add":"\/comments\/55599\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/55599"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
20 комментариев
Популярные
По порядку
Написать комментарий...
8

На объеме трафика в 60к ваш прирост конверсии статистически не значим :) Могли бы ничего не делать и примерно раз в три месяца показывать такой же прирост только благодаря дисперсии.

Ответить
3

Кейс моего знакомого:
Сделали редизайн, загружается медленнее на 30%, конверсия +150%.
Поднимают цены, потому что не справляются с количеством заказов.
Вывод?

Ответить
1

Вывод?

Пусть статью пишет как добился такой конверсии =)

Ответить
0

спрашивал, говорит, что не до статей, работать надо, заказы отгружать)

Ответить
1

Отличный отзыв) )

"Ulanbek Dunkanaev 21.02.2019 08:54
Как можно заказать"

Ответить
0

Щяс получеш

Ответить
0

Как одна десятая может быть статистически незначимой? :)

Ответить
1

Вы посчитали увеличение конверсии в свою пользу, это не совсем честно. Корректно было бы выкинуть декабрь вообще, так как там явная просадка по какой-то причине. Итого увеличение порядка 7%, что вобщем-то неплохо, если только эта цифра связана с редизайном. Может быть и просто флуктуация по иным причинам.

Ответить
0

Получается, сайт так на вордпрессе и остался? Почему?

Ответить
0

А CMS ничем не мешает сайту в данный момент. Но помогает: SEO, простота добавления товаров, уже собственные готовые интеграции с AMO и Roistat

Ответить
0

Сейчас не мешает, будет мешать потом. Низкие оценки скорости сайта - косвенное подтверждение.
Вордпресс - это не движок интернет-магазина, и "пинать труп" вечно невозможно.

К чему я это все - раз затеяли редизайн, можно было бы одновременно на нормальный движок уйти.

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

Если хочется на вордпрессе ИМ замутить, будьте готовы к костылям, а потом упретесь в 800-1000 товаров,и все, вордпресс кончился.

Ответить
1

А тут как раз дело в том, что не предвидится такое количество товаров. Но да, риски WP понимаем.

Ответить
0

Ого! студия маркетинга, а со статистикой не знакома....

Ответить
0

Сколько времени делали и сколько человек? Вёрстка и функционал.

Ответить
0

Почему редизайн это событие? Прорыва то нет... с таким же успехом можно было на 20% увеличить 5 метрик и получить не 10% а 100%.

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
0

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

Ответить
0

У нас есть данные конверсии прошлого года и период 21 декабря-21 января и 21 февраля-21 февраля были неизменными.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }