[{"data":1,"prerenderedAt":1086},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-resheniya-po-cifram":13},{"i18nKey":4,"paths":5},"tech-002-2026-05",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-kennzahlen-entscheidung","\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-the-numbers-behind-our-decision","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros-detras-decision","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-numbers","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeri-della-decisione","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-resheniya-po-cifram","\u002Ftr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik",{"_path":11,"_dir":14,"_draft":15,"_partial":15,"_locale":16,"title":17,"description":18,"publishedAt":19,"modifiedAt":19,"category":14,"i18nKey":4,"tags":20,"readingTime":26,"author":27,"body":28,"_type":1080,"_id":1081,"_source":1082,"_file":1083,"_stem":1084,"_extension":1085},"tech",false,"","Shopify Hydrogen vs Liquid: На какие цифры мы опирались при выборе","TTFB 840ms → 180ms, время сборки 12м → 90с. Цифры за переходом на Hydrogen, компромиссы и расчет стоимости миграции.","2026-05-09",[21,22,23,24,25],"shopify-hydrogen","headless-commerce","web-performance","remix","ttfb",8,"Roibase",{"type":29,"children":30,"toc":1070},"root",[31,39,46,51,56,61,182,187,193,198,203,208,215,220,246,251,270,275,298,304,309,463,468,473,478,483,748,761,767,772,780,813,821,839,847,865,884,889,924,935,940,946,951,959,982,990,1024,1029,1034,1040,1045,1050,1064],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Семь лет мы использовали Liquid-темы Shopify. Когда лимиты на кастомизацию темы, фиксированное время ответа сервера и монолитный цикл развёртывания начали нас тормозить, на стол легло слово «headless». Но решение блокировал один вопрос: как измерить ROI перехода на Hydrogen? Эта статья — числовые детали нашего ответа. TTFB, время сборки, скорость разработки, стоимость миграции. Мы выбрали Hydrogen не потому, что это framework, а потому, что это дало измеримый прирост производительности.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"потолок-производительности-liquid",[44],{"type":37,"value":45},"Потолок производительности Liquid",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Liquid-движок тем Shopify возвращает отрендеренный на сервере HTML. На стороне сервера синтаксис Liquid парсится, делаются вызовы Storefront API, HTML собирается и отправляется клиенту. Такая архитектура проста и стабильна — но у неё есть потолок.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"На нашем Production-магазине медианный TTFB был 840ms (RUM-данные, Cloudflare Analytics). 95-й процентиль доходил до 1,4 секунды. Мы не можем контролировать время ответа сервера Shopify — это shared infrastructure. Даже если оптимизировать Liquid-шаблоны (ленивая загрузка неиспользуемых секций, сокращение snippet'ов), задержка со стороны сервера остаётся фиксированной.",{"type":32,"tag":33,"props":57,"children":58},{},[59],{"type":37,"value":60},"Время сборки — отдельная проблема. Когда вы меняете файл темы, вы пушите изменения через Shopify CLI. Среднее время развёртывания — 12 минут. В CI\u002FCD pipeline это означает ожидание между этапом staging и production. Скорость итераций A\u002FB-тестов падает. Velocity разработчиков ограничена.",{"type":32,"tag":62,"props":63,"children":67},"pre",{"className":64,"code":65,"language":66,"meta":16,"style":16},"language-bash shiki shiki-themes github-dark","# Liquid theme deploy (average)\nshopify theme push --store=production\n⏱ Upload: 4m 20s\n⏱ Processing: 7m 40s\n✅ Total: 12m 00s\n","bash",[68],{"type":32,"tag":69,"props":70,"children":71},"code",{"__ignoreMap":16},[72,84,111,135,158],{"type":32,"tag":73,"props":74,"children":77},"span",{"class":75,"line":76},"line",1,[78],{"type":32,"tag":73,"props":79,"children":81},{"style":80},"--shiki-default:#6A737D",[82],{"type":37,"value":83},"# Liquid theme deploy (average)\n",{"type":32,"tag":73,"props":85,"children":87},{"class":75,"line":86},2,[88,94,100,105],{"type":32,"tag":73,"props":89,"children":91},{"style":90},"--shiki-default:#B392F0",[92],{"type":37,"value":93},"shopify",{"type":32,"tag":73,"props":95,"children":97},{"style":96},"--shiki-default:#9ECBFF",[98],{"type":37,"value":99}," theme",{"type":32,"tag":73,"props":101,"children":102},{"style":96},[103],{"type":37,"value":104}," push",{"type":32,"tag":73,"props":106,"children":108},{"style":107},"--shiki-default:#79B8FF",[109],{"type":37,"value":110}," --store=production\n",{"type":32,"tag":73,"props":112,"children":114},{"class":75,"line":113},3,[115,120,125,130],{"type":32,"tag":73,"props":116,"children":117},{"style":90},[118],{"type":37,"value":119},"⏱",{"type":32,"tag":73,"props":121,"children":122},{"style":96},[123],{"type":37,"value":124}," Upload:",{"type":32,"tag":73,"props":126,"children":127},{"style":96},[128],{"type":37,"value":129}," 4m",{"type":32,"tag":73,"props":131,"children":132},{"style":96},[133],{"type":37,"value":134}," 20s\n",{"type":32,"tag":73,"props":136,"children":138},{"class":75,"line":137},4,[139,143,148,153],{"type":32,"tag":73,"props":140,"children":141},{"style":90},[142],{"type":37,"value":119},{"type":32,"tag":73,"props":144,"children":145},{"style":96},[146],{"type":37,"value":147}," Processing:",{"type":32,"tag":73,"props":149,"children":150},{"style":96},[151],{"type":37,"value":152}," 7m",{"type":32,"tag":73,"props":154,"children":155},{"style":96},[156],{"type":37,"value":157}," 40s\n",{"type":32,"tag":73,"props":159,"children":161},{"class":75,"line":160},5,[162,167,172,177],{"type":32,"tag":73,"props":163,"children":164},{"style":90},[165],{"type":37,"value":166},"✅",{"type":32,"tag":73,"props":168,"children":169},{"style":96},[170],{"type":37,"value":171}," Total:",{"type":32,"tag":73,"props":173,"children":174},{"style":96},[175],{"type":37,"value":176}," 12m",{"type":32,"tag":73,"props":178,"children":179},{"style":96},[180],{"type":37,"value":181}," 00s\n",{"type":32,"tag":33,"props":183,"children":184},{},[185],{"type":37,"value":186},"Компромисс Liquid таков: простота развёртывания, ноль управления инфраструктурой — но нет контроля над производительностью, итерация медленная.",{"type":32,"tag":40,"props":188,"children":190},{"id":189},"техническое-обещание-hydrogen",[191],{"type":37,"value":192},"Техническое обещание Hydrogen",{"type":32,"tag":33,"props":194,"children":195},{},[196],{"type":37,"value":197},"Hydrogen — это headless framework Shopify, построенный на Remix. React Server Components, потоковый SSR, развёртывание на edge. Архитектурное отличие в следующем: в Liquid сервер Shopify рендерит HTML. В Hydrogen ты развёртываешь собственный edge-сервер (Oxygen, Cloudflare, Vercel). Ты напрямую вызываешь Storefront API, потоком отправляешь ответ в дерево компонентов.",{"type":32,"tag":33,"props":199,"children":200},{},[201],{"type":37,"value":202},"Обещание TTFB: поскольку ты рендеришь с edge-ноды, latency-сервера Shopify исчезает. При развёртывании на Cloudflare Workers медианный TTFB падает в диапазон 100–200ms (latency POP Cloudflare'а + RTT Storefront API). Обещание времени сборки: сборка на Vite, incremental deploy, под 2 минуты.",{"type":32,"tag":33,"props":204,"children":205},{},[206],{"type":37,"value":207},"Но кроме обещаний есть стоимость: effort миграции, learning curve разработчиков, ответственность за инфраструктуру. Мы шли дальше, численно моделируя эти компромиссы.",{"type":32,"tag":209,"props":210,"children":212},"h3",{"id":211},"методология-бенчмарка",[213],{"type":37,"value":214},"Методология бенчмарка",{"type":32,"tag":33,"props":216,"children":217},{},[218],{"type":37,"value":219},"Мы развернули две среды:",{"type":32,"tag":221,"props":222,"children":223},"ol",{},[224,236],{"type":32,"tag":225,"props":226,"children":227},"li",{},[228,234],{"type":32,"tag":229,"props":230,"children":231},"strong",{},[232],{"type":37,"value":233},"Liquid Baseline:",{"type":37,"value":235}," Production-магазин, fork темы Dawn, 80+ секций, proxy Cloudflare (cache bypass)",{"type":32,"tag":225,"props":237,"children":238},{},[239,244],{"type":32,"tag":229,"props":240,"children":241},{},[242],{"type":37,"value":243},"Hydrogen Prototype:",{"type":37,"value":245}," то же дерево компонентов homepage, развёртывание на Cloudflare Workers, Storefront API версия 2024-01",{"type":32,"tag":33,"props":247,"children":248},{},[249],{"type":37,"value":250},"Setup тестирования:",{"type":32,"tag":252,"props":253,"children":254},"ul",{},[255,260,265],{"type":32,"tag":225,"props":256,"children":257},{},[258],{"type":37,"value":259},"WebPageTest (локация Dulles, Moto G4, 3G Fast)",{"type":32,"tag":225,"props":261,"children":262},{},[263],{"type":37,"value":264},"медианные значения из 3 прогонов",{"type":32,"tag":225,"props":266,"children":267},{},[268],{"type":37,"value":269},"холодный state кеша (flush кеша перед каждым тестом)",{"type":32,"tag":33,"props":271,"children":272},{},[273],{"type":37,"value":274},"Метрики:",{"type":32,"tag":252,"props":276,"children":277},{},[278,283,288,293],{"type":32,"tag":225,"props":279,"children":280},{},[281],{"type":37,"value":282},"TTFB (Time to First Byte)",{"type":32,"tag":225,"props":284,"children":285},{},[286],{"type":37,"value":287},"LCP (Largest Contentful Paint)",{"type":32,"tag":225,"props":289,"children":290},{},[291],{"type":37,"value":292},"TBT (Total Blocking Time)",{"type":32,"tag":225,"props":294,"children":295},{},[296],{"type":37,"value":297},"время сборки (измерено в CI\u002FCD)",{"type":32,"tag":40,"props":299,"children":301},{"id":300},"сравнение-производительности",[302],{"type":37,"value":303},"Сравнение производительности",{"type":32,"tag":33,"props":305,"children":306},{},[307],{"type":37,"value":308},"Результаты (медиана из 3 прогонов):",{"type":32,"tag":310,"props":311,"children":312},"table",{},[313,342],{"type":32,"tag":314,"props":315,"children":316},"thead",{},[317],{"type":32,"tag":318,"props":319,"children":320},"tr",{},[321,327,332,337],{"type":32,"tag":322,"props":323,"children":324},"th",{},[325],{"type":37,"value":326},"Метрика",{"type":32,"tag":322,"props":328,"children":329},{},[330],{"type":37,"value":331},"Liquid",{"type":32,"tag":322,"props":333,"children":334},{},[335],{"type":37,"value":336},"Hydrogen",{"type":32,"tag":322,"props":338,"children":339},{},[340],{"type":37,"value":341},"Разница",{"type":32,"tag":343,"props":344,"children":345},"tbody",{},[346,376,405,434],{"type":32,"tag":318,"props":347,"children":348},{},[349,358,363,368],{"type":32,"tag":350,"props":351,"children":352},"td",{},[353],{"type":32,"tag":229,"props":354,"children":355},{},[356],{"type":37,"value":357},"TTFB",{"type":32,"tag":350,"props":359,"children":360},{},[361],{"type":37,"value":362},"840ms",{"type":32,"tag":350,"props":364,"children":365},{},[366],{"type":37,"value":367},"180ms",{"type":32,"tag":350,"props":369,"children":370},{},[371],{"type":32,"tag":229,"props":372,"children":373},{},[374],{"type":37,"value":375},"−79%",{"type":32,"tag":318,"props":377,"children":378},{},[379,387,392,397],{"type":32,"tag":350,"props":380,"children":381},{},[382],{"type":32,"tag":229,"props":383,"children":384},{},[385],{"type":37,"value":386},"LCP",{"type":32,"tag":350,"props":388,"children":389},{},[390],{"type":37,"value":391},"2.4s",{"type":32,"tag":350,"props":393,"children":394},{},[395],{"type":37,"value":396},"1.1s",{"type":32,"tag":350,"props":398,"children":399},{},[400],{"type":32,"tag":229,"props":401,"children":402},{},[403],{"type":37,"value":404},"−54%",{"type":32,"tag":318,"props":406,"children":407},{},[408,416,421,426],{"type":32,"tag":350,"props":409,"children":410},{},[411],{"type":32,"tag":229,"props":412,"children":413},{},[414],{"type":37,"value":415},"TBT",{"type":32,"tag":350,"props":417,"children":418},{},[419],{"type":37,"value":420},"680ms",{"type":32,"tag":350,"props":422,"children":423},{},[424],{"type":37,"value":425},"220ms",{"type":32,"tag":350,"props":427,"children":428},{},[429],{"type":32,"tag":229,"props":430,"children":431},{},[432],{"type":37,"value":433},"−68%",{"type":32,"tag":318,"props":435,"children":436},{},[437,445,450,455],{"type":32,"tag":350,"props":438,"children":439},{},[440],{"type":32,"tag":229,"props":441,"children":442},{},[443],{"type":37,"value":444},"Время сборки",{"type":32,"tag":350,"props":446,"children":447},{},[448],{"type":37,"value":449},"12m 00s",{"type":32,"tag":350,"props":451,"children":452},{},[453],{"type":37,"value":454},"1m 30s",{"type":32,"tag":350,"props":456,"children":457},{},[458],{"type":32,"tag":229,"props":459,"children":460},{},[461],{"type":37,"value":462},"−88%",{"type":32,"tag":33,"props":464,"children":465},{},[466],{"type":37,"value":467},"Снижение TTFB совпало с ожиданиями. На Hydrogen edge-нода Cloudflare Workers достигает Storefront API с RTT 40–60ms (CDN Shopify уже на Cloudflare). На Liquid сервер Shopify делает парсинг Liquid + вызов API + сборку HTML — минимум 600ms overhead.",{"type":32,"tag":33,"props":469,"children":470},{},[471],{"type":37,"value":472},"Прирост LCP идёт из потокового SSR. Hydrogen отправляет первый байт рано и потоком передаёт HTML. Critical content (герой-изображение, ATF-сетка товаров) рендерится в первую очередь, below-the-fold ленивой загрузкой. На Liquid рендер блокирующий — страница не отправляется, пока вся не готова.",{"type":32,"tag":33,"props":474,"children":475},{},[476],{"type":37,"value":477},"Снижение TBT происходит от размера bundle'а + оптимизации гидрации. На Hydrogen мы использовали React Server Components — client-side JS bundle 120KB (gzip). На Liquid-теме jQuery + custom скрипты это 340KB. Время гидрации упало.",{"type":32,"tag":33,"props":479,"children":480},{},[481],{"type":37,"value":482},"Разница во времени сборки прямо влияет на velocity разработки. 90 секунд вместо 12 минут — если вы делаете 10 развёртываний в день, это 115 минут экономии. CI\u002FCD pipeline ускоряется, cycle A\u002FB-тестирования сокращается.",{"type":32,"tag":62,"props":484,"children":488},{"className":485,"code":486,"language":487,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Пример потокового SSR на Hydrogen (Remix loader)\nexport async function loader({ context }: LoaderFunctionArgs) {\n  const { storefront } = context;\n  \n  const productsPromise = storefront.query(PRODUCTS_QUERY);\n  const collectionsPromise = storefront.query(COLLECTIONS_QUERY);\n  \n  \u002F\u002F Stream: первый ответ возвращается сразу\n  return defer({\n    products: productsPromise,\n    collections: collectionsPromise,\n  });\n}\n","typescript",[489],{"type":32,"tag":69,"props":490,"children":491},{"__ignoreMap":16},[492,500,556,589,597,639,677,685,693,712,721,730,739],{"type":32,"tag":73,"props":493,"children":494},{"class":75,"line":76},[495],{"type":32,"tag":73,"props":496,"children":497},{"style":80},[498],{"type":37,"value":499},"\u002F\u002F Пример потокового SSR на Hydrogen (Remix loader)\n",{"type":32,"tag":73,"props":501,"children":502},{"class":75,"line":86},[503,509,514,519,524,530,536,541,546,551],{"type":32,"tag":73,"props":504,"children":506},{"style":505},"--shiki-default:#F97583",[507],{"type":37,"value":508},"export",{"type":32,"tag":73,"props":510,"children":511},{"style":505},[512],{"type":37,"value":513}," async",{"type":32,"tag":73,"props":515,"children":516},{"style":505},[517],{"type":37,"value":518}," function",{"type":32,"tag":73,"props":520,"children":521},{"style":90},[522],{"type":37,"value":523}," loader",{"type":32,"tag":73,"props":525,"children":527},{"style":526},"--shiki-default:#E1E4E8",[528],{"type":37,"value":529},"({ ",{"type":32,"tag":73,"props":531,"children":533},{"style":532},"--shiki-default:#FFAB70",[534],{"type":37,"value":535},"context",{"type":32,"tag":73,"props":537,"children":538},{"style":526},[539],{"type":37,"value":540}," }",{"type":32,"tag":73,"props":542,"children":543},{"style":505},[544],{"type":37,"value":545},":",{"type":32,"tag":73,"props":547,"children":548},{"style":90},[549],{"type":37,"value":550}," LoaderFunctionArgs",{"type":32,"tag":73,"props":552,"children":553},{"style":526},[554],{"type":37,"value":555},") {\n",{"type":32,"tag":73,"props":557,"children":558},{"class":75,"line":113},[559,564,569,574,579,584],{"type":32,"tag":73,"props":560,"children":561},{"style":505},[562],{"type":37,"value":563},"  const",{"type":32,"tag":73,"props":565,"children":566},{"style":526},[567],{"type":37,"value":568}," { ",{"type":32,"tag":73,"props":570,"children":571},{"style":107},[572],{"type":37,"value":573},"storefront",{"type":32,"tag":73,"props":575,"children":576},{"style":526},[577],{"type":37,"value":578}," } ",{"type":32,"tag":73,"props":580,"children":581},{"style":505},[582],{"type":37,"value":583},"=",{"type":32,"tag":73,"props":585,"children":586},{"style":526},[587],{"type":37,"value":588}," context;\n",{"type":32,"tag":73,"props":590,"children":591},{"class":75,"line":137},[592],{"type":32,"tag":73,"props":593,"children":594},{"style":526},[595],{"type":37,"value":596},"  \n",{"type":32,"tag":73,"props":598,"children":599},{"class":75,"line":160},[600,604,609,614,619,624,629,634],{"type":32,"tag":73,"props":601,"children":602},{"style":505},[603],{"type":37,"value":563},{"type":32,"tag":73,"props":605,"children":606},{"style":107},[607],{"type":37,"value":608}," productsPromise",{"type":32,"tag":73,"props":610,"children":611},{"style":505},[612],{"type":37,"value":613}," =",{"type":32,"tag":73,"props":615,"children":616},{"style":526},[617],{"type":37,"value":618}," storefront.",{"type":32,"tag":73,"props":620,"children":621},{"style":90},[622],{"type":37,"value":623},"query",{"type":32,"tag":73,"props":625,"children":626},{"style":526},[627],{"type":37,"value":628},"(",{"type":32,"tag":73,"props":630,"children":631},{"style":107},[632],{"type":37,"value":633},"PRODUCTS_QUERY",{"type":32,"tag":73,"props":635,"children":636},{"style":526},[637],{"type":37,"value":638},");\n",{"type":32,"tag":73,"props":640,"children":642},{"class":75,"line":641},6,[643,647,652,656,660,664,668,673],{"type":32,"tag":73,"props":644,"children":645},{"style":505},[646],{"type":37,"value":563},{"type":32,"tag":73,"props":648,"children":649},{"style":107},[650],{"type":37,"value":651}," collectionsPromise",{"type":32,"tag":73,"props":653,"children":654},{"style":505},[655],{"type":37,"value":613},{"type":32,"tag":73,"props":657,"children":658},{"style":526},[659],{"type":37,"value":618},{"type":32,"tag":73,"props":661,"children":662},{"style":90},[663],{"type":37,"value":623},{"type":32,"tag":73,"props":665,"children":666},{"style":526},[667],{"type":37,"value":628},{"type":32,"tag":73,"props":669,"children":670},{"style":107},[671],{"type":37,"value":672},"COLLECTIONS_QUERY",{"type":32,"tag":73,"props":674,"children":675},{"style":526},[676],{"type":37,"value":638},{"type":32,"tag":73,"props":678,"children":680},{"class":75,"line":679},7,[681],{"type":32,"tag":73,"props":682,"children":683},{"style":526},[684],{"type":37,"value":596},{"type":32,"tag":73,"props":686,"children":687},{"class":75,"line":26},[688],{"type":32,"tag":73,"props":689,"children":690},{"style":80},[691],{"type":37,"value":692},"  \u002F\u002F Stream: первый ответ возвращается сразу\n",{"type":32,"tag":73,"props":694,"children":696},{"class":75,"line":695},9,[697,702,707],{"type":32,"tag":73,"props":698,"children":699},{"style":505},[700],{"type":37,"value":701},"  return",{"type":32,"tag":73,"props":703,"children":704},{"style":90},[705],{"type":37,"value":706}," defer",{"type":32,"tag":73,"props":708,"children":709},{"style":526},[710],{"type":37,"value":711},"({\n",{"type":32,"tag":73,"props":713,"children":715},{"class":75,"line":714},10,[716],{"type":32,"tag":73,"props":717,"children":718},{"style":526},[719],{"type":37,"value":720},"    products: productsPromise,\n",{"type":32,"tag":73,"props":722,"children":724},{"class":75,"line":723},11,[725],{"type":32,"tag":73,"props":726,"children":727},{"style":526},[728],{"type":37,"value":729},"    collections: collectionsPromise,\n",{"type":32,"tag":73,"props":731,"children":733},{"class":75,"line":732},12,[734],{"type":32,"tag":73,"props":735,"children":736},{"style":526},[737],{"type":37,"value":738},"  });\n",{"type":32,"tag":73,"props":740,"children":742},{"class":75,"line":741},13,[743],{"type":32,"tag":73,"props":744,"children":745},{"style":526},[746],{"type":37,"value":747},"}\n",{"type":32,"tag":33,"props":749,"children":750},{},[751,753,759],{"type":37,"value":752},"API ",{"type":32,"tag":69,"props":754,"children":756},{"className":755},[],[757],{"type":37,"value":758},"defer",{"type":37,"value":760}," потоком передаёт promise'ы. Клиент получает первый HTML, и по мере готовности данных страница прогрессивно рендерится. TTFB остаётся низким.",{"type":32,"tag":40,"props":762,"children":764},{"id":763},"расчет-стоимости-миграции",[765],{"type":37,"value":766},"Расчет стоимости миграции",{"type":32,"tag":33,"props":768,"children":769},{},[770],{"type":37,"value":771},"Прирост производительности очевиден — но какова цена перехода? Мы сделали такую разбивку:",{"type":32,"tag":33,"props":773,"children":774},{},[775],{"type":32,"tag":229,"props":776,"children":777},{},[778],{"type":37,"value":779},"Effort разработки:",{"type":32,"tag":252,"props":781,"children":782},{},[783,788,793,798,803],{"type":32,"tag":225,"props":784,"children":785},{},[786],{"type":37,"value":787},"миграция компонентов темы → Hydrogen: 160 часов (2 senior-разработчика, 4 недели)",{"type":32,"tag":225,"props":789,"children":790},{},[791],{"type":37,"value":792},"интеграция Storefront API (переписывание GraphQL-запросов): 40 часов",{"type":32,"tag":225,"props":794,"children":795},{},[796],{"type":37,"value":797},"setup CI\u002FCD pipeline (Cloudflare Workers): 16 часов",{"type":32,"tag":225,"props":799,"children":800},{},[801],{"type":37,"value":802},"QA + исправление edge case'ов: 24 часа",{"type":32,"tag":225,"props":804,"children":805},{},[806,811],{"type":32,"tag":229,"props":807,"children":808},{},[809],{"type":37,"value":810},"Итого:",{"type":37,"value":812}," 240 часов",{"type":32,"tag":33,"props":814,"children":815},{},[816],{"type":32,"tag":229,"props":817,"children":818},{},[819],{"type":37,"value":820},"Стоимость инфраструктуры:",{"type":32,"tag":252,"props":822,"children":823},{},[824,829,834],{"type":32,"tag":225,"props":825,"children":826},{},[827],{"type":37,"value":828},"Cloudflare Workers: $5\u002Fмес (бесплатно до 100K запросов — у нас 80K\u002Fмес)",{"type":32,"tag":225,"props":830,"children":831},{},[832],{"type":37,"value":833},"Oxygen (edge-платформа Shopify): $20\u002Fмес начальный tier",{"type":32,"tag":225,"props":835,"children":836},{},[837],{"type":37,"value":838},"Мы выбрали Cloudflare — уже использовали Cloudflare proxy",{"type":32,"tag":33,"props":840,"children":841},{},[842],{"type":32,"tag":229,"props":843,"children":844},{},[845],{"type":37,"value":846},"Overhead обслуживания:",{"type":32,"tag":252,"props":848,"children":849},{},[850,855,860],{"type":32,"tag":225,"props":851,"children":852},{},[853],{"type":37,"value":854},"версия Hydrogen должна обновляться каждые 6 месяцев (отслеживание Remix upstream)",{"type":32,"tag":225,"props":856,"children":857},{},[858],{"type":37,"value":859},"learning curve разработчиков: требуется опыт React + Remix в команде",{"type":32,"tag":225,"props":861,"children":862},{},[863],{"type":37,"value":864},"на Liquid мы использовали шаблон Shopify Theme Store — на Hydrogen пользовательская разработка",{"type":32,"tag":33,"props":866,"children":867},{},[868,870,875,877,882],{"type":37,"value":869},"Полная one-time стоимость миграции: ",{"type":32,"tag":229,"props":871,"children":872},{},[873],{"type":37,"value":874},"240 часов × $80\u002Fчас = $19,200",{"type":37,"value":876},". Инфраструктура в год: ",{"type":32,"tag":229,"props":878,"children":879},{},[880],{"type":37,"value":881},"$60",{"type":37,"value":883},".",{"type":32,"tag":33,"props":885,"children":886},{},[887],{"type":37,"value":888},"Как мы моделировали прирыль? Два направления:",{"type":32,"tag":221,"props":890,"children":891},{},[892,908],{"type":32,"tag":225,"props":893,"children":894},{},[895,900,902,907],{"type":32,"tag":229,"props":896,"children":897},{},[898],{"type":37,"value":899},"Влияние на Conversion Rate:",{"type":37,"value":901}," известна корреляция Web Vitals с conversion rate (исследование Google\u002FDeloitte: снижение LCP на 0.1s = подъём конверсии на 1–2%). У нас LCP упал на 1.3s — консервативный estimate 1.5% подъёма. На месячной выручке $200K это = $3K\u002Fмес. Годово ",{"type":32,"tag":229,"props":903,"children":904},{},[905],{"type":37,"value":906},"$36K",{"type":37,"value":883},{"type":32,"tag":225,"props":909,"children":910},{},[911,916,918,923],{"type":32,"tag":229,"props":912,"children":913},{},[914],{"type":37,"value":915},"Velocity разработки:",{"type":37,"value":917}," время сборки упало на 88%. Команда делает 40 развёртываний в месяц (CI\u002FCD). Каждое развёртывание экономит 10.5 минут = в месяц 420 минут = 7 часов. По ставке senior-разработчика $80\u002Fчас экономия $560\u002Fмес. Годово ",{"type":32,"tag":229,"props":919,"children":920},{},[921],{"type":37,"value":922},"$6.7K",{"type":37,"value":883},{"type":32,"tag":33,"props":925,"children":926},{},[927,929,934],{"type":37,"value":928},"Период окупаемости: $19,200 \u002F ($36K + $6.7K) = ",{"type":32,"tag":229,"props":930,"children":931},{},[932],{"type":37,"value":933},"5.4 месяца",{"type":37,"value":883},{"type":32,"tag":33,"props":936,"children":937},{},[938],{"type":37,"value":939},"Этот расчет justify'л миграцию. Прирост производительности + рост velocity разработки окупают затраты миграции за 6 месяцев.",{"type":32,"tag":40,"props":941,"children":943},{"id":942},"компромиссы-и-границы",[944],{"type":37,"value":945},"Компромиссы и границы",{"type":32,"tag":33,"props":947,"children":948},{},[949],{"type":37,"value":950},"Hydrogen — не правильный выбор для каждого магазина. В этих сценариях Liquid лучше:",{"type":32,"tag":33,"props":952,"children":953},{},[954],{"type":32,"tag":229,"props":955,"children":956},{},[957],{"type":37,"value":958},"Liquid должен остаться:",{"type":32,"tag":252,"props":960,"children":961},{},[962,967,972,977],{"type":32,"tag":225,"props":963,"children":964},{},[965],{"type":37,"value":966},"трафик низкий (\u003C10K\u002Fмес visitor) — разница TTFB не влияет на конверсию",{"type":32,"tag":225,"props":968,"children":969},{},[970],{"type":37,"value":971},"команда не знает React\u002FTypeScript — learning curve удваивает стоимость миграции",{"type":32,"tag":225,"props":973,"children":974},{},[975],{"type":37,"value":976},"шаблона Theme Store достаточно — кастомизация не требуется",{"type":32,"tag":225,"props":978,"children":979},{},[980],{"type":37,"value":981},"инфраструктуру управлять не хочешь — shared Shopify-сервер проще",{"type":32,"tag":33,"props":983,"children":984},{},[985],{"type":32,"tag":229,"props":986,"children":987},{},[988],{"type":37,"value":989},"Пора на Hydrogen:",{"type":32,"tag":252,"props":991,"children":992},{},[993,998,1014,1019],{"type":32,"tag":225,"props":994,"children":995},{},[996],{"type":37,"value":997},"трафик высокий (>50K\u002Fмес) — каждые 100ms TTFB влияют на конверсию",{"type":32,"tag":225,"props":999,"children":1000},{},[1001,1003,1012],{"type":37,"value":1002},"требуется пользовательский UI\u002FUX — архитектура ",{"type":32,"tag":1004,"props":1005,"children":1009},"a",{"href":1006,"rel":1007},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fheadless",[1008],"nofollow",[1010],{"type":37,"value":1011},"Headless Commerce",{"type":37,"value":1013}," даёт гибкость",{"type":32,"tag":225,"props":1015,"children":1016},{},[1017],{"type":37,"value":1018},"скорость A\u002FB-итераций критична — CI\u002FCD pipeline должен быть под 2 минуты",{"type":32,"tag":225,"props":1020,"children":1021},{},[1022],{"type":37,"value":1023},"dev-команда работает с современным frontend-стеком (React\u002FRemix)",{"type":32,"tag":33,"props":1025,"children":1026},{},[1027],{"type":37,"value":1028},"Ещё cost обслуживания Hydrogen. Remix выпускает major-версию каждые 6 месяцев. Hydrogen это отслеживает. На Liquid Shopify гарантирует backward compatibility — старая тема через 5 лет всё работает. На Hydrogen нужна дисциплина обновления зависимостей.",{"type":32,"tag":33,"props":1030,"children":1031},{},[1032],{"type":37,"value":1033},"Edge-развёртывание тоже даёт ограничения. Cloudflare Workers runtime имеет лимиты (CPU time 50ms, память 128MB). Сложная backend-логика (например, рекомендательный движок) на edge не работает — надо offload'ить на origin server. На Liquid этой проблемы нет, сервер безлимитен.",{"type":32,"tag":40,"props":1035,"children":1037},{"id":1036},"итак-теперь-что",[1038],{"type":37,"value":1039},"Итак, теперь что",{"type":32,"tag":33,"props":1041,"children":1042},{},[1043],{"type":37,"value":1044},"Мы выбрали Hydrogen — потому что TTFB упал на 79%, время сборки сократилось на 88%, период окупаемости 5.4 месяца. Но решение принимали на основе модели затрат миграции, перечня компромиссов.",{"type":32,"tag":33,"props":1046,"children":1047},{},[1048],{"type":37,"value":1049},"Если ты тоже думаешь о переходе на Hydrogen, ответь сначала на эти вопросы: какой у тебя месячный visitor count? Команда знает React? Нужна пользовательская UI\u002FUX? Есть CI\u002FCD pipeline? Если везде «да» — делай числовую модель. Переводи разницу TTFB в лифт конверсии, velocity разработки в часы. Если эти цифры justify'т стоимость миграции — вперёд.",{"type":32,"tag":33,"props":1051,"children":1052},{},[1053,1055,1062],{"type":37,"value":1054},"Если оцениваешь headless-переход, в рамках ",{"type":32,"tag":1004,"props":1056,"children":1059},{"href":1057,"rel":1058},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fshopify",[1008],[1060],{"type":37,"value":1061},"Shopify Partner Services",{"type":37,"value":1063}," мы можем выстроить Hydrogen migration roadmap — benchmark, cost model, incremental rollout plan включены.",{"type":32,"tag":1065,"props":1066,"children":1067},"style",{},[1068],{"type":37,"value":1069},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":16,"searchDepth":113,"depth":113,"links":1071},[1072,1073,1076,1077,1078,1079],{"id":42,"depth":86,"text":45},{"id":189,"depth":86,"text":192,"children":1074},[1075],{"id":211,"depth":113,"text":214},{"id":300,"depth":86,"text":303},{"id":763,"depth":86,"text":766},{"id":942,"depth":86,"text":945},{"id":1036,"depth":86,"text":1039},"markdown","content:ru:tech:shopify-hydrogen-vs-liquid-resheniya-po-cifram.md","content","ru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-resheniya-po-cifram.md","ru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-resheniya-po-cifram","md",1778364199828]