[{"data":1,"prerenderedAt":1087},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-kennzahlen-entscheidung":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":6,"_dir":14,"_draft":15,"_partial":15,"_locale":16,"title":17,"description":18,"publishedAt":19,"modifiedAt":19,"category":20,"i18nKey":4,"tags":21,"readingTime":27,"author":28,"body":29,"_type":1081,"_id":1082,"_source":1083,"_file":1084,"_stem":1085,"_extension":1086},"tech",false,"","Shopify Hydrogen vs Liquid: Entscheidung nach Kennzahlen","TTFB 840ms → 180ms, Build-Zeit 12min → 90sec. Die Zahlen hinter der Hydrogen-Migration, Trade-offs und Migrations-Kostenrechnung.","2026-05-09","techstack-partnership",[22,23,24,25,26],"shopify-hydrogen","headless-commerce","web-performance","remix","ttfb",9,"Roibase",{"type":30,"children":31,"toc":1071},"root",[32,40,47,52,57,62,183,188,194,199,204,209,216,221,247,252,271,276,299,305,310,464,469,474,479,484,749,762,768,773,781,814,822,840,848,866,885,890,925,936,941,947,952,960,983,991,1025,1030,1035,1041,1046,1051,1065],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37],{"type":38,"value":39},"text","Wir nutzen Shopify Liquid-Themes seit 7 Jahren. Als die Grenzen bei Theme-Anpassungen, feste Server-Response-Zeiten und monolithische Deploy-Zyklen uns zu bremsen begannen, kam das Wort „Headless\" auf den Tisch. Aber die entscheidende Frage lautete: Wie messen wir den ROI einer Hydrogen-Migration? Dieser Text dokumentiert die numerischen Details unserer Antwort — TTFB, Build-Zeit, Developer Velocity, Migrations-Kosten. Wir wählten Hydrogen, weil es nicht nur ein Framework ist, sondern messbare Performance-Gewinne liefert.",{"type":33,"tag":41,"props":42,"children":44},"h2",{"id":43},"liquids-performance-ceiling",[45],{"type":38,"value":46},"Liquid's Performance-Ceiling",{"type":33,"tag":34,"props":48,"children":49},{},[50],{"type":38,"value":51},"Shopifys Liquid-Template-Engine rendert serverseitig HTML. Die Liquid-Syntax wird auf dem Server geparsed, Storefront-API-Aufrufe laufen ab, HTML wird zusammengefügt und an den Client gesendet. Diese Architektur ist einfach und stabil — aber mit Grenzen.",{"type":33,"tag":34,"props":53,"children":54},{},[55],{"type":38,"value":56},"In unserem Production-Store lag der Median-TTFB bei 840ms (RUM-Daten, Cloudflare Analytics). Das 95. Perzentil erreichte 1,4 Sekunden. Shopifys Server-Response-Time steht nicht unter unserer Kontrolle — Shared Infrastructure. Auch wenn wir das Liquid-Theme optimieren (unused sections lazy-laden, snippet-Count senken), bleibt die serverseitige Latenz konstant.",{"type":33,"tag":34,"props":58,"children":59},{},[60],{"type":38,"value":61},"Build-Zeit ist ein separates Problem. Bei Theme-Änderungen pusht man über die Shopify CLI. Die durchschnittliche Deploy-Dauer: 12 Minuten. In der CI\u002FCD-Pipeline bedeutet das Warten zwischen Stages. A\u002FB-Test-Iteration wird langsam. Developer Velocity sinkt.",{"type":33,"tag":63,"props":64,"children":68},"pre",{"className":65,"code":66,"language":67,"meta":16,"style":16},"language-bash shiki shiki-themes github-dark","# Liquid-Theme Deploy (durchschnittlich)\nshopify theme push --store=production\n⏱ Upload: 4m 20s\n⏱ Verarbeitung: 7m 40s\n✅ Gesamt: 12m 00s\n","bash",[69],{"type":33,"tag":70,"props":71,"children":72},"code",{"__ignoreMap":16},[73,85,112,136,159],{"type":33,"tag":74,"props":75,"children":78},"span",{"class":76,"line":77},"line",1,[79],{"type":33,"tag":74,"props":80,"children":82},{"style":81},"--shiki-default:#6A737D",[83],{"type":38,"value":84},"# Liquid-Theme Deploy (durchschnittlich)\n",{"type":33,"tag":74,"props":86,"children":88},{"class":76,"line":87},2,[89,95,101,106],{"type":33,"tag":74,"props":90,"children":92},{"style":91},"--shiki-default:#B392F0",[93],{"type":38,"value":94},"shopify",{"type":33,"tag":74,"props":96,"children":98},{"style":97},"--shiki-default:#9ECBFF",[99],{"type":38,"value":100}," theme",{"type":33,"tag":74,"props":102,"children":103},{"style":97},[104],{"type":38,"value":105}," push",{"type":33,"tag":74,"props":107,"children":109},{"style":108},"--shiki-default:#79B8FF",[110],{"type":38,"value":111}," --store=production\n",{"type":33,"tag":74,"props":113,"children":115},{"class":76,"line":114},3,[116,121,126,131],{"type":33,"tag":74,"props":117,"children":118},{"style":91},[119],{"type":38,"value":120},"⏱",{"type":33,"tag":74,"props":122,"children":123},{"style":97},[124],{"type":38,"value":125}," Upload:",{"type":33,"tag":74,"props":127,"children":128},{"style":97},[129],{"type":38,"value":130}," 4m",{"type":33,"tag":74,"props":132,"children":133},{"style":97},[134],{"type":38,"value":135}," 20s\n",{"type":33,"tag":74,"props":137,"children":139},{"class":76,"line":138},4,[140,144,149,154],{"type":33,"tag":74,"props":141,"children":142},{"style":91},[143],{"type":38,"value":120},{"type":33,"tag":74,"props":145,"children":146},{"style":97},[147],{"type":38,"value":148}," Verarbeitung:",{"type":33,"tag":74,"props":150,"children":151},{"style":97},[152],{"type":38,"value":153}," 7m",{"type":33,"tag":74,"props":155,"children":156},{"style":97},[157],{"type":38,"value":158}," 40s\n",{"type":33,"tag":74,"props":160,"children":162},{"class":76,"line":161},5,[163,168,173,178],{"type":33,"tag":74,"props":164,"children":165},{"style":91},[166],{"type":38,"value":167},"✅",{"type":33,"tag":74,"props":169,"children":170},{"style":97},[171],{"type":38,"value":172}," Gesamt:",{"type":33,"tag":74,"props":174,"children":175},{"style":97},[176],{"type":38,"value":177}," 12m",{"type":33,"tag":74,"props":179,"children":180},{"style":97},[181],{"type":38,"value":182}," 00s\n",{"type":33,"tag":34,"props":184,"children":185},{},[186],{"type":38,"value":187},"Liquid's Trade-off: einfaches Setup, null Infrastructure-Management — aber keine Performance-Kontrolle, langsame Iteration.",{"type":33,"tag":41,"props":189,"children":191},{"id":190},"hydrogens-versprechen",[192],{"type":38,"value":193},"Hydrogen's Versprechen",{"type":33,"tag":34,"props":195,"children":196},{},[197],{"type":38,"value":198},"Hydrogen ist Shopifys Remix-basiertes Headless-Framework. React Server Components, Streaming SSR, Edge-Deployment. Der architektonische Unterschied: Bei Liquid rendert der Shopify-Server HTML. Bei Hydrogen deployest du deinen eigenen Edge-Server (Oxygen, Cloudflare, Vercel). Du rufst die Storefront-API direkt auf, streamst die Response in den Component-Tree.",{"type":33,"tag":34,"props":200,"children":201},{},[202],{"type":38,"value":203},"TTFB-Versprechen: Weil du vom Edge-Node renderst, fällt die Shopify-Server-Latenz weg. Deploy zu Cloudflare Workers senkt den Median-TTFB auf 100–200ms (Cloudflare POP-Latenz + Storefront-API RTT). Build-Zeit-Versprechen: Vite-basierter Build, inkrementelles Deployment, unter 2 Minuten.",{"type":33,"tag":34,"props":205,"children":206},{},[207],{"type":38,"value":208},"Aber neben den Versprechen gibt es Kosten: Migrations-Aufwand, Developer Learning Curve, Infrastructure-Ownership. Wir modellierten diese Trade-offs numerisch.",{"type":33,"tag":210,"props":211,"children":213},"h3",{"id":212},"benchmark-methodologie",[214],{"type":38,"value":215},"Benchmark-Methodologie",{"type":33,"tag":34,"props":217,"children":218},{},[219],{"type":38,"value":220},"Wir setzten zwei Umgebungen auf:",{"type":33,"tag":222,"props":223,"children":224},"ol",{},[225,237],{"type":33,"tag":226,"props":227,"children":228},"li",{},[229,235],{"type":33,"tag":230,"props":231,"children":232},"strong",{},[233],{"type":38,"value":234},"Liquid Baseline:",{"type":38,"value":236}," Production-Store, Dawn-Theme-Fork, 80+ Sections, Cloudflare Proxy (Cache Bypass)",{"type":33,"tag":226,"props":238,"children":239},{},[240,245],{"type":33,"tag":230,"props":241,"children":242},{},[243],{"type":38,"value":244},"Hydrogen Prototype:",{"type":38,"value":246}," Identische Homepage-Component-Tree, Cloudflare-Workers-Deployment, Storefront-API 2024-01",{"type":33,"tag":34,"props":248,"children":249},{},[250],{"type":38,"value":251},"Test-Setup:",{"type":33,"tag":253,"props":254,"children":255},"ul",{},[256,261,266],{"type":33,"tag":226,"props":257,"children":258},{},[259],{"type":38,"value":260},"WebPageTest (Dulles-Location, Moto G4, 3G Fast)",{"type":33,"tag":226,"props":262,"children":263},{},[264],{"type":38,"value":265},"Median-Werte aus 3 Läufen",{"type":33,"tag":226,"props":267,"children":268},{},[269],{"type":38,"value":270},"Cache-Cold-State (Cache-Flush vor jedem Test)",{"type":33,"tag":34,"props":272,"children":273},{},[274],{"type":38,"value":275},"Metriken:",{"type":33,"tag":253,"props":277,"children":278},{},[279,284,289,294],{"type":33,"tag":226,"props":280,"children":281},{},[282],{"type":38,"value":283},"TTFB (Time to First Byte)",{"type":33,"tag":226,"props":285,"children":286},{},[287],{"type":38,"value":288},"LCP (Largest Contentful Paint)",{"type":33,"tag":226,"props":290,"children":291},{},[292],{"type":38,"value":293},"TBT (Total Blocking Time)",{"type":33,"tag":226,"props":295,"children":296},{},[297],{"type":38,"value":298},"Build-Zeit (im CI\u002FCD gemessen)",{"type":33,"tag":41,"props":300,"children":302},{"id":301},"performance-vergleich",[303],{"type":38,"value":304},"Performance-Vergleich",{"type":33,"tag":34,"props":306,"children":307},{},[308],{"type":38,"value":309},"Ergebnisse (Median aus 3 Läufen):",{"type":33,"tag":311,"props":312,"children":313},"table",{},[314,343],{"type":33,"tag":315,"props":316,"children":317},"thead",{},[318],{"type":33,"tag":319,"props":320,"children":321},"tr",{},[322,328,333,338],{"type":33,"tag":323,"props":324,"children":325},"th",{},[326],{"type":38,"value":327},"Metrik",{"type":33,"tag":323,"props":329,"children":330},{},[331],{"type":38,"value":332},"Liquid",{"type":33,"tag":323,"props":334,"children":335},{},[336],{"type":38,"value":337},"Hydrogen",{"type":33,"tag":323,"props":339,"children":340},{},[341],{"type":38,"value":342},"Differenz",{"type":33,"tag":344,"props":345,"children":346},"tbody",{},[347,377,406,435],{"type":33,"tag":319,"props":348,"children":349},{},[350,359,364,369],{"type":33,"tag":351,"props":352,"children":353},"td",{},[354],{"type":33,"tag":230,"props":355,"children":356},{},[357],{"type":38,"value":358},"TTFB",{"type":33,"tag":351,"props":360,"children":361},{},[362],{"type":38,"value":363},"840ms",{"type":33,"tag":351,"props":365,"children":366},{},[367],{"type":38,"value":368},"180ms",{"type":33,"tag":351,"props":370,"children":371},{},[372],{"type":33,"tag":230,"props":373,"children":374},{},[375],{"type":38,"value":376},"-79%",{"type":33,"tag":319,"props":378,"children":379},{},[380,388,393,398],{"type":33,"tag":351,"props":381,"children":382},{},[383],{"type":33,"tag":230,"props":384,"children":385},{},[386],{"type":38,"value":387},"LCP",{"type":33,"tag":351,"props":389,"children":390},{},[391],{"type":38,"value":392},"2,4s",{"type":33,"tag":351,"props":394,"children":395},{},[396],{"type":38,"value":397},"1,1s",{"type":33,"tag":351,"props":399,"children":400},{},[401],{"type":33,"tag":230,"props":402,"children":403},{},[404],{"type":38,"value":405},"-54%",{"type":33,"tag":319,"props":407,"children":408},{},[409,417,422,427],{"type":33,"tag":351,"props":410,"children":411},{},[412],{"type":33,"tag":230,"props":413,"children":414},{},[415],{"type":38,"value":416},"TBT",{"type":33,"tag":351,"props":418,"children":419},{},[420],{"type":38,"value":421},"680ms",{"type":33,"tag":351,"props":423,"children":424},{},[425],{"type":38,"value":426},"220ms",{"type":33,"tag":351,"props":428,"children":429},{},[430],{"type":33,"tag":230,"props":431,"children":432},{},[433],{"type":38,"value":434},"-68%",{"type":33,"tag":319,"props":436,"children":437},{},[438,446,451,456],{"type":33,"tag":351,"props":439,"children":440},{},[441],{"type":33,"tag":230,"props":442,"children":443},{},[444],{"type":38,"value":445},"Build-Zeit",{"type":33,"tag":351,"props":447,"children":448},{},[449],{"type":38,"value":450},"12m 00s",{"type":33,"tag":351,"props":452,"children":453},{},[454],{"type":38,"value":455},"1m 30s",{"type":33,"tag":351,"props":457,"children":458},{},[459],{"type":33,"tag":230,"props":460,"children":461},{},[462],{"type":38,"value":463},"-88%",{"type":33,"tag":34,"props":465,"children":466},{},[467],{"type":38,"value":468},"Der TTFB-Rückgang entsprach unseren Erwartungen. Bei Hydrogen erreicht der Cloudflare-Workers-Edge-Node die Storefront-API mit 40–60ms RTT (Shopifys CDN läuft ohnehin über Cloudflare). Bei Liquid macht der Shopify-Server Liquid-Parse + API-Aufruf + HTML-Zusammenstellung — minimum 600ms Overhead.",{"type":33,"tag":34,"props":470,"children":471},{},[472],{"type":38,"value":473},"LCP-Gewinn kommt vom Streaming SSR. Hydrogen sendet das erste Byte früh und streamt HTML. Critical Content (Hero-Image, ATF-Produktgrid) wird zuerst gerendert, Below-the-Fold lazy-geladen. Bei Liquid blockiert HTML das Rendering — die ganze Seite wartet, bis sie bereit ist.",{"type":33,"tag":34,"props":475,"children":476},{},[477],{"type":38,"value":478},"TBT-Rückgang resultiert aus Bundle-Größe + Hydrations-Optimierung. Bei Hydrogen nutzen wir React Server Components — Client-seitiges JS-Bundle 120KB (gzip). Das Liquid-Theme hatte jQuery + Custom-Scripts mit 340KB. Hydrations-Zeit fiel.",{"type":33,"tag":34,"props":480,"children":481},{},[482],{"type":38,"value":483},"Build-Zeit-Unterschied hat direkte Auswirkung auf Developer Velocity. 12 Minuten statt 90 Sekunden — wenn du 10 Deployments täglich machst, sind das 115 Minuten Zeitersparnis. CI\u002FCD beschleunigt sich, A\u002FB-Test-Iteration wird schneller.",{"type":33,"tag":63,"props":485,"children":489},{"className":486,"code":487,"language":488,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Hydrogen Streaming-SSR-Beispiel (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: erste Response kommt sofort zurück\n  return defer({\n    products: productsPromise,\n    collections: collectionsPromise,\n  });\n}\n","typescript",[490],{"type":33,"tag":70,"props":491,"children":492},{"__ignoreMap":16},[493,501,557,590,598,640,678,686,695,713,722,731,740],{"type":33,"tag":74,"props":494,"children":495},{"class":76,"line":77},[496],{"type":33,"tag":74,"props":497,"children":498},{"style":81},[499],{"type":38,"value":500},"\u002F\u002F Hydrogen Streaming-SSR-Beispiel (Remix Loader)\n",{"type":33,"tag":74,"props":502,"children":503},{"class":76,"line":87},[504,510,515,520,525,531,537,542,547,552],{"type":33,"tag":74,"props":505,"children":507},{"style":506},"--shiki-default:#F97583",[508],{"type":38,"value":509},"export",{"type":33,"tag":74,"props":511,"children":512},{"style":506},[513],{"type":38,"value":514}," async",{"type":33,"tag":74,"props":516,"children":517},{"style":506},[518],{"type":38,"value":519}," function",{"type":33,"tag":74,"props":521,"children":522},{"style":91},[523],{"type":38,"value":524}," loader",{"type":33,"tag":74,"props":526,"children":528},{"style":527},"--shiki-default:#E1E4E8",[529],{"type":38,"value":530},"({ ",{"type":33,"tag":74,"props":532,"children":534},{"style":533},"--shiki-default:#FFAB70",[535],{"type":38,"value":536},"context",{"type":33,"tag":74,"props":538,"children":539},{"style":527},[540],{"type":38,"value":541}," }",{"type":33,"tag":74,"props":543,"children":544},{"style":506},[545],{"type":38,"value":546},":",{"type":33,"tag":74,"props":548,"children":549},{"style":91},[550],{"type":38,"value":551}," LoaderFunctionArgs",{"type":33,"tag":74,"props":553,"children":554},{"style":527},[555],{"type":38,"value":556},") {\n",{"type":33,"tag":74,"props":558,"children":559},{"class":76,"line":114},[560,565,570,575,580,585],{"type":33,"tag":74,"props":561,"children":562},{"style":506},[563],{"type":38,"value":564},"  const",{"type":33,"tag":74,"props":566,"children":567},{"style":527},[568],{"type":38,"value":569}," { ",{"type":33,"tag":74,"props":571,"children":572},{"style":108},[573],{"type":38,"value":574},"storefront",{"type":33,"tag":74,"props":576,"children":577},{"style":527},[578],{"type":38,"value":579}," } ",{"type":33,"tag":74,"props":581,"children":582},{"style":506},[583],{"type":38,"value":584},"=",{"type":33,"tag":74,"props":586,"children":587},{"style":527},[588],{"type":38,"value":589}," context;\n",{"type":33,"tag":74,"props":591,"children":592},{"class":76,"line":138},[593],{"type":33,"tag":74,"props":594,"children":595},{"style":527},[596],{"type":38,"value":597},"  \n",{"type":33,"tag":74,"props":599,"children":600},{"class":76,"line":161},[601,605,610,615,620,625,630,635],{"type":33,"tag":74,"props":602,"children":603},{"style":506},[604],{"type":38,"value":564},{"type":33,"tag":74,"props":606,"children":607},{"style":108},[608],{"type":38,"value":609}," productsPromise",{"type":33,"tag":74,"props":611,"children":612},{"style":506},[613],{"type":38,"value":614}," =",{"type":33,"tag":74,"props":616,"children":617},{"style":527},[618],{"type":38,"value":619}," storefront.",{"type":33,"tag":74,"props":621,"children":622},{"style":91},[623],{"type":38,"value":624},"query",{"type":33,"tag":74,"props":626,"children":627},{"style":527},[628],{"type":38,"value":629},"(",{"type":33,"tag":74,"props":631,"children":632},{"style":108},[633],{"type":38,"value":634},"PRODUCTS_QUERY",{"type":33,"tag":74,"props":636,"children":637},{"style":527},[638],{"type":38,"value":639},");\n",{"type":33,"tag":74,"props":641,"children":643},{"class":76,"line":642},6,[644,648,653,657,661,665,669,674],{"type":33,"tag":74,"props":645,"children":646},{"style":506},[647],{"type":38,"value":564},{"type":33,"tag":74,"props":649,"children":650},{"style":108},[651],{"type":38,"value":652}," collectionsPromise",{"type":33,"tag":74,"props":654,"children":655},{"style":506},[656],{"type":38,"value":614},{"type":33,"tag":74,"props":658,"children":659},{"style":527},[660],{"type":38,"value":619},{"type":33,"tag":74,"props":662,"children":663},{"style":91},[664],{"type":38,"value":624},{"type":33,"tag":74,"props":666,"children":667},{"style":527},[668],{"type":38,"value":629},{"type":33,"tag":74,"props":670,"children":671},{"style":108},[672],{"type":38,"value":673},"COLLECTIONS_QUERY",{"type":33,"tag":74,"props":675,"children":676},{"style":527},[677],{"type":38,"value":639},{"type":33,"tag":74,"props":679,"children":681},{"class":76,"line":680},7,[682],{"type":33,"tag":74,"props":683,"children":684},{"style":527},[685],{"type":38,"value":597},{"type":33,"tag":74,"props":687,"children":689},{"class":76,"line":688},8,[690],{"type":33,"tag":74,"props":691,"children":692},{"style":81},[693],{"type":38,"value":694},"  \u002F\u002F Stream: erste Response kommt sofort zurück\n",{"type":33,"tag":74,"props":696,"children":697},{"class":76,"line":27},[698,703,708],{"type":33,"tag":74,"props":699,"children":700},{"style":506},[701],{"type":38,"value":702},"  return",{"type":33,"tag":74,"props":704,"children":705},{"style":91},[706],{"type":38,"value":707}," defer",{"type":33,"tag":74,"props":709,"children":710},{"style":527},[711],{"type":38,"value":712},"({\n",{"type":33,"tag":74,"props":714,"children":716},{"class":76,"line":715},10,[717],{"type":33,"tag":74,"props":718,"children":719},{"style":527},[720],{"type":38,"value":721},"    products: productsPromise,\n",{"type":33,"tag":74,"props":723,"children":725},{"class":76,"line":724},11,[726],{"type":33,"tag":74,"props":727,"children":728},{"style":527},[729],{"type":38,"value":730},"    collections: collectionsPromise,\n",{"type":33,"tag":74,"props":732,"children":734},{"class":76,"line":733},12,[735],{"type":33,"tag":74,"props":736,"children":737},{"style":527},[738],{"type":38,"value":739},"  });\n",{"type":33,"tag":74,"props":741,"children":743},{"class":76,"line":742},13,[744],{"type":33,"tag":74,"props":745,"children":746},{"style":527},[747],{"type":38,"value":748},"}\n",{"type":33,"tag":34,"props":750,"children":751},{},[752,754,760],{"type":38,"value":753},"Die ",{"type":33,"tag":70,"props":755,"children":757},{"className":756},[],[758],{"type":38,"value":759},"defer",{"type":38,"value":761},"-API streamt Promises. Der Client erhält erstes HTML, die Seite rendert progressiv, während Daten ankommen. TTFB bleibt niedrig.",{"type":33,"tag":41,"props":763,"children":765},{"id":764},"migrations-kostenrechnung",[766],{"type":38,"value":767},"Migrations-Kostenrechnung",{"type":33,"tag":34,"props":769,"children":770},{},[771],{"type":38,"value":772},"Performance-Gewinn ist klar — aber der Übergang? Wir erstellten die folgende Aufschlüsselung:",{"type":33,"tag":34,"props":774,"children":775},{},[776],{"type":33,"tag":230,"props":777,"children":778},{},[779],{"type":38,"value":780},"Entwicklungs-Aufwand:",{"type":33,"tag":253,"props":782,"children":783},{},[784,789,794,799,804],{"type":33,"tag":226,"props":785,"children":786},{},[787],{"type":38,"value":788},"Theme → Hydrogen-Component-Migration: 160 Stunden (2 Senior-Developer, 4 Wochen)",{"type":33,"tag":226,"props":790,"children":791},{},[792],{"type":38,"value":793},"Storefront-API-Integration (GraphQL-Query-Rewrite): 40 Stunden",{"type":33,"tag":226,"props":795,"children":796},{},[797],{"type":38,"value":798},"CI\u002FCD-Pipeline-Setup (Cloudflare Workers): 16 Stunden",{"type":33,"tag":226,"props":800,"children":801},{},[802],{"type":38,"value":803},"QA + Edge-Case-Fixes: 24 Stunden",{"type":33,"tag":226,"props":805,"children":806},{},[807,812],{"type":33,"tag":230,"props":808,"children":809},{},[810],{"type":38,"value":811},"Gesamt:",{"type":38,"value":813}," 240 Stunden",{"type":33,"tag":34,"props":815,"children":816},{},[817],{"type":33,"tag":230,"props":818,"children":819},{},[820],{"type":38,"value":821},"Infrastructure-Kosten:",{"type":33,"tag":253,"props":823,"children":824},{},[825,830,835],{"type":33,"tag":226,"props":826,"children":827},{},[828],{"type":38,"value":829},"Cloudflare Workers: $5\u002FMo (kostenlos bis 100K Requests — unser Traffic 80K\u002FMo)",{"type":33,"tag":226,"props":831,"children":832},{},[833],{"type":38,"value":834},"Oxygen (Shopifys Edge-Plattform): $20\u002FMo Einsteiger-Tier",{"type":33,"tag":226,"props":836,"children":837},{},[838],{"type":38,"value":839},"Wir wählten Cloudflare — nutzen ohnehin Cloudflare Proxy",{"type":33,"tag":34,"props":841,"children":842},{},[843],{"type":33,"tag":230,"props":844,"children":845},{},[846],{"type":38,"value":847},"Wartungs-Overhead:",{"type":33,"tag":253,"props":849,"children":850},{},[851,856,861],{"type":33,"tag":226,"props":852,"children":853},{},[854],{"type":38,"value":855},"Hydrogen-Version muss alle 6 Monate aktualisiert werden (Remix-Upstream)",{"type":33,"tag":226,"props":857,"children":858},{},[859],{"type":38,"value":860},"Developer Learning Curve: Team braucht React + Remix-Erfahrung",{"type":33,"tag":226,"props":862,"children":863},{},[864],{"type":38,"value":865},"Bei Liquid nutzen wir Shopify Theme Store — Hydrogen ist Custom-Entwicklung",{"type":33,"tag":34,"props":867,"children":868},{},[869,871,876,878,883],{"type":38,"value":870},"One-Time-Migrations-Kosten: ",{"type":33,"tag":230,"props":872,"children":873},{},[874],{"type":38,"value":875},"240 Stunden × $80\u002FStunde = $19.200",{"type":38,"value":877},". Jährliche Infrastructure-Kosten: ",{"type":33,"tag":230,"props":879,"children":880},{},[881],{"type":38,"value":882},"$60",{"type":38,"value":884},".",{"type":33,"tag":34,"props":886,"children":887},{},[888],{"type":38,"value":889},"Wie modellierten wir die Gegenleistung? Zwei Punkte:",{"type":33,"tag":222,"props":891,"children":892},{},[893,909],{"type":33,"tag":226,"props":894,"children":895},{},[896,901,903,908],{"type":33,"tag":230,"props":897,"children":898},{},[899],{"type":38,"value":900},"Conversion-Rate-Impact:",{"type":38,"value":902}," Core Web Vitals korrelieren mit Conversion-Rate (Google\u002FDeloitte-Studie: 0,1s LCP-Senkung = 1–2% Conversion-Lift). Unsere LCP sank um 1,3s — konservativer Schätzwert 1,5% Lift. Bei monatlichem Revenue von $200K = $3K\u002FMo Lift. Jährlich ",{"type":33,"tag":230,"props":904,"children":905},{},[906],{"type":38,"value":907},"$36K",{"type":38,"value":884},{"type":33,"tag":226,"props":910,"children":911},{},[912,917,919,924],{"type":33,"tag":230,"props":913,"children":914},{},[915],{"type":38,"value":916},"Developer Velocity:",{"type":38,"value":918}," Build-Zeit um 88% reduziert. Team macht 40 Deployments\u002FMonat. Jedes Deployment spart 10,5 Minuten = Monat 420 Minuten = 7 Stunden. Senior-Developer $80\u002FStunde — monatliche Ersparnis $560. Jährlich ",{"type":33,"tag":230,"props":920,"children":921},{},[922],{"type":38,"value":923},"$6.700",{"type":38,"value":884},{"type":33,"tag":34,"props":926,"children":927},{},[928,930,935],{"type":38,"value":929},"Amortisationszeit: $19.200 \u002F ($36K + $6.700) = ",{"type":33,"tag":230,"props":931,"children":932},{},[933],{"type":38,"value":934},"5,4 Monate",{"type":38,"value":884},{"type":33,"tag":34,"props":937,"children":938},{},[939],{"type":38,"value":940},"Diese Rechnung rechtfertigt die Migration. Performance-Gewinn + Developer-Velocity zahlen die Migrations-Kosten in 6 Monaten zurück.",{"type":33,"tag":41,"props":942,"children":944},{"id":943},"trade-offs-und-grenzen",[945],{"type":38,"value":946},"Trade-offs und Grenzen",{"type":33,"tag":34,"props":948,"children":949},{},[950],{"type":38,"value":951},"Hydrogen ist nicht für jeden Store die richtige Wahl. In diesen Szenarien bleibt Liquid sinnvoll:",{"type":33,"tag":34,"props":953,"children":954},{},[955],{"type":33,"tag":230,"props":956,"children":957},{},[958],{"type":38,"value":959},"Liquid sollte bleiben:",{"type":33,"tag":253,"props":961,"children":962},{},[963,968,973,978],{"type":33,"tag":226,"props":964,"children":965},{},[966],{"type":38,"value":967},"Traffic niedrig (\u003C10K\u002FMo Visitor) — TTFB-Unterschied wirkt nicht auf Conversion",{"type":33,"tag":226,"props":969,"children":970},{},[971],{"type":38,"value":972},"Team kennt React\u002FTypeScript nicht — Learning Curve verdoppelt Migrations-Kosten",{"type":33,"tag":226,"props":974,"children":975},{},[976],{"type":38,"value":977},"Theme-Store-Template reicht — keine Custom-UI\u002FUX-Anforderungen",{"type":33,"tag":226,"props":979,"children":980},{},[981],{"type":38,"value":982},"Infrastructure-Management unerwünscht — Shopify-Server ist simpel",{"type":33,"tag":34,"props":984,"children":985},{},[986],{"type":33,"tag":230,"props":987,"children":988},{},[989],{"type":38,"value":990},"Hydrogen sollte es sein:",{"type":33,"tag":253,"props":992,"children":993},{},[994,999,1015,1020],{"type":33,"tag":226,"props":995,"children":996},{},[997],{"type":38,"value":998},"Traffic hoch (>50K\u002FMo) — jede 100ms TTFB beeinflußt Conversion",{"type":33,"tag":226,"props":1000,"children":1001},{},[1002,1004,1013],{"type":38,"value":1003},"Custom UI\u002FUX notwendig — ",{"type":33,"tag":1005,"props":1006,"children":1010},"a",{"href":1007,"rel":1008},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fheadless",[1009],"nofollow",[1011],{"type":38,"value":1012},"Headless Commerce",{"type":38,"value":1014},"-Architektur bietet Flexibilität",{"type":33,"tag":226,"props":1016,"children":1017},{},[1018],{"type":38,"value":1019},"A\u002FB-Test-Iteration ist kritisch — CI\u002FCD muss unter 2 Minuten laufen",{"type":33,"tag":226,"props":1021,"children":1022},{},[1023],{"type":38,"value":1024},"Developer-Team arbeitet mit modernem Frontend-Stack (React\u002FRemix)",{"type":33,"tag":34,"props":1026,"children":1027},{},[1028],{"type":38,"value":1029},"Hydrogen hat auch Wartungskosten. Remix bringt alle 6 Monate Major-Versions. Hydrogen folgt dem. Bei Liquid garantiert Shopify Backward-Compatibility — altes Theme funktioniert in 5 Jahren noch. Hydrogen erfordert Disziplin bei Dependency-Updates.",{"type":33,"tag":34,"props":1031,"children":1032},{},[1033],{"type":38,"value":1034},"Edge-Deployment bringt auch Grenzen. Cloudflare-Workers-Runtime hat Beschränkungen (CPU-Zeit 50ms, Memory 128MB). Komplexe Backend-Logik (z.B. Recommendation Engine) läuft nicht am Edge — muß zum Origin-Server. Bei Liquid ist das kein Problem, Server-Seite ist unbegrenzt.",{"type":33,"tag":41,"props":1036,"children":1038},{"id":1037},"wo-wir-jetzt-stehen",[1039],{"type":38,"value":1040},"Wo wir jetzt stehen",{"type":33,"tag":34,"props":1042,"children":1043},{},[1044],{"type":38,"value":1045},"Wir wählten Hydrogen — weil TTFB um 79% sank, Build-Zeit um 88% fiel, Amortisationszeit 5,4 Monate. Aber die Entscheidung basierte auf einer Migrations-Kostenrechnung und klar definierten Trade-offs.",{"type":33,"tag":34,"props":1047,"children":1048},{},[1049],{"type":38,"value":1050},"Falls du auch eine Hydrogen-Migration erwägst: Beantworte erst diese Fragen. Monatlich wie viele Visitor? Kennt dein Team React? Brauchst du Custom-UI\u002FUX? Hast du eine CI\u002FCD-Pipeline? „Ja\" auf diese Fragen heißt: numerisches Modell erstellen. TTFB-Differenz in Conversion-Lift umrechnen, Developer-Velocity-Gewinn in Stunden multiplizieren. Wenn diese Zahlen die Migrations-Kosten rechtfertigen — dann los.",{"type":33,"tag":34,"props":1052,"children":1053},{},[1054,1056,1063],{"type":38,"value":1055},"Im Zuge einer Headless-Migration können wir dir ",{"type":33,"tag":1005,"props":1057,"children":1060},{"href":1058,"rel":1059},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fshopify",[1009],[1061],{"type":38,"value":1062},"Shopify-Partnerservices",{"type":38,"value":1064}," anbieten — Hydrogen-Migrations-Roadmap, Benchmark, Kostenmodell, schrittweiser Rollout-Plan inklusive.",{"type":33,"tag":1066,"props":1067,"children":1068},"style",{},[1069],{"type":38,"value":1070},"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":114,"depth":114,"links":1072},[1073,1074,1077,1078,1079,1080],{"id":43,"depth":87,"text":46},{"id":190,"depth":87,"text":193,"children":1075},[1076],{"id":212,"depth":114,"text":215},{"id":301,"depth":87,"text":304},{"id":764,"depth":87,"text":767},{"id":943,"depth":87,"text":946},{"id":1037,"depth":87,"text":1040},"markdown","content:de:tech:shopify-hydrogen-vs-liquid-kennzahlen-entscheidung.md","content","de\u002Ftech\u002Fshopify-hydrogen-vs-liquid-kennzahlen-entscheidung.md","de\u002Ftech\u002Fshopify-hydrogen-vs-liquid-kennzahlen-entscheidung","md",1778364198794]