Flowwow — это высоконагруженный международный маркетплейс с огромным количеством товаров и пользователей. Основная задача, которую поставил передо мной бизнес, заключалась в улучшении пользовательского опыта в критически важных модулях: каталоге и корзине.
Ключевой проблемой была медленная загрузка и отзывчивость интерфейса, особенно на мобильных устройствах и при плохом интернете. Пользователи жаловались на "тормоза" при скролле каталога и долгую реакцию на добавление товаров в корзину. Это напрямую влияло на конверсию и удержание клиентов. Дополнительной сложностью была архитектура SSR (Server-Side Rendering), где возникали критические баги из-за рассинхрона состояния между сервером и клиентом (hydration mismatches), что приводило к "скачкам" контента и падению SEO-показателей.
Для решения поставленных задач я сфокусировался на нескольких ключевых направлениях:
Агрессивная оптимизация производительности: Внедрил комплекс мер по снижению времени до интерактивности (TTI). Это включало в себя выделение критического CSS, внедрение ленивой загрузки (lazy loading) для изображений и тяжелых компонентов, а также использование асинхронных компонентов Vue/Nuxt для отложенной загрузки невидимых частей интерфейса.
Архитектурная стабильность SSR: Переработал архитектуру модуля рендеринга контента, сделав его SSR-безопасным. Провел глубокий рефакторинг, чтобы устранить баги, вызванные синглтонами и глобальным состоянием, которые приводили к рассинхронизации серверного и клиентского рендера. Это кардинально повысило стабильность приложения.
Борьба с утечками памяти: Провел аудит и переписал проблемные участки кода. Заменил небезопасные setInterval на requestAnimationFrame для анимаций и таймеров, а также пересмотрел подход к подпискам на события, что полностью устранило утечки памяти и сделало приложение более стабильным при длительном использовании.
SEO-рендеринг: Оптимизировал процесс рендеринга для поисковых роботов, что улучшило индексацию страниц каталога и товаров.
Результатом проделанной работы стало значительное повышение производительности и стабильности ключевых модулей платформы. Нам удалось достичь измеримых улучшений:
Время до интерактивности (Time-to-Interactive) было сокращено на 40%, что существенно улучшило восприятие скорости работы сайта пользователями.
Полностью устранены критические баги, связанные с рассинхронизацией SSR, что обеспечило "бесшовный" опыт использования без дерганий контента.
Повышена стабильность приложения за счет устранения утечек памяти, особенно на страницах с большим количеством анимаций и динамическим контентом.
Улучшенные показатели Core Web Vitals положительно сказались на SEO-ранжировании страниц маркетплейса в поисковых системах.