Проекты

Ускорение сайта на 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

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

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

Перезвонить вам, чтобы ответить на вопросы?

Когда с вами связаться?

Связаться по телефону:+7 499 321-59-32

Нажимая на кнопку, я принимаю условия политики и пользовательского соглашения

Фото эксперта
Дмитрий

Проектный менеджер

Получите ответ на ваш вопрос в любимом мессенджере

Выберите удобный мессенджер и начните диалог прямо сейчас

Telegram WhatsApp

Рассчитать стоимость проекта

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

Напишите ваше имя
Укажите ваш email

Выберите удобный для вас способ связи

Мы сразу получим ваш запрос и поможем в решении проблемы

Написать в Telegram

Написать в WhatsApp

Позвонить нам