Как Helly Hansen мигрировал на Vercel и Next.js и увеличил продажи в Черную пятницу на 80%

Когда бренд с 150-летней историей решает обновить цифровую инфраструктуру, это всегда риск. Для Helly Hansen, мирового лидера в производстве технической одежды, этот риск оправдался: после миграции на Vercel и Next.js продажи в Черную пятницу выросли на 80%, а Core Web Vitals перешли из красной зоны в зеленую. Как норвежская компания, работающая на 38 рынках с несколькими брендами, включая HellyHansen.com, HHWorkwear.com и Musto.com, смогла преодолеть устаревший технологический стек и добиться таких результатов? Разбираемся в деталях.

Проблемы старой архитектуры

До миграции Helly Hansen использовал монолитную архитектуру, которая не справлялась с современными требованиями. Сайты загружались медленно, особенно на мобильных устройствах, что приводило к высокому проценту отказов. Пользователи жаловались на долгое время загрузки страниц каталога и корзины. Для e-commerce это критично: каждые 100 миллисекунд задержки снижают конверсию на 7%. Кроме того, старый стек затруднял внедрение новых функций и масштабирование в пиковые сезоны, такие как Черная пятница. Команда разработчиков тратила много времени на поддержку легаси-кода, вместо того чтобы создавать новые возможности для клиентов.

Почему выбрали Vercel и Next.js

Helly Hansen искал решение, которое обеспечило бы высокую производительность, масштабируемость и удобство для разработчиков. Vercel и Next.js предложили подход, основанный на JAMstack и серверном рендеринге. Это идеально подходило для e-commerce: статические страницы каталога можно было генерировать заранее с помощью статической генерации (SSG), а динамические страницы, такие как корзина и оформление заказа, обрабатывать на сервере (SSR). Инкрементальная статическая регенерация (ISR) позволяла обновлять контент без полной перестройки сайта. Vercel, в свою очередь, предоставил глобальную сеть доставки контента (CDN) с кэшированием на границе, что сократило время загрузки для пользователей по всему миру.

Как проходила миграция?

Миграция была поэтапной, чтобы минимизировать риски. Сначала на Next.js перевели отдельные страницы и разделы, например, страницы товаров и поиска. Затем постепенно заменяли старые компоненты на новые. Такой подход позволил сохранить работоспособность сайта в процессе перехода и быстро реагировать на возникающие проблемы. Команда разработчиков отметила, что новая архитектура упростила поддержку и ускорила выпуск новых функций. Например, время на внедрение A/B-тестов сократилось с недель до дней.

Результаты Black Friday Cyber Monday

В первую Черную пятницу после миграции Helly Hansen установил рекордные показатели. Рост продаж составил 80% по сравнению с предыдущим годом. Улучшение скорости загрузки страниц и стабильность инфраструктуры позволили справиться с пиковыми нагрузками без сбоев. Core Web Vitals значительно улучшились: LCP (Largest Contentful Paint) снизился на 40%, а CLS (Cumulative Layout Shift) достиг нуля. Это положительно сказалось не только на пользовательском опыте, но и на SEO: поисковые системы отдают предпочтение сайтам с хорошими показателями Core Web Vitals.

Технические подробности миграции

Helly Hansen использовал возможности Next.js, такие как SSG для страниц каталога и ISR для обновления контента без полной перестройки. Для динамических страниц, таких как корзина и оформление заказа, применялся SSR. Vercel обеспечил глобальную CDN с кэшированием на границе, что сократило время загрузки для пользователей в разных регионах. Разработчики также отметили, что новая архитектура упростила интеграцию с внешними сервисами, такими как платежные системы и ERP.

Влияние на бизнес и разработку

Для разработчиков миграция показала, что поэтапный переход на современный стек возможен без остановки бизнеса. Для e-commerce улучшение скорости напрямую влияет на конверсию и выручку, особенно в пиковые сезоны. Для конкурентов Helly Hansen получил технологическое преимущество, которое может быть сложно догнать без аналогичных инвестиций. Российские и СНГ-компании, работающие с международными рынками, могут обратить внимание на опыт Helly Hansen как пример успешной миграции.

Какие уроки можно извлечь из этого кейса?

Первый урок: не бойтесь поэтапной миграции. Helly Hansen не переписывал весь сайт сразу, а постепенно заменял компоненты. Второй урок: инвестиции в производительность окупаются. Улучшение Core Web Vitals привело к росту конверсии и продаж. Третий урок: выбирайте стек, который масштабируется. Vercel и Next.js позволили справиться с пиковыми нагрузками без дополнительных затрат на инфраструктуру.

Что будет дальше

Helly Hansen планирует продолжать развивать платформу на Next.js и Vercel, внедряя новые функции, такие как персонализация и A/B-тестирование. Компания также рассматривает расширение использования Serverless функций для обработки сложной логики. Ожидается, что другие ритейлеры последуют этому примеру, ускоряя переход на современные архитектуры.

Итог

Миграция Helly Hansen на Vercel и Next.js не только решила проблемы с производительностью, но и привела к значительному росту продаж. Этот кейс демонстрирует, что инвестиции в современный стек окупаются, особенно в критически важные периоды, такие как Черная пятница. Следите за обновлениями — возможно, скоро мы увидим аналогичные истории от других крупных брендов.