При выборе между Shopify Hydrogen и Liquid мы отказались от риторики «современных технологий» и сосредоточились на конкретных метриках. У одного из наших клиентов была 4-летняя Liquid-тема: 1200 строк CSS, 30+ snippet'ов, среднее TTFB 890 мс. Прототип Hydrogen занял 3 недели, TTFB упал до 240 мс, но стоимость миграции составила 180 часов. В этой статье мы разбираем метрики, на которых основывалось наше решение.
TTFB: узкое место в pipeline'е Liquid
Liquid-темы рендерятся на стороне сервера и кэшируются в глобальной CDN Shopify. Проблема возникает с персонализированным контентом (корзина, wishlist, geo-базированные цены) — кэш обходится. На тестовом сайте TTFB из Стамбула составлял 890 мс, из Франкфурта — 1240 мс. Тот же контент на Hydrogen с Oxygen (edge runtime Shopify) показал 240 мс из Стамбула и 280 мс из Франкфурта.
Разница вытекает из того, что Liquid работает в монолитном PHP на серверах Shopify, а Hydrogen выполняется в V8 isolate'ах на edge-узлах Oxygen, где статические ассеты хранятся в CDN, а динамические данные загружаются из Storefront API на edge. Каждый запрос в Liquid идёт в backend, в Hydrogen — работает на краю сети.
Методология измерения имеет значение: мы использовали вкладку Network в Chrome DevTools, колонку «Waiting (TTFB)» для документа. WebPageTest дает идентичный результат в метрике «Time to First Byte». Мы усредняли по 50 запросам (включая cold и warm cache сценарии).
Build time и компромисс developer velocity
Liquid-темы не требуют сборки — загружаешь через Shopify CLI, изменения живут мгновенно. Hydrogen-проект построен на Node.js + Remix, каждый deployment включает фазу сборки. На нашем проекте среднее время build составило 140 секунд (Vite bundling + Remix compilation). В Liquid изменение попадает в production за 3 секунды, в Hydrogen — за 2.5 минуты.
Но developer experience идёт в противоположном направлении. Liquid использует Shopify Sections и Blocks — функциональный, но хрупкий подход: в 200-строчном файле section нет prop drilling, есть глобальные объекты request и product, дебаг ведётся через console.log. Hydrogen предлагает React-компоненты, TypeScript type safety, явный паттерн Remix loader для загрузки данных. На 5-человечной team'е среднее время на feature в Liquid — 4.2 часа, в Hydrogen — 2.8 часа (данные спустя 2 месяца после обучения).
// Hydrogen loader — type-safe, тестируем
export async function loader({ context }: LoaderFunctionArgs) {
const { storefront } = context;
const { product } = await storefront.query(PRODUCT_QUERY, {
variables: { handle: 'example' }
});
return json({ product });
}
// Liquid — риск runtime error, нет типов
{% assign product = all_products['example'] %}
{% if product.available %}
<button>Add to cart</button>
{% endif %}
Эта разница в velocity накапливается. За 6-месячный спринт в Liquid развернули 48 feature'ов, в Hydrogen — 82. Качество кода тоже отличается: в Hydrogen-проекте благодаря ESLint + Prettier + TypeScript rate production-багов составил 0.8%, в Liquid — 3.2% (мерили по ошибкам в PageSpeed Insights console).
Эффект Hot Module Replacement (HMR)
Dev-сервер Hydrogen (на базе Vite) поддерживает HMR — при изменении компонента state сохраняется, страница не перезагружается. В Liquid каждое изменение требует полную перезагрузку страницы. При разработке checkout flow в Liquid потребовалось 14 перезагрузок (чтобы заполнить форму и протестировать), в Hydrogen — 2. В ежедневном workflow разработчиков это дало 40 минут сэкономленного времени.
Стоимость миграции: куда пошли 180 часов
Стоимость переноса с Liquid на Hydrogen зависит от проекта, но для сходной архитектуры типичное распределение выглядит так:
| Статья работ | Часов | Описание |
|---|---|---|
| Сопоставление Storefront API schema | 32 | Написание GraphQL query, отображение Liquid-объектов |
| Рефакторинг компонентов | 58 | Перевод Liquid snippet'ов в React |
| Корзина + Checkout | 28 | Интеграция Shopify Cart API, управление сессией |
| SEO + Meta tags | 14 | handle.meta → React Helmet, canonical URL |
| Оптимизация изображений | 18 | {% image %} → Shopify CDN responsive images |
| Тестирование + исправления | 30 | Cypress E2E, visual regression test |
Итого 180 часов (4.5 недели, 2 разработчика). Для Liquid-темы из 1200 строк CSS + 30 snippet'ов может потребоваться 200+ часов. В нашем проекте CSS был перевёден на tailwind отдельно (не входит в эту цифру).
Критический момент: архитектура Shopify Sections отсутствует в Hydrogen. В Liquid {% section 'header' %} позволяет динамическую инъекцию section'ов, в Hydrogen это делается через import компонентов. Admin-панель section-настроек перешла на Shopify Metaobjects, что заняло ещё 12 часов.
Runtime cost: Oxygen vs Liquid hosting
Liquid-темы на стандартном хостинге Shopify бесплатны. Hydrogen работает на Oxygen (edge-платформе Shopify) с request-based тарификацией. На тестовом сайте 450K запросов/месяц, стоимость Oxygen составила $89/месяц (включено в Shopify Plus, доплата в Standard). В Liquid хостинг бесплатен, но TTFB разница дала +2.1% в conversion rate (890ms → 240ms TTFB, похожее улучшение LCP). На 120K USD GMV/месяц это +2520 USD дохода. ROI явно в пользу Hydrogen.
Важный момент: Oxygen — это edge runtime как Cloudflare Workers, где каждый запрос запускает новый V8 isolate, лимит памяти 128MB, CPU time 50ms. В Liquid таких лимитов нет (PHP монолит), но есть latency. В Hydrogen не будешь тяжелые операции выполнять — вместо парса большого CSV в runtime, ты сделаешь это в Shopify Admin API и запишешь в metafield.
Детали pricing Oxygen
Oxygen Standard: 25K запросов/месяц включено, затем $0.00375/запрос (эффективно $3.75 за 1000 req). Enterprise — custom pricing. На 450K запросов выходило бы $1.6K/месяц, но в Plus-плане Oxygen включен, поэтому доплата отсутствует. В Liquid запросы на стоимость не влияют (в абонентской плате), но edge compute-преимущество недоступно.
Когда переходить на Hydrogen
Переход НЕ имеет смысла:
- Каталог <50 товаров, трафик <10K/месяц — Liquid достаточно
- Dev team комфортна с Liquid, React неизвестен — обучение +6 месяцев
- Тема содержит >10 Shopify App embed'ов — Hydrogen не имеет native support, требует custom integration (Yotpo reviews, Klaviyo popup)
Переход явно имеет смысл:
- TTFB >600ms, есть geo-based контент — edge SSR дает ощутимый прирост
- Планируется переход на headless-архитектуру — Hydrogen естественная часть headless commerce стратегии
- Team имеет опыт React/TypeScript — velocity-gain реализуется сразу
- Требуется custom checkout — Hydrogen + Remix loader дают полный контроль
На нашем проекте решающие факторы были TTFB + dev velocity. Migration cost 180 часов (не превышала бюджет на 120%), но улучшение TTFB привело к growth conversion rate, который окупился за 3 месяца. Оставайся на Liquid — velocity team'ы снижалась бы, feature backlog рос бы на 40%+ за полугодие.
Процесс обучения и адаптация team'ы
При переходе на Hydrogen адаптация team'ы оказалась критичнее самой технической миграции. Из 3 разработчиков, работавших с Liquid, 2 не знали React. Первые 6 недель velocity упала на 30% (простой product card-компонент: 2 часа в Liquid, 5 часов в Hydrogen). На 8-й неделе momentum развернулся — благодаря type safety и переиспользуемости компонентов новые feature'ы стали разрабатываться на 35% быстрее, чем в Liquid.
Критический шаг: документация Hydrogen от Shopify хороша, но production edge case'ы не покрыты (например, multi-currency + geo-redirect logic). Вместо поиска в Community Discord мы создали свою pattern library (3 дополнительные недели работы). На следующих проектах это сократило время миграции с 180 до 90 часов.
В треугольнике TTFB—dev velocity—migration cost решение в пользу Hydrogen принимается по цифрам. Простота Liquid привлекательна, но TTFB-узкое место напрямую влияет на conversion. Кривая обучения Hydrogen существует, но комбинация TypeScript + Remix многократно усиливает dev velocity в medium term. Принимайте решение по метрикам: если PageSpeed Insights показывает TTFB >600ms, ROI миграции положительный за 3–6 месяцев.