Интернет-магазин техники Бигам. Новые технологии и дизайн

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

Бигам — федеральная сеть Центров инструмента и техники, один из крупнейших поставщиков профессионального рабочего оборудования на отечественном рынке.

За время существования интернет-магазин Бигам накопил ряд технических проблем. Клиент выделили три основные:

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

— Отслеживать состояние кода было проблематично. Интернет-магазин поддерживали несколько подрядчиков и правки в одном интерфейсе влияли на соседний, версионность не велась.

— Интернет-магазин был написан на устаревших технологиях.

Технический аудит наших специалистов подсветил и другие проблемы:

— некорректная настройка резервного копирования;

— ошибки в структуре баз данных;

— некорректная настройка кэширования;

— некорректная работа почтовой системы;

— низкая работоспособность;

— угрозы безопасности;

— неиспользуемые строки кода;

— визуальные ошибки.

Наши команды — Бигам и Ареал — приняли решение отказаться от старого сайта и создать новый интернет-магазин.

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

Выбираем технологии

Приоритет нового интернет-магазина: скорость загрузки и фильтрации. В каталоге Бигам более 40 000 sku, большинство — одинаковые товары с разными характеристиками. В ситуации с большим каталогом технологический стек лучше утверждать через технический прототип — проработанный бэкенд каталога с простым дизайном и загруженными товарами.

Мы остановились на связке 1С-Битрикс с Elasticsearch. Такая связка обеспечивает поиск по товарам и удобную административную часть. Внутри 1С-Битрикс комфортно создавать поля для товаров. Elasticsearch при работе с фильтрами быстро отдает данные. Тестирование прототипа показало хорошие результаты.

Frontend интернет-магазина работает на Nuxt js. Nuxt — фреймворк на основе Vue.js для создания универсальных приложений. Он предлагает принципиально другой подход к работе с frontend-ом сайта. Nuxt поддерживает SSR, server side rendering. Эта технология рендеринга сайта увеличила скорость загрузки и позволила поисковикам корректно индексировать страницы. С Битриксом Nuxt общается через rest api.

Обновляем дизайн

Основные покупатели Бигам — это мужчины строители 40+ лет, которые на объектах проверяют наличие товаров в магазине через смартфон. Для таких пользователей сайт должен быть простым, понятным, с легко читаемой навигацией.

Дизайнер выбрал:

— четкие крупные шрифты, без засечек;

— максимальный контраст считывания цветов;

— крупные кнопки для удобной работы со смартфона;

— отсутствие анимации, чтобы не отвлекать пользователя;

— интуитивно понятный интерфейс с акцентными точками на каждом шаге покупки.

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

Оптимизируем функции под seo

Интернет-магазин Бигам — современный проект по стандартам рынка. Адаптивность, умный поиск, сравнение, избранное, личный кабинет, возможность заказать доставку DPD или CDEK, эквайринг, онлайн-касса — все на своем месте.

Компания большое внимание уделяет seo. Это основной способ привлечения аудитории. Помимо интеграции с сервисами Mindbox, AdvCake, Admitad команды Ареал и Бигам продумали ряд особенностей, благодаря которым поисковики видят информацию по всем категориям каталога и разделам карточки товара.

Категории каталога

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

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

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

Карточка товара

По-умолчанию заголовок карточки товара — его название, например «Бензиновый триммер Энергомаш БТ-43 в Ярославле». При переходе между табами «Характеристики», «Рейтинги», «Где купить» заголовки меняются. «Характеристики бензиновый триммер Энергомаш БТ-43 в Ярославле», «Отзывы бензиновый триммер Энергомаш БТ-43 в Ярославле». Благодаря такой смене индексируется абсолютно вся информация по товару.

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

Обеспечиваем безопасность

Закончив разработку, мы взяли на сопровождение серверное окружение и инцидентную поддержку при аварийных ситуациях. В качестве сервиса-мониторинга работает Zabbix. Если обнаружена ошибка, то менеджеру и клиенту приходят оповещения в Телеграм.

Настроены стандартные метрики:

— проверка потребления процессора, памяти, диска;

— мониторинг сетевых узлов через ICMP ping;

— проверка работы Apache, Nginx и MySQL (отвечают за сервер и базу данных).

Нестандартные проверки:

— работа сервиса Elasticsearch;

— загрузка страниц разных типов (список товаров, карточка, раздел промо, бренды, поиск и т.д.);

— работа резервной копии;

— программа для защиты сервера от атак с фиксацией количества заблокированных пользователей;

— загрузка всех элементов главной страницы.

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

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

По данным сервиса pr-cy скорость загрузки HTML — 0.35 сек — быстрее чем 78% проверенных сайтов. Первая отрисовка контента занимает 0,6 сек.