Как бесшовно переписать фронтенд с Битрикса на Nuxt и увеличить скорость загрузки интернет-магазина «РУСГЕОКОМ» в 3 раза

Когда речь заходит о сложных нишах и высоконагруженных проектах, кажется, что у заказчиков в этой сфере некие «особые» проблемы, которые не может решить студия с профессиональной командой менее чем в 100 разработчиков. На самом деле, это не так — проблемы те же самые, что у бизнеса поменьше: стек устаревает, интеграции с внешними системами отваливаются, time2market при разработке новых фич зашкаливает, вдобавок низкая конверсия, потому что страницы долго грузятся.

Почему мы?

У «Логемы» много проектов, где мы принесли пользу: интернет-магазины, корпоративные сайта, сервисы и b2b кабинеты. А еще у нас есть команда разработки — профессионалы с большим опытом, пониманием процессов и владением современным техническим стеком, которые умеют не только создавать что-то с нуля, но и улучшать то, что плохо работает. В кейсе расскажем, как мы прикрутили frontend-приложение на Nuxt к интернет-магазину на 1С-Битрикс, с посещаемостью 4000-5000 человек в сутки.

О клиенте

«РУСГЕОКОМ» — российский производитель и ведущий поставщик геодезического оборудования и контрольно-измерительных приборов.

Конкурентным преимуществом компании является высокая экспертность в своей бизнес-нише.

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

Поскольку «РУСГЕОКОМ» — официальный дистрибьютор ведущих мировых производителей, у компании много штатных сотрудников и много клиентов. Все эти люди много и часто взаимодействуют с сайтом поэтому критически важно сделать быстрый и отзывчивый пользовательский интерфейс.

Спойлер: у нас получилось! Сайт компании «РУСГЕОКОМ» — это настоящая комбайн с витриной, личным кабинетом и набором классных инструментов, которые бесперебойно решают бизнес-задачи заказчика. С их помощью наш клиент продает продукцию, сообщает о важных обновлениях, собирает данные, может тестировать гипотезы, и коммуницирует с дилерами и партнерами.

❛❛ На больших проектах бывает сложно выстроить коммуникацию сразу — нужно время, чтобы разобраться в том, кто и за какие процессы отвечает. Если у компании-разработчика верно настроены процессы, все получится. Мы в «Логеме» много работали над тем, чтобы всем участникам было комфортно: задачи ставились и сдавались в срок, но иногда накладки случались. Например, некоторые комментарии заказчика могли прийти после того, как уже был запущен процесс внедрения задачи. Это не страшно — не бойтесь обращаться к профессионалам, они всегда «разрулят» рабочие моменты, декомпозируют их и подскажут, какой путь будет наиболее эффективен. Коммуникация с клиентом — половина успеха. ❜❜

Александр Михайлов,
директор по развитию проектов компании «Логема»

Задача

1С-Битрикс — это классная и мощная CMS-система, однако шаблонизация из коробки оставляет желать лучшего. Мы нашли современное, универсальное, гибкое и масштабируемое решение. Фреймворк Nuxt.js позволяет создавать быстрые и отзывчивые веб-приложения с использованием современных методов оптимизации, предварительной загрузкой данных и SSR, которая чертовски важна для SEO. 

Все эти действия последовательно позволили существенно увеличить скорость его работы:

• в мобильной версии главной страницы в 3 раза — с 19 до 65;
• в мобильной версии для списка товаров в 5 раз — с 14 до 73;
• в мобильной версии товарных страниц в 5 раз — с 16 до 75;
• в десктопной версии главной страницы в 3 раза — с 29 до 93;
• в десктопной версии для списка товаров в 3 раза — с 31 до 89;
• в десктопной версии товарных страниц в 6 раз — с 16 до 97.

Чтобы добиться таких крутых результатов, нам требовалось значительно увеличить скорость загрузки страниц. Поскольку под капотом у нас классический 1С-Битрикс, пришлось решить несколько задач:

• Разработать frontend-приложение на Nuxt.js, сохранив весь текущий внешний вид и поведение. Здесь мы использовали режим серверного рендеринга для первого хита, чтобы данные, необходимые для SEO, приходили в отрендеренном виде с сервера, а затем перешли на клиентский рендеринг для последующих запросов;
• Заменить компонентный backend Битрикса на REST API, чтобы новый frontend мог получать данные;
• Переписать текущую логику работы каталога товаров, чтобы уменьшить количества запросов к базе данных и кратно увеличить скорость генерации ответа;
• Изобрести собственную технологию, аналогичную «Композитному сайту» от 1С-Битрикс. Для эффективного кэширования страниц для Nuxt с помощью Redis.

Дизайн сайта был сохранен во время переезда на Nuxt, но в настоящее время ведется работа по его изменению, и скоро будет выпущен релиз.

❛❛ Когда речь идет о режиме серверного рендеринга для первого хита и клиентского рендеринга — для последующих, нужно сделать оговорку, что мы имеем в виду не совсем классический вид перехода, когда каждый переход по ссылке запрашивает страницу с сервера. Сейчас страницы генерируются в основном, в браузере пользователя, с бэкэнда приходят только данные — так работает SPA-подход. Как это работает: когда пользователь заходит на сайт, сервер отправляет код SPA-приложения, которое затем запускается и работает в его браузере. В процессе работы SPA запрашивает данные с сервера при переходе между страницами, что позволяет достичь более быстрого рендера страниц и избежать перезагрузок страниц приложения до тех пор, пока не произойдет принудительная перезагрузка, например, обновление страницы в браузере или повторный вход на сайт. Такой подход облегчает процесс разработки и улучшает пользовательский опыт.

Однако SPA сталкивается с проблемами в SEO, поскольку поисковые роботы не могут интерпретировать клиентский JS, используемый в SPA, что сильно затрудняет индексацию страниц. Вот зачем нам режим серверного рендеринга (SSR). При SSR, при первом запросе пользователя, сервер формирует полностью отрендеренную HTML-страницу, включая контент SPA-приложения. Это позволяет поисковым роботам получить статический HTML-код страницы, который они могут проиндексировать.❜❜

Михаил Попов,
ведущий разработчик компании «Логема»

Почему Nuxt.js? Он позволяет создавать одностраничные приложения (SPA), которые обеспечивают более плавный и интерактивный пользовательский интерфейс без перезагрузки страницы. Так можно решить проблемы взаимодействия пользователей с сайтом, одновременно сделав его более привлекательным. Сам Nuxt.js предоставляет удобные инструменты для разработки и управления кодом. Его модульная структура, система маршрутизации и поддержка серверного рендеринга делают разработку и поддержку сайта более гибким и эффективным процессом. Еще один плюс — фреймворк основан на Vue.js, это актуальная технология, ее легко поддерживать и дорабатывать.

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

Подытожим

Переезд на Nuxt и ускорение системы — сложная, но решаемая задача. Это особенно важно, если ваш проект внезапно стал высоконагруженным или скоро станет таким. Разработка отдельного frontend приложения на современном стеке позволит использовать новые методы и инструменты оптимизации, увеличит скорость работы системы, и сократит time2market. Новые фичи будут быстрее попадать на бой, т.к. frontend и backend-разработчики, наконец, станут независимы друг от друга. Из процесса пропадет паразитный вид работ «применение верстки», вы сможете независимо тестировать и развивать отдельные части системы. А при достаточном количестве кеша, вы сможете незаметно включить или уронить backend, а Яндекс и пользователи этого не заметят.

Если ваш проект работает медленно, ненадежно, спотыкается и постоянно падает – приходите к нам, мы проведем технический аудит, найдем что было сделано не так, предложим решения и сделаем ваш сайт надежным инструментом для маркетинга и продаж!

P.S. Сейчас 2024 год, мы продолжаем работать с компанией «РУСГЕОКОМ». За 4 года мы решили несколько тысяч задач, больших и маленьких. Самые интересные и достойные внимания, мы сейчас описываем в отдельных статьях