Новая версия спортивного интернет-магазина Кант

1. Вводная задача от заказчика, проблематика, цели

Группа компаний «КАНТ» включает в себя различные спортивные и горнолыжные комплексы и школы, сеть спортивных магазинов, крупнейшую в России дилерскую сеть спортивных товаров и ряд сопутствующих бизнесов.

Сайт интернет-магазина обладал сложной структурой и множеством подсистем, но за 10 лет работы его функциональность перестала соответствовать актуальным требованиям рынка. Нужно было модернизировать систему как со стороны бэкенда, так и фронтенда.

• Итого, мы выделили три направления работ:
• Обновление дизайна в соответствии с современными тенденциями, но с сохранением общей концепции;
• Ускорение работы: главная страница открывалась 4 секунды, каталог – 6-7 секунд, что очень долго для современного продающего сайта;
• Внедрение нового функционала – инструментов для сравнения товаров, автоматизации складской логистики, интерфейсы управления маркетинговыми кампаниями и т.д.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

• Для решения стоявших перед нами задач мы наметили следующие шаги:
• Переход на React.js;
• Новое API для фронтенд «сверху» 1С-Битрикс;
• Кеширование API – Varnish;
• Оптимизация существующего кода.

• Так мы смогли добиться:
• Десятикратного увеличения скорости работы публичной части;
• Повышения конверсии – на 30% выше в ноябре 2023 года по сравнению с ноябрем 2022;
• Существенного сокращения времени работы основных скриптов импорта данных: импорт цен – в 18 раз, импорт остатков – в 10 раз.

Ускорение работы сайта

Переход на React.js

Чтобы сделать сайт максимально быстрым, во фронтенд проекта была внедрена JavaScript-библиотека React.js. Ранее фронтенд полностью полагался на чистый Битрикс, в нём не использовались ни React.js, ни Vue.js, ни какая-либо ещё библиотека или фреймворк, реализующие парадигму Single Page Application (SPA, одностраничное приложение). SPA предполагает загрузку только одного HTML-документа, после чего её содержимое динамически обновляется без перезагрузки. Это ведёт к повышению скорости работы сайта, поскольку большая часть кода и ресурсов загружается только один раз.

Однако у SPA есть и недостаток: одностраничные приложения менее приспособлены для индексации поисковиками, а магазину это необходимо для сохранения позиций в выдаче и SEO-оптимизации. Поэтому такой подход оптимален для служебных страниц: корзины, оформления заказа, личного кабинета. Для страниц каталога мы использовали Server-Side Rendering (SSR, рендеринг на стороне сервера) и библиотеку Next.js.

Кеширование страниц

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

Оптимизация кода для исключения избыточности в запросах и количестве передаваемых данных.

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

Новый API

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

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

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

Новая функциональность

Во время работ над новой версией сайта был внедрён ряд новых технических решений и инструментов.

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

2. Автоматизация распределённой складской логистики. У компании множество складов в разных городах РФ, на них находятся различные товары, они могут попадать в один заказ. Внутренние системы не были приспособлены к обработке заказов, содержащих товары с разных складов, их приходилось вручную разделять на отдельные «отправления». В новой версии сайта такая распределённая логистика автоматизирована, заказ автоматически разбивается на «отправления». Это позволяет сотрудникам работать с ним штатными средствами интерфейса внутренней информационной системы.

3. Интерфейсы управления маркетинговыми кампаниями. Маркетинговый отдел периодически проводит кампании с различными скидочными механиками — например, третий товар бесплатно, бесплатная доставка при заказе определённых позиций или из определённых городов и т. д. Такие механики обладают достаточно разнообразной логикой и множеством дополнительных параметров. Раньше после разработки кампании маркетологи обращались к разработчикам, чтобы они написали соответствующий отдельный модуль бизнес-логики с «зашитыми» параметрами. В новой версии сайта управление подобными маркетинговыми механиками вынесено в наглядную и доступную панель администратора. В ней контент-менеджер или представитель отдела маркетинга могут настраивать условия, списки участвующих товаров, проценты скидок и все прочие параметры кампании.

4. Новые платёжные системы и финансовые инструменты. Кроме онлайн-оплаты были разработаны модули для таких продуктов, как рассрочка и кредит. Их можно заказать напрямую из корзины в процессе оформления заказа. Подготовлена платформа для лёгкой реализации новых финансовых инструментов как дополнительных возможностей системы.

3. Результаты сотрудничества

Благодаря решению в виде ускорителя HTTP Varnish скорость загрузки публичных страниц каталога и продуктовых позиций сократилась в десять раз; конверсия за год с ноября 2022-го по ноябрь 2023-го выросла на 30%; сократилось время работы основных скриптов импорта данных: цен — в 18 раз, остатков — в 10.

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

«В работе с коллегами из DD Planet чувствуется ответственность и знание своего дела: они не побоялись влезть в новый для них, полусделанный проект и довели его до конца. У команды зрелый подход, они могут формировать полноценные идеи, которые позволяют проекту развиваться. Всегда готовы подключиться в сложные моменты и внеурочное время»

Елена Рассказова, директор отдела интернет-продаж ГК «КАНТ»

4. Заключение

Обновление версии интернет-магазина "КАНТ" позволило достичь впечатляющих количественных показателей:

– В 10 раз быстрее работает публичная часть;

– На 30% выше конверсия в ноябре 2023 по сравнению с ноябрем 2022;

– Существенно сократилось время работы основных скриптов импорта данных: импорт цен – в 18 раз, импорт остатков – в 10 раз.

Существенные изменения заметила не только ГК "КАНТ", но и сами пользователи. Ведь после обновления магазин стал действительно быстрым, а интерфейсы более современными, при этом сохранив привычную для покупателей стилистику и общую канву. А новые сервисы сделали заказ товаров еще более понятным и комфортным.

Главная метрика качества проекта – отзывы Заказчика и опыт реальных клиентов.