Ускорение сайта на CMS 1С-Битрикс

Кейс переделки маркетплейса электротранспорта

Ускорение сайта на CMS 1С-Битрикс

1С-Битрикс — это мощная, профессиональная CMS от российской компании 1С. Основное преимущество продукта в том, что по умолчанию он предлагает инструменты для создания сайтов любой сложности. В зависимости от тарифа система содержит шаблоны с адаптивным дизайном, предусматривает интеграцию с платежными системами, службами доставки и многое другое.

Однако наличие множества инструментов еще не гарантирует того, что сайт на Битриксе будет быстро загружаться, привлекать пользователей и конвертировать их в покупателей. Для настройки и оптимизации работы всех компонентов, нужны опытные разработчики и UX-дизайнеры.

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

  • 01
    Проект

    Tarantasik.ru — первый специализированный маркетплейс электротранспорта

  • 02
    Проблема

    У сайта неудобный интерфейс, он плохо оптимизирован, долго загружается

  • 03
    Задача

    Ускорить загрузку страниц сайта и улучшить пользовательский опыт

  • 04
    Результаты
    • Оптимизировали сайт
    • Улучшили UX/UI-дизайн
    • Переделали интеграцию с amoCRM

Компания зарабатывает на продаже электротранспорта

Сайт tarantasik.ru — это маркетплейс, на котором производители электротранспорта размещают свои товары: электросамокаты, квадрокоптеры, гольф-кары и другие.

Сайт изначально создан на Битриксе. Это вполне оправданный выбор, ведь CMS хорошо подходит для масштабных, высоконагруженных проектов с множеством видов интеграции: информационных платформ, корпоративных порталов, маркетплейсов. Однако у сайта накопилось множество проблем. Заказчик обратился в OrbitSoft за их решением.

Сайт компании тормозит

Сайт был плохо оптимизирован, поэтому долго загружался. Мы провели аудит и выявили проблемы со структурой и UX-дизайном. Мы поставили перед собой следующие задачи:

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

Обновлением занималась команда из трех full-stack-разработчиков и проджект-менеджера. На отдельные задачи привлекались другие специалисты OrbitSoft: девопс, веб-дизайнер, маркетологи и тестировщики. Когда все специалисты из одной команды и умеют слаженно работать, на проект уходит гораздо меньше времени.

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

Оптимизировали сайт

Мы полностью переработали структуру сайта, улучшили его производительность и внешний вид. CMS 1С-Битрикс из коробки имеет много инструментов. Для создания конкретного сайта нужна только часть из них. Но нельзя просто «выключить» ненужные. Они все равно будут загружаться и отнимать ресурсы, хотя пользователи их и не увидят.

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

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

Ускорение сайта CDN

Ранее у 1С-Битрикс была возможность ускорять загрузку сайтов с помощью технологии CDN.

CDN (Сontent Delivery Network) — международная сеть серверов, географически распределенных по всему миру. Статический контент с изображениями, файлами в стиле CSS и скриптами JS доставляется от ближайшего к пользователю cdn-сервера. Это повышает скорость загрузки всей страницы на 30−70%.

Bitrix — самая первая российская CMS, интегрированная с сетью CDN на уровне самой платформы. Это означает, что владельцам сайтов на 1-С Битрикс не нужна дополнительная оптимизация, чтобы ускорить загрузку аудио и видеоконтента, игр и различного ПО.

С версии 22.100.0 модуля Облачные сервисы bitrixcloud эта функция отключена.

Улучшили UX/UI сайта

  • В интернет-магазине важно, чтобы пользователь мог быстро найти нужный товар, поэтому прежде всего мы взяли в работу функцию поиска и ускорение выдачи. Переделали фильтр: он стал легче и мощнее.
Скриншоты каталогов старого и нового сайтов
Слева — старый дизайн страницы каталога: настройки фильтра избыточны, описания соседних товаров в карточках сливаются друг с другом и с фоном страницы. Справа — новый дизайн: фильтр компактный, информативный и находится справа, в привычном для пользователей месте, товары четко разделены
  • Доработали механизм рекомендаций: сайт предлагает товары, похожие по цене и мощности. Когда посетитель заходит на сайт, система анализирует, какие товары он смотрит, и предлагает похожие товары из той же категории: с ценой +/− 10% и мощностью +/− 100 W от текущего товара. Если такие товары не найдены, поиск расширяется до +/− 20% по цене и +/− 200 W по мощности и так далее.
  • Улучшили отображение отзывов. Раньше в карточках были доступны только видеообзоры товара, а отзывы на магазин можно было почитать в отдельном разделе сайта. Теперь в каждой карточке доступны видеообзоры и видеоотзывы, а отзывы с Яндекса подтягиваются автоматически. Также мы добавили возможность оставлять отзывы на самом сайте к любому товару.
Скриншот блока с отзывами с Яндекс Маркета
Новые отзывы с Яндекса сразу появляются на сайте

О значении дизайна цифровых продуктов мы рассказали в статье «Как UX/UI увеличивает прибыль»

Переделали интеграцию с amoCRM

Раньше для интеграции использовался небольшой скрипт от amoCRM. Новым покупателям предлагалось заполнить форму. Контакты из нее передавались в CRM-систему. Как и любое универсальное решение, скрипт нельзя было настраивать. Например, нельзя было добавить опрос или возможность выбрать менеджера, который перезвонит.

Разработчики OrbitSoft написали свой компонент для 1C-Bitrix, использующий API от amoCRM и их же php-библиотеку. Он позволяет кастомизировать внешний вид форм и структурирует все заявки в файлы-логи: в любой момент можно посмотреть список заявок с начала работы логирования. Если при отправке формы у посетителя возникает ошибка, система отправляет письмо разработчикам, чтобы они оперативно решили возникшую проблему.

Проект на финальной стадии

Основной набор функций маркетплейса запущен и работает на полную мощность. Мы продолжаем работы по мелкой оптимизации сайта. Это непрерывный процесс: мы постоянно работаем над улучшениями, чтобы пользователям было удобно совершать покупки.

Кейс маркетплейса tarantasik.ru показывает, что какой бы функциональной ни была CMS, это только инструмент. Чтобы сайт был привлекательным и удобным для пользователей, нужно его оптимизировать, продумать структуру, проработать UX/UI-дизайн — иначе со временем проект придется переделывать. Опытные разработчики могут исправить чужие ошибки или разработать сайт на Битриксе с нуля, используя весь потенциал CMS.

Технический блок

Фреймворки:

Back-end: Bitrix Framework

Web front-end: Bitrix Framework

Языки программирования:

Back-end: PHP 8.0—8.1

Web front-end: Bitrix Framework / jQuery / vue. js / SCSS

Базы данных:

MySQL

Redis

Memcached

Платформы и стороннее ПО:

Docker, Docker Compose, Composer, Bitrix Environment на базе CentOS 7

В чем бы вы ни нуждались, мы можем помочь!

Расскажите нам, с какими проблемами вы сталкиваетесь в своем бизнесе. Мы с нетерпением ждем вашего ответа.

Получите ответ по смс

Ваше сообщение успешно отправлено!
Представьтесь пожалуйста
Укажите номер, на который придет ответ
Нажимая на кнопку, вы даете согласие
на обработку персональных данных.