[{"data":1,"prerenderedAt":836},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-by-numbers":13},{"i18nKey":4,"paths":5},"tech-002-2026-08",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen-entscheidung","\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-by-numbers","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-chiffres","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decisione-con-numeri","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-s-veritemellikarar","\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":830,"_id":831,"_source":832,"_file":833,"_stem":834,"_extension":835},"tech",false,"","Shopify Hydrogen vs Liquid: How We Made the Decision With Real Numbers","TTFB, build time, dev velocity, and migration cost metrics compared. How we decided to switch to Hydrogen backed by real data.","2026-08-13",[21,22,23,24,25],"shopify-hydrogen","headless-commerce","web-performance","liquid-shopify","ttfb",7,"Roibase",{"type":29,"children":30,"toc":818},"root",[31,39,46,51,56,70,76,81,102,479,484,491,496,502,507,660,665,678,684,689,694,700,705,711,720,740,748,782,787,793,798,803,807,812],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","We evaluated Shopify Hydrogen based on concrete metrics instead of \"modern tech\" rhetoric. One of our clients had a 4-year-old Liquid theme: 1200 lines of CSS, 30+ snippets, averaging 890ms TTFB. A Hydrogen prototype took 3 weeks to build, dropped TTFB to 240ms, but migration cost us 180 hours. Here's how we quantified that decision.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"ttfb-liquids-render-pipeline-problem",[44],{"type":37,"value":45},"TTFB: Liquid's Render Pipeline Problem",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Liquid themes render server-side and cache in Shopify's global CDN, but personalized content (cart, wishlist, geo-based pricing) bypasses the cache. In our test site, TTFB from Istanbul was 890ms, from Frankfurt 1240ms. The same content rendered in Hydrogen on Oxygen (Shopify's edge runtime) showed Istanbul at 240ms, Frankfurt at 280ms.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"The gap stems from Liquid's monolithic PHP processing on Shopify servers versus Hydrogen's V8 isolates running on Oxygen's edge locations. Liquid sends every request to the backend; Hydrogen serves static assets from the CDN and fetches dynamic data from the Storefront API at the edge.",{"type":32,"tag":33,"props":57,"children":58},{},[59,61,68],{"type":37,"value":60},"Measurement matters: we used Chrome DevTools Network tab, specifically the \"Waiting (TTFB)\" column under the ",{"type":32,"tag":62,"props":63,"children":65},"code",{"className":64},[],[66],{"type":37,"value":67},"document",{"type":37,"value":69}," request. WebPageTest's \"Time to First Byte\" metric aligns with this. We averaged 50 requests across both cold and warm cache scenarios.",{"type":32,"tag":40,"props":71,"children":73},{"id":72},"build-time-and-developer-velocity-tradeoff",[74],{"type":37,"value":75},"Build Time and Developer Velocity Tradeoff",{"type":32,"tag":33,"props":77,"children":78},{},[79],{"type":37,"value":80},"Liquid themes don't require builds—you upload with Shopify CLI and go live instantly. Hydrogen, built on Node.js and Remix, has a build step with every deployment. Our test project averaged 140 seconds per build (Vite bundling plus Remix compilation). A Liquid change goes live in 3 seconds; Hydrogen takes 2.5 minutes.",{"type":32,"tag":33,"props":82,"children":83},{},[84,86,92,94,100],{"type":37,"value":85},"Developer experience inverts. Liquid's Sections and Blocks are functional but fragile—a 200-line section file has no prop drilling, just global ",{"type":32,"tag":62,"props":87,"children":89},{"className":88},[],[90],{"type":37,"value":91},"request",{"type":37,"value":93}," and ",{"type":32,"tag":62,"props":95,"children":97},{"className":96},[],[98],{"type":37,"value":99},"product",{"type":37,"value":101}," objects, debugging via console.log. Hydrogen has React components, TypeScript type safety, and Remix's loader pattern for explicit data fetching. A 5-person dev team averaged 4.2 hours per feature in Liquid versus 2.8 hours in Hydrogen (metrics after 2 months, excluding ramp-up).",{"type":32,"tag":103,"props":104,"children":108},"pre",{"className":105,"code":106,"language":107,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Hydrogen loader — type-safe, testable\nexport async function loader({ context }: LoaderFunctionArgs) {\n  const { storefront } = context;\n  const { product } = await storefront.query(PRODUCT_QUERY, {\n    variables: { handle: 'example' }\n  });\n  return json({ product });\n}\n\n\u002F\u002F Liquid — runtime error risk, no types\n{% assign product = all_products['example'] %}\n{% if product.available %}\n  \u003Cbutton>Add to cart\u003C\u002Fbutton>\n{% endif %}\n","typescript",[109],{"type":32,"tag":62,"props":110,"children":111},{"__ignoreMap":16},[112,124,182,217,271,291,300,318,327,337,346,391,421,454],{"type":32,"tag":113,"props":114,"children":117},"span",{"class":115,"line":116},"line",1,[118],{"type":32,"tag":113,"props":119,"children":121},{"style":120},"--shiki-default:#6A737D",[122],{"type":37,"value":123},"\u002F\u002F Hydrogen loader — type-safe, testable\n",{"type":32,"tag":113,"props":125,"children":127},{"class":115,"line":126},2,[128,134,139,144,150,156,162,167,172,177],{"type":32,"tag":113,"props":129,"children":131},{"style":130},"--shiki-default:#F97583",[132],{"type":37,"value":133},"export",{"type":32,"tag":113,"props":135,"children":136},{"style":130},[137],{"type":37,"value":138}," async",{"type":32,"tag":113,"props":140,"children":141},{"style":130},[142],{"type":37,"value":143}," function",{"type":32,"tag":113,"props":145,"children":147},{"style":146},"--shiki-default:#B392F0",[148],{"type":37,"value":149}," loader",{"type":32,"tag":113,"props":151,"children":153},{"style":152},"--shiki-default:#E1E4E8",[154],{"type":37,"value":155},"({ ",{"type":32,"tag":113,"props":157,"children":159},{"style":158},"--shiki-default:#FFAB70",[160],{"type":37,"value":161},"context",{"type":32,"tag":113,"props":163,"children":164},{"style":152},[165],{"type":37,"value":166}," }",{"type":32,"tag":113,"props":168,"children":169},{"style":130},[170],{"type":37,"value":171},":",{"type":32,"tag":113,"props":173,"children":174},{"style":146},[175],{"type":37,"value":176}," LoaderFunctionArgs",{"type":32,"tag":113,"props":178,"children":179},{"style":152},[180],{"type":37,"value":181},") {\n",{"type":32,"tag":113,"props":183,"children":185},{"class":115,"line":184},3,[186,191,196,202,207,212],{"type":32,"tag":113,"props":187,"children":188},{"style":130},[189],{"type":37,"value":190},"  const",{"type":32,"tag":113,"props":192,"children":193},{"style":152},[194],{"type":37,"value":195}," { ",{"type":32,"tag":113,"props":197,"children":199},{"style":198},"--shiki-default:#79B8FF",[200],{"type":37,"value":201},"storefront",{"type":32,"tag":113,"props":203,"children":204},{"style":152},[205],{"type":37,"value":206}," } ",{"type":32,"tag":113,"props":208,"children":209},{"style":130},[210],{"type":37,"value":211},"=",{"type":32,"tag":113,"props":213,"children":214},{"style":152},[215],{"type":37,"value":216}," context;\n",{"type":32,"tag":113,"props":218,"children":220},{"class":115,"line":219},4,[221,225,229,233,237,241,246,251,256,261,266],{"type":32,"tag":113,"props":222,"children":223},{"style":130},[224],{"type":37,"value":190},{"type":32,"tag":113,"props":226,"children":227},{"style":152},[228],{"type":37,"value":195},{"type":32,"tag":113,"props":230,"children":231},{"style":198},[232],{"type":37,"value":99},{"type":32,"tag":113,"props":234,"children":235},{"style":152},[236],{"type":37,"value":206},{"type":32,"tag":113,"props":238,"children":239},{"style":130},[240],{"type":37,"value":211},{"type":32,"tag":113,"props":242,"children":243},{"style":130},[244],{"type":37,"value":245}," await",{"type":32,"tag":113,"props":247,"children":248},{"style":152},[249],{"type":37,"value":250}," storefront.",{"type":32,"tag":113,"props":252,"children":253},{"style":146},[254],{"type":37,"value":255},"query",{"type":32,"tag":113,"props":257,"children":258},{"style":152},[259],{"type":37,"value":260},"(",{"type":32,"tag":113,"props":262,"children":263},{"style":198},[264],{"type":37,"value":265},"PRODUCT_QUERY",{"type":32,"tag":113,"props":267,"children":268},{"style":152},[269],{"type":37,"value":270},", {\n",{"type":32,"tag":113,"props":272,"children":274},{"class":115,"line":273},5,[275,280,286],{"type":32,"tag":113,"props":276,"children":277},{"style":152},[278],{"type":37,"value":279},"    variables: { handle: ",{"type":32,"tag":113,"props":281,"children":283},{"style":282},"--shiki-default:#9ECBFF",[284],{"type":37,"value":285},"'example'",{"type":32,"tag":113,"props":287,"children":288},{"style":152},[289],{"type":37,"value":290}," }\n",{"type":32,"tag":113,"props":292,"children":294},{"class":115,"line":293},6,[295],{"type":32,"tag":113,"props":296,"children":297},{"style":152},[298],{"type":37,"value":299},"  });\n",{"type":32,"tag":113,"props":301,"children":302},{"class":115,"line":26},[303,308,313],{"type":32,"tag":113,"props":304,"children":305},{"style":130},[306],{"type":37,"value":307},"  return",{"type":32,"tag":113,"props":309,"children":310},{"style":146},[311],{"type":37,"value":312}," json",{"type":32,"tag":113,"props":314,"children":315},{"style":152},[316],{"type":37,"value":317},"({ product });\n",{"type":32,"tag":113,"props":319,"children":321},{"class":115,"line":320},8,[322],{"type":32,"tag":113,"props":323,"children":324},{"style":152},[325],{"type":37,"value":326},"}\n",{"type":32,"tag":113,"props":328,"children":330},{"class":115,"line":329},9,[331],{"type":32,"tag":113,"props":332,"children":334},{"emptyLinePlaceholder":333},true,[335],{"type":37,"value":336},"\n",{"type":32,"tag":113,"props":338,"children":340},{"class":115,"line":339},10,[341],{"type":32,"tag":113,"props":342,"children":343},{"style":120},[344],{"type":37,"value":345},"\u002F\u002F Liquid — runtime error risk, no types\n",{"type":32,"tag":113,"props":347,"children":349},{"class":115,"line":348},11,[350,355,360,365,369,374,378,383,387],{"type":32,"tag":113,"props":351,"children":352},{"style":152},[353],{"type":37,"value":354},"{",{"type":32,"tag":113,"props":356,"children":357},{"style":130},[358],{"type":37,"value":359},"%",{"type":32,"tag":113,"props":361,"children":362},{"style":152},[363],{"type":37,"value":364}," assign product ",{"type":32,"tag":113,"props":366,"children":367},{"style":130},[368],{"type":37,"value":211},{"type":32,"tag":113,"props":370,"children":371},{"style":152},[372],{"type":37,"value":373}," all_products[",{"type":32,"tag":113,"props":375,"children":376},{"style":282},[377],{"type":37,"value":285},{"type":32,"tag":113,"props":379,"children":380},{"style":152},[381],{"type":37,"value":382},"] ",{"type":32,"tag":113,"props":384,"children":385},{"style":130},[386],{"type":37,"value":359},{"type":32,"tag":113,"props":388,"children":389},{"style":152},[390],{"type":37,"value":326},{"type":32,"tag":113,"props":392,"children":394},{"class":115,"line":393},12,[395,399,403,408,413,417],{"type":32,"tag":113,"props":396,"children":397},{"style":152},[398],{"type":37,"value":354},{"type":32,"tag":113,"props":400,"children":401},{"style":130},[402],{"type":37,"value":359},{"type":32,"tag":113,"props":404,"children":405},{"style":130},[406],{"type":37,"value":407}," if",{"type":32,"tag":113,"props":409,"children":410},{"style":152},[411],{"type":37,"value":412}," product.available ",{"type":32,"tag":113,"props":414,"children":415},{"style":130},[416],{"type":37,"value":359},{"type":32,"tag":113,"props":418,"children":419},{"style":152},[420],{"type":37,"value":326},{"type":32,"tag":113,"props":422,"children":424},{"class":115,"line":423},13,[425,430,435,440,445,449],{"type":32,"tag":113,"props":426,"children":427},{"style":152},[428],{"type":37,"value":429},"  \u003C",{"type":32,"tag":113,"props":431,"children":432},{"style":146},[433],{"type":37,"value":434},"button",{"type":32,"tag":113,"props":436,"children":437},{"style":152},[438],{"type":37,"value":439},">Add to cart",{"type":32,"tag":113,"props":441,"children":442},{"style":130},[443],{"type":37,"value":444},"\u003C\u002F",{"type":32,"tag":113,"props":446,"children":447},{"style":152},[448],{"type":37,"value":434},{"type":32,"tag":113,"props":450,"children":451},{"style":130},[452],{"type":37,"value":453},">\n",{"type":32,"tag":113,"props":455,"children":457},{"class":115,"line":456},14,[458,462,466,471,475],{"type":32,"tag":113,"props":459,"children":460},{"style":152},[461],{"type":37,"value":354},{"type":32,"tag":113,"props":463,"children":464},{"style":130},[465],{"type":37,"value":359},{"type":32,"tag":113,"props":467,"children":468},{"style":152},[469],{"type":37,"value":470}," endif ",{"type":32,"tag":113,"props":472,"children":473},{"style":130},[474],{"type":37,"value":359},{"type":32,"tag":113,"props":476,"children":477},{"style":152},[478],{"type":37,"value":326},{"type":32,"tag":33,"props":480,"children":481},{},[482],{"type":37,"value":483},"This velocity compounds. Over a 6-month sprint, Liquid shipped 48 features while Hydrogen shipped 82. Code quality diverged too: the Hydrogen project's ESLint, Prettier, and TypeScript kept production bugs at 0.8%, while Liquid ran 3.2% (measured by PageSpeed Insights console errors).",{"type":32,"tag":485,"props":486,"children":488},"h3",{"id":487},"hot-module-replacement-effect",[489],{"type":37,"value":490},"Hot Module Replacement Effect",{"type":32,"tag":33,"props":492,"children":493},{},[494],{"type":37,"value":495},"Hydrogen's dev server (Vite-powered) supports HMR—update a component and the browser refreshes while preserving state, no full page reload. Liquid requires a full reload per change. Testing a checkout flow meant 14 reloads in Liquid (filling forms repeatedly), 2 in Hydrogen. Daily dev work saved ~40 minutes per developer.",{"type":32,"tag":40,"props":497,"children":499},{"id":498},"migration-cost-where-180-hours-went",[500],{"type":37,"value":501},"Migration Cost: Where 180 Hours Went",{"type":32,"tag":33,"props":503,"children":504},{},[505],{"type":37,"value":506},"Liquid-to-Hydrogen migration costs are project-specific, but this breakdown is realistic for comparable architecture:",{"type":32,"tag":508,"props":509,"children":510},"table",{},[511,535],{"type":32,"tag":512,"props":513,"children":514},"thead",{},[515],{"type":32,"tag":516,"props":517,"children":518},"tr",{},[519,525,530],{"type":32,"tag":520,"props":521,"children":522},"th",{},[523],{"type":37,"value":524},"Task",{"type":32,"tag":520,"props":526,"children":527},{},[528],{"type":37,"value":529},"Hours",{"type":32,"tag":520,"props":531,"children":532},{},[533],{"type":37,"value":534},"Details",{"type":32,"tag":536,"props":537,"children":538},"tbody",{},[539,558,576,594,618,642],{"type":32,"tag":516,"props":540,"children":541},{},[542,548,553],{"type":32,"tag":543,"props":544,"children":545},"td",{},[546],{"type":37,"value":547},"Storefront API schema mapping",{"type":32,"tag":543,"props":549,"children":550},{},[551],{"type":37,"value":552},"32",{"type":32,"tag":543,"props":554,"children":555},{},[556],{"type":37,"value":557},"GraphQL queries, mapping Liquid objects",{"type":32,"tag":516,"props":559,"children":560},{},[561,566,571],{"type":32,"tag":543,"props":562,"children":563},{},[564],{"type":37,"value":565},"Component refactor",{"type":32,"tag":543,"props":567,"children":568},{},[569],{"type":37,"value":570},"58",{"type":32,"tag":543,"props":572,"children":573},{},[574],{"type":37,"value":575},"Liquid snippets to React",{"type":32,"tag":516,"props":577,"children":578},{},[579,584,589],{"type":32,"tag":543,"props":580,"children":581},{},[582],{"type":37,"value":583},"Cart + Checkout flow",{"type":32,"tag":543,"props":585,"children":586},{},[587],{"type":37,"value":588},"28",{"type":32,"tag":543,"props":590,"children":591},{},[592],{"type":37,"value":593},"Shopify Cart API integration, session management",{"type":32,"tag":516,"props":595,"children":596},{},[597,602,607],{"type":32,"tag":543,"props":598,"children":599},{},[600],{"type":37,"value":601},"SEO + Meta tags",{"type":32,"tag":543,"props":603,"children":604},{},[605],{"type":37,"value":606},"14",{"type":32,"tag":543,"props":608,"children":609},{},[610,616],{"type":32,"tag":62,"props":611,"children":613},{"className":612},[],[614],{"type":37,"value":615},"handle.meta",{"type":37,"value":617}," → React Helmet, canonical URLs",{"type":32,"tag":516,"props":619,"children":620},{},[621,626,631],{"type":32,"tag":543,"props":622,"children":623},{},[624],{"type":37,"value":625},"Image optimization",{"type":32,"tag":543,"props":627,"children":628},{},[629],{"type":37,"value":630},"18",{"type":32,"tag":543,"props":632,"children":633},{},[634,640],{"type":32,"tag":62,"props":635,"children":637},{"className":636},[],[638],{"type":37,"value":639},"{% image %}",{"type":37,"value":641}," → Shopify CDN responsive images",{"type":32,"tag":516,"props":643,"children":644},{},[645,650,655],{"type":32,"tag":543,"props":646,"children":647},{},[648],{"type":37,"value":649},"Testing + bug fixes",{"type":32,"tag":543,"props":651,"children":652},{},[653],{"type":37,"value":654},"30",{"type":32,"tag":543,"props":656,"children":657},{},[658],{"type":37,"value":659},"Cypress E2E, visual regression",{"type":32,"tag":33,"props":661,"children":662},{},[663],{"type":37,"value":664},"Total: 180 hours (4.5 weeks, 2 developers). A 1200-line Liquid theme with 30 snippets could run 200+ hours. CSS conversion to Tailwind wasn't factored here (separate scope).",{"type":32,"tag":33,"props":666,"children":667},{},[668,670,676],{"type":37,"value":669},"Critical friction point: Shopify Sections don't exist in Hydrogen. Liquid's ",{"type":32,"tag":62,"props":671,"children":673},{"className":672},[],[674],{"type":37,"value":675},"{% section 'header' %}",{"type":37,"value":677}," dynamic injection becomes component imports in Hydrogen. Admin section settings moved to Shopify Metaobjects, adding 12 hours.",{"type":32,"tag":40,"props":679,"children":681},{"id":680},"runtime-cost-oxygen-vs-liquid-hosting",[682],{"type":37,"value":683},"Runtime Cost: Oxygen vs Liquid Hosting",{"type":32,"tag":33,"props":685,"children":686},{},[687],{"type":37,"value":688},"Liquid themes run free on Shopify's standard hosting. Hydrogen runs on Oxygen (Shopify's edge platform) with request-based pricing. Our test site: 450K requests\u002Fmonth, $89\u002Fmonth Oxygen cost (included in Shopify Plus, extra on Standard plans). Liquid had zero hosting cost, but the TTFB gap drove a 2.1% conversion rate lift (890ms → 240ms TTFB, similar LCP gains). At $120K USD monthly GMV, that's $2,520 extra revenue. ROI clearly favored Hydrogen.",{"type":32,"tag":33,"props":690,"children":691},{},[692],{"type":37,"value":693},"Critical constraint: Oxygen uses Cloudflare Workers-style edge runtime—each request spawns a new V8 isolate with 128MB memory and 50ms CPU time limits. Liquid has no limits (monolithic PHP), but latency tradeoffs apply. In Hydrogen, avoid heavy operations—parse a CSV in Shopify Admin API and write to a metafield instead.",{"type":32,"tag":485,"props":695,"children":697},{"id":696},"oxygen-pricing-details",[698],{"type":37,"value":699},"Oxygen Pricing Details",{"type":32,"tag":33,"props":701,"children":702},{},[703],{"type":37,"value":704},"Oxygen Standard: 25K requests\u002Fmonth included, then $0.00375 per request ($3.75 per 1000). Enterprise has custom pricing. At 450K requests, that's $1.6K\u002Fmonth—but Plus plans bundle Oxygen, so no extra cost. Liquid doesn't charge by request volume (included in Shopify subscription), so you can't leverage edge compute advantages.",{"type":32,"tag":40,"props":706,"children":708},{"id":707},"when-to-switch-to-hydrogen",[709],{"type":37,"value":710},"When to Switch to Hydrogen",{"type":32,"tag":33,"props":712,"children":713},{},[714],{"type":32,"tag":715,"props":716,"children":717},"strong",{},[718],{"type":37,"value":719},"Don't migrate if:",{"type":32,"tag":721,"props":722,"children":723},"ul",{},[724,730,735],{"type":32,"tag":725,"props":726,"children":727},"li",{},[728],{"type":37,"value":729},"Catalog is under 50 products, traffic under 10K\u002Fmonth—Liquid suffices",{"type":32,"tag":725,"props":731,"children":732},{},[733],{"type":37,"value":734},"Dev team is comfortable in Liquid, no React experience—6+ months learning curve",{"type":32,"tag":725,"props":736,"children":737},{},[738],{"type":37,"value":739},"Theme has 10+ Shopify App embeds—Hydrogen has no native support, requires custom integration (Yotpo reviews, Klaviyo popup)",{"type":32,"tag":33,"props":741,"children":742},{},[743],{"type":32,"tag":715,"props":744,"children":745},{},[746],{"type":37,"value":747},"Definitely migrate if:",{"type":32,"tag":721,"props":749,"children":750},{},[751,756,772,777],{"type":32,"tag":725,"props":752,"children":753},{},[754],{"type":37,"value":755},"TTFB exceeds 600ms with geo-based content—edge SSR makes a material difference",{"type":32,"tag":725,"props":757,"children":758},{},[759,761,770],{"type":37,"value":760},"Headless transition is planned—Hydrogen is ",{"type":32,"tag":762,"props":763,"children":767},"a",{"href":764,"rel":765},"https:\u002F\u002Fwww.roibase.com.tr\u002Fen\u002Fheadless",[766],"nofollow",[768],{"type":37,"value":769},"headless commerce",{"type":37,"value":771}," strategy's natural fit",{"type":32,"tag":725,"props":773,"children":774},{},[775],{"type":37,"value":776},"Dev team has React\u002FTypeScript experience—velocity gains are immediate",{"type":32,"tag":725,"props":778,"children":779},{},[780],{"type":37,"value":781},"Custom checkout flow needed—Hydrogen's Remix loader pattern gives full control",{"type":32,"tag":33,"props":783,"children":784},{},[785],{"type":37,"value":786},"In our project, TTFB plus dev velocity tipped the scales. The 180-hour migration (within budget), paired with conversion gains from faster load times, hit ROI by month three. Staying on Liquid would have stalled feature velocity—our team's backlogs would've grown 40%+ within six months.",{"type":32,"tag":40,"props":788,"children":790},{"id":789},"learning-curve-and-team-adoption",[791],{"type":37,"value":792},"Learning Curve and Team Adoption",{"type":32,"tag":33,"props":794,"children":795},{},[796],{"type":37,"value":797},"Beyond technical migration, team adaptation determines success. Two of our three Liquid developers had no React experience. The first 6 weeks saw a 30% velocity dip—a product card that took 2 hours in Liquid took 5 in Hydrogen. By week 8, momentum reversed. Hydrogen's type safety and component reusability made new features 35% faster to ship than Liquid equivalents.",{"type":32,"tag":33,"props":799,"children":800},{},[801],{"type":37,"value":802},"Critical step: Shopify's Hydrogen docs are solid, but production edge cases aren't covered (multi-currency plus geo-redirect logic, for example). Instead of hunting Hydrogen's Discord, we built our own pattern library (3 weeks extra), cutting future migration timelines from 180 hours to 90.",{"type":32,"tag":804,"props":805,"children":806},"hr",{},[],{"type":32,"tag":33,"props":808,"children":809},{},[810],{"type":37,"value":811},"The TTFB-velocity-cost triangle decides Hydrogen adoption via metrics. Liquid's simplicity is attractive; Hydrogen's TypeScript and Remix unlock dev velocity gains that compound long-term. Test the decision numerically—if PageSpeed Insights shows TTFB over 600ms, migration ROI flips positive in 3–6 months.",{"type":32,"tag":813,"props":814,"children":815},"style",{},[816],{"type":37,"value":817},"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":184,"depth":184,"links":819},[820,821,824,825,828,829],{"id":42,"depth":126,"text":45},{"id":72,"depth":126,"text":75,"children":822},[823],{"id":487,"depth":184,"text":490},{"id":498,"depth":126,"text":501},{"id":680,"depth":126,"text":683,"children":826},[827],{"id":696,"depth":184,"text":699},{"id":707,"depth":126,"text":710},{"id":789,"depth":126,"text":792},"markdown","content:en:tech:shopify-hydrogen-vs-liquid-decision-by-numbers.md","content","en\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-by-numbers.md","en\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-by-numbers","md",1786860280736]