[{"data":1,"prerenderedAt":1086},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-the-numbers-behind-our-decision":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":7,"_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: The Numbers Behind Our Decision","TTFB 840ms → 180ms, build time 12m → 90s. The metrics, tradeoffs, and migration cost breakdown behind our Hydrogen transition.","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","We ran Shopify Liquid themes for 7 years. When theme customization limits, fixed server response times, and monolithic deploy cycles started constraining us, the word \"headless\" came up. But one question blocked the decision: how would we measure the ROI of moving to Hydrogen? This article details the numerical answer we found — TTFB, build time, developer velocity, migration cost. We chose Hydrogen because it wasn't just a framework; it delivered measurable performance gains.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"liquids-performance-ceiling",[44],{"type":37,"value":45},"Liquid's Performance Ceiling",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Shopify's Liquid theme engine returns server-rendered HTML. The server parses Liquid syntax, makes Storefront API calls, assembles HTML, and sends it to the client. The architecture is simple and stable — but it has limits.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"Our production store had a median TTFB of 840ms (RUM data, Cloudflare Analytics). The 95th percentile hit 1.4 seconds. Shopify's server response time is beyond our control — shared infrastructure. Even optimizing our Liquid theme files (lazy-loading unused sections, reducing snippet count) couldn't touch the server-side latency floor.",{"type":32,"tag":33,"props":57,"children":58},{},[59],{"type":37,"value":60},"Build time was a separate pain. Changes to theme files got pushed via Shopify CLI. Average deploy time: 12 minutes. In a CI\u002FCD pipeline, that's waiting between staging and production. A\u002FB test iteration speed dropped. Developer velocity suffered.",{"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's tradeoff: simple setup, zero infrastructure management — but no performance control, slow iteration.",{"type":32,"tag":40,"props":188,"children":190},{"id":189},"hydrogens-technical-promise",[191],{"type":37,"value":192},"Hydrogen's Technical Promise",{"type":32,"tag":33,"props":194,"children":195},{},[196],{"type":37,"value":197},"Hydrogen is Shopify's headless framework built on Remix. React Server Components, streaming SSR, edge deployment. The architectural shift: Liquid renders HTML on Shopify's servers. Hydrogen lets you deploy your own edge node (Oxygen, Cloudflare, Vercel). You call the Storefront API directly, stream the response through your component tree.",{"type":32,"tag":33,"props":199,"children":200},{},[201],{"type":37,"value":202},"TTFB promise: render from an edge node and Shopify's server latency vanishes. Deploy to Cloudflare Workers and median TTFB drops to 100–200ms (Cloudflare's POP latency + Storefront API RTT). Build time promise: Vite-based build, incremental deploy, under 2 minutes.",{"type":32,"tag":33,"props":204,"children":205},{},[206],{"type":37,"value":207},"But promises come with costs: migration effort, developer learning curve, infrastructure ownership. We modeled these tradeoffs numerically before moving forward.",{"type":32,"tag":209,"props":210,"children":212},"h3",{"id":211},"benchmark-methodology",[213],{"type":37,"value":214},"Benchmark Methodology",{"type":32,"tag":33,"props":216,"children":217},{},[218],{"type":37,"value":219},"We set up two environments:",{"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 store, Dawn theme fork, 80+ sections, Cloudflare proxy (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}," Same homepage component tree, Cloudflare Workers deploy, Storefront API 2024-01",{"type":32,"tag":33,"props":247,"children":248},{},[249],{"type":37,"value":250},"Test 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 location, Moto G4, 3G Fast)",{"type":32,"tag":225,"props":261,"children":262},{},[263],{"type":37,"value":264},"Median values from 3 runs",{"type":32,"tag":225,"props":266,"children":267},{},[268],{"type":37,"value":269},"Cold cache state (flush before each test)",{"type":32,"tag":33,"props":271,"children":272},{},[273],{"type":37,"value":274},"Metrics:",{"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},"Build time (measured in CI\u002FCD)",{"type":32,"tag":40,"props":299,"children":301},{"id":300},"performance-comparison",[302],{"type":37,"value":303},"Performance Comparison",{"type":32,"tag":33,"props":305,"children":306},{},[307],{"type":37,"value":308},"Results (median of 3 runs):",{"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},"Metric",{"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},"Change",{"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},"Build Time",{"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 drop matched our expectations. Hydrogen's Cloudflare Workers edge node reaches the Storefront API with 40–60ms RTT (Shopify's CDN already sits on Cloudflare). Liquid hits a 600ms+ minimum from Shopify's server doing Liquid parse + API call + HTML concatenation.",{"type":32,"tag":33,"props":469,"children":470},{},[471],{"type":37,"value":472},"LCP gains came from streaming SSR. Hydrogen sends the first byte early and streams HTML. Critical content (hero image, above-the-fold product grid) renders first; below-the-fold lazy loads. Liquid blocks: entire page must be ready before it's sent.",{"type":32,"tag":33,"props":474,"children":475},{},[476],{"type":37,"value":477},"TBT drop came from bundle size + hydration optimization. We used React Server Components in Hydrogen — client-side JS bundle is 120KB (gzip). The old Liquid theme had jQuery + custom scripts at 340KB. Hydration time fell.",{"type":32,"tag":33,"props":479,"children":480},{},[481],{"type":37,"value":482},"Build time difference directly impacts developer velocity. 12 minutes becomes 90 seconds. Deploy 10 times a day and you save 115 minutes. CI\u002FCD pipeline accelerates, A\u002FB test iteration cycles shrink.",{"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 Hydrogen streaming SSR example (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: first response returns immediately\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 Hydrogen streaming SSR example (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: first response returns immediately\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},"The ",{"type":32,"tag":69,"props":754,"children":756},{"className":755},[],[757],{"type":37,"value":758},"defer",{"type":37,"value":760}," API streams promises. Client gets initial HTML; page renders progressively as data arrives. TTFB stays low.",{"type":32,"tag":40,"props":762,"children":764},{"id":763},"migration-cost-breakdown",[765],{"type":37,"value":766},"Migration Cost Breakdown",{"type":32,"tag":33,"props":768,"children":769},{},[770],{"type":37,"value":771},"Performance gains are clear — but what about transition costs? Here's our breakdown:",{"type":32,"tag":33,"props":773,"children":774},{},[775],{"type":32,"tag":229,"props":776,"children":777},{},[778],{"type":37,"value":779},"Development 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},"Theme → Hydrogen component migration: 160 hours (2 senior devs, 4 weeks)",{"type":32,"tag":225,"props":789,"children":790},{},[791],{"type":37,"value":792},"Storefront API integration (GraphQL query rewrite): 40 hours",{"type":32,"tag":225,"props":794,"children":795},{},[796],{"type":37,"value":797},"CI\u002FCD pipeline setup (Cloudflare Workers): 16 hours",{"type":32,"tag":225,"props":799,"children":800},{},[801],{"type":37,"value":802},"QA + edge case fixes: 24 hours",{"type":32,"tag":225,"props":804,"children":805},{},[806,811],{"type":32,"tag":229,"props":807,"children":808},{},[809],{"type":37,"value":810},"Total:",{"type":37,"value":812}," 240 hours",{"type":32,"tag":33,"props":814,"children":815},{},[816],{"type":32,"tag":229,"props":817,"children":818},{},[819],{"type":37,"value":820},"Infrastructure Cost:",{"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\u002Fmo (free up to 100K requests — our traffic is 80K\u002Fmo)",{"type":32,"tag":225,"props":830,"children":831},{},[832],{"type":37,"value":833},"Oxygen (Shopify's edge platform): $20\u002Fmo starter tier",{"type":32,"tag":225,"props":835,"children":836},{},[837],{"type":37,"value":838},"We chose Cloudflare — already using their proxy",{"type":32,"tag":33,"props":840,"children":841},{},[842],{"type":32,"tag":229,"props":843,"children":844},{},[845],{"type":37,"value":846},"Maintenance 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 updates every 6 months (Remix upstream tracking)",{"type":32,"tag":225,"props":856,"children":857},{},[858],{"type":37,"value":859},"Developer learning curve: team needs React + Remix experience",{"type":32,"tag":225,"props":861,"children":862},{},[863],{"type":37,"value":864},"Liquid used Shopify Theme Store templates — Hydrogen requires custom dev",{"type":32,"tag":33,"props":866,"children":867},{},[868,870,875,877,882],{"type":37,"value":869},"One-time migration cost total: ",{"type":32,"tag":229,"props":871,"children":872},{},[873],{"type":37,"value":874},"240 hours × $80\u002Fhour = $19,200",{"type":37,"value":876},". Annual infrastructure: ",{"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},"How did we model the returns? Two buckets:",{"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 Impact:",{"type":37,"value":901}," Core Web Vitals correlate with conversion rate (Google\u002FDeloitte study: 0.1s LCP drop = 1–2% conversion lift). Our LCP dropped 1.3s — conservative estimate 1.5% lift. On $200K monthly revenue = $3K\u002Fmonth lift. Annual: ",{"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},"Developer Velocity:",{"type":37,"value":917}," Build time dropped 88%. Team does ~40 deploys monthly. 10.5 minutes saved per deploy = 420 minutes\u002Fmonth = 7 hours. At $80\u002Fhour senior rate = $560\u002Fmonth savings. Annual: ",{"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},"Payback period: $19,200 \u002F ($36K + $6.7K) = ",{"type":32,"tag":229,"props":930,"children":931},{},[932],{"type":37,"value":933},"5.4 months",{"type":37,"value":883},{"type":32,"tag":33,"props":936,"children":937},{},[938],{"type":37,"value":939},"The numbers justified the migration. Performance gains + developer velocity ROI covers migration cost in half a year.",{"type":32,"tag":40,"props":941,"children":943},{"id":942},"tradeoffs-and-limits",[944],{"type":37,"value":945},"Tradeoffs and Limits",{"type":32,"tag":33,"props":947,"children":948},{},[949],{"type":37,"value":950},"Hydrogen isn't right for every store. Liquid makes more sense here:",{"type":32,"tag":33,"props":952,"children":953},{},[954],{"type":32,"tag":229,"props":955,"children":956},{},[957],{"type":37,"value":958},"Stay with 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},"Traffic low (\u003C10K\u002Fmo visitors) — TTFB difference won't impact conversion",{"type":32,"tag":225,"props":968,"children":969},{},[970],{"type":37,"value":971},"Team doesn't know React\u002FTypeScript — learning curve doubles migration cost",{"type":32,"tag":225,"props":973,"children":974},{},[975],{"type":37,"value":976},"Theme Store template covers your needs — minimal customization required",{"type":32,"tag":225,"props":978,"children":979},{},[980],{"type":37,"value":981},"Don't want infrastructure ownership — Shopify's shared server is simpler",{"type":32,"tag":33,"props":983,"children":984},{},[985],{"type":32,"tag":229,"props":986,"children":987},{},[988],{"type":37,"value":989},"Move to 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},"Traffic high (>50K\u002Fmo) — every 100ms TTFB affects conversion",{"type":32,"tag":225,"props":999,"children":1000},{},[1001,1003,1012],{"type":37,"value":1002},"Custom UI\u002FUX required — ",{"type":32,"tag":1004,"props":1005,"children":1009},"a",{"href":1006,"rel":1007},"https:\u002F\u002Fwww.roibase.com.tr\u002Fen\u002Fheadless",[1008],"nofollow",[1010],{"type":37,"value":1011},"headless architecture",{"type":37,"value":1013}," gives flexibility",{"type":32,"tag":225,"props":1015,"children":1016},{},[1017],{"type":37,"value":1018},"A\u002FB test iteration speed is critical — CI\u002FCD must be sub-2-minute",{"type":32,"tag":225,"props":1020,"children":1021},{},[1022],{"type":37,"value":1023},"Developer team comfortable with modern frontend (React\u002FRemix)",{"type":32,"tag":33,"props":1025,"children":1026},{},[1027],{"type":37,"value":1028},"Hydrogen carries maintenance costs too. Remix sees major versions every 6 months. Hydrogen tracks these. Liquid has Shopify's backward-compatibility guarantee — old themes run for years. Hydrogen demands disciplined dependency updates.",{"type":32,"tag":33,"props":1030,"children":1031},{},[1032],{"type":37,"value":1033},"Edge deployment has constraints. Cloudflare Workers has runtime limits (50ms CPU, 128MB memory). Complex logic (recommendation engines) won't run on edge — offload to an origin server. Liquid has no such friction; server-side is unlimited.",{"type":32,"tag":40,"props":1035,"children":1037},{"id":1036},"where-we-are-now",[1038],{"type":37,"value":1039},"Where We Are Now",{"type":32,"tag":33,"props":1041,"children":1042},{},[1043],{"type":37,"value":1044},"We chose Hydrogen because TTFB dropped 79%, build time fell 88%, payback period is 5.4 months. But we made that decision with a cost model, tradeoff list, and numbers.",{"type":32,"tag":33,"props":1046,"children":1047},{},[1048],{"type":37,"value":1049},"If you're considering Hydrogen, answer these first: How many monthly visitors? Does your team know React? Do you need custom UI\u002FUX? Do you have a CI\u002FCD pipeline? \"Yes\" to these questions means build a numerical model — convert TTFB gains into conversion lift, quantify developer velocity in hours saved. If those numbers justify migration cost, move forward.",{"type":32,"tag":33,"props":1051,"children":1052},{},[1053,1055,1062],{"type":37,"value":1054},"If you're evaluating headless transitions generally, we can help build a Hydrogen migration roadmap under ",{"type":32,"tag":1004,"props":1056,"children":1059},{"href":1057,"rel":1058},"https:\u002F\u002Fwww.roibase.com.tr\u002Fen\u002Fshopify",[1008],[1060],{"type":37,"value":1061},"Shopify Partnership Services",{"type":37,"value":1063}," — benchmarks, cost models, incremental rollout plans included.",{"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:en:tech:shopify-hydrogen-vs-liquid-the-numbers-behind-our-decision.md","content","en\u002Ftech\u002Fshopify-hydrogen-vs-liquid-the-numbers-behind-our-decision.md","en\u002Ftech\u002Fshopify-hydrogen-vs-liquid-the-numbers-behind-our-decision","md",1778364198518]