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

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

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

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

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

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

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

Приоритет нового интернет-магазина: скорость загрузки и фильтрации. В каталоге Бигам более 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 в Ярославле». Благодаря такой смене индексируется абсолютно вся информация по товару.

Анастасия Лебедева

менеджер проекта

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

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

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

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

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

• проверка потребления процессора, памяти, диска;
• мониторинг сетевых узлов через ICMP ping;
• проверка работы Apache, Nginx и MySQL (отвечают за сервер и базу данных).

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

• работа сервиса Elasticsearch;
• загрузка страниц разных типов (список товаров, карточка, раздел промо, бренды, поиск и т.д.);
• работа резервной копии;
• программа для защиты сервера от атак с фиксацией количества заблокированных пользователей;
• загрузка всех элементов главной страницы.

Юрий Спиридонов

исполнительный директор

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

Выводы

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

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