Интернет-магазин техники. Новые технологии и дизайн
Бигам — федеральная сеть Центров инструмента и техники, один из крупнейших поставщиков профессионального рабочего оборудования на отечественном рынке.
За время существования интернет-магазин Бигам накопил ряд технических проблем. Клиент выделили три основные:
- Сайт работал медленно, главная страница могла открываться до 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. Менеджеры Бигам не испытывают трудностей при работе с административной частью. Поисковые роботы индексируют всю представленную на сайте информацию о товарах, что помогает поддерживать ежемесячную посещаемость на уровне практически миллиона пользователей.