Träge Storefront auf Sub-Sekunden-Hydrogen-Seite umgebaut — Conversion +140%, AOV +38%

Die Ausgangslage

Die Marke hatte ein Kultprodukt und wachsende Medienpräsenz — und einen Online-Shop, der beides ausbremste. Das Shopify-Theme war über vier Jahre von drei verschiedenen Agenturen erweitert worden. Auf dem Desktop, mit guter Verbindung, tagsüber lief es. Überall sonst nicht.

Die Ausgangszahlen:

• 4,3s LCP auf Mobile, 2,8s auf Desktop.
• Conversion Rate bei 1,1% — halb so viel wie der Kategorie-Benchmark.
• Ein Checkout, der abstürzte, wenn der Kunde auf 3G einen Rabattcode eingab.
• Eine Markengeschichte, die auf der “Über uns”-Seite brillant erzählt war — und im Kaufprozess komplett fehlte.

Jede Agentur pitchte ein 4-monatiges Replatforming. Zeit war nicht da — die Frühjahrs-Kampagne stand im Kalender.

Unsere Roadmap

Wie wir gebaut haben

Woche 1 — Erst Audit, dann Meinung

Wir haben den alten Shop 48 Stunden mit Real User Monitoring vermessen, bevor wir eine Zeile angefasst haben. Drei unglamouröse Wahrheiten kamen heraus:

• 72% des Traffics war mobil, aber das Theme lud 1,4 MB JavaScript, bevor das erste Produktbild sichtbar war.
• Ein einziges Badge-Render-Script blockierte den Main Thread 680 ms auf jeder Seite.
• Der Checkout-Absturz war ein Klaviyo-Snippet, das bei langsamen Verbindungen stumm warf.

Mit den Daten in der Hand haben wir einen 3-tägigen Design-Sprint mit der Gründerin gemacht. Wir haben die Produktseite um das neu gebaut, was tatsächlich konvertiert — die Fotografie und die Stimme der Gründerin — und alles gestrichen, was kein Seitengewicht verdient.

Woche 2 — Hydrogen, aber mit Zurückhaltung

Wir haben auf Shopify Hydrogen (Remix + Oxygen) neu gebaut — React an der Edge, native Shopify-APIs, kein Headless-CMS-Aufschlag. Entscheidungen, die sich gelohnt haben:

• Checkout bei Shopify gelassen. Apple Pay, PayPal und die verhandelten Zahlungs-Raten blieben unangetastet. Niemanden interessiert, dass die Startseite schnell ist, wenn der Checkout am Launchtag bricht.
• Responsive Images über Shopify CDN, richtig dimensioniert, AVIF zuerst, loading="lazy" nur unter dem Fold. Das Produkthero lädt vor jeglichem JS.
• Kein Client-side Data Fetching auf der PDP. Produktdaten werden serverseitig in unter 50 ms gerendert. Das einzige JS auf der Seite ist der Add-to-Cart-Button.
• Klaviyo, sauber integriert. Deferred, non-blocking, mit lokalem Fallback — der Checkout wartet nie mehr auf einen Dritt-Tag.

Content-Migration lief parallel — ein einmaliges Skript hat Produkte, Collections und Metafields in die neue Content-Schicht gezogen und jede URL für SEO erhalten.

Woche 3 — Launch mit Netz und doppeltem Boden

Der Go-live war ein gestaffelter DNS-Cut-over mit 2% Canary für die ersten drei Stunden. RUM war ab Minute eins live. Die erste Woche lief ein sichtbarer A/B-Test gegen den alten Shop — gleicher Traffic, gleiche Kampagnen — damit wir den Uplift ehrlich messen konnten, statt Saison-Lift für uns zu beanspruchen.

Performance-Budgets waren von Tag eins in CI verankert:

• LCP-Budget: 1,8s auf simuliertem 3G-Mobile. PRs, die reißen, failen den Build.
• JavaScript-Budget: 120 KB gzip auf dem kritischen Pfad.
• Third-Party-Tag-Budget: 5 — alles darüber braucht eine schriftliche Begründung im PR.

Die Architektur

Schnell, standard, vom Kunden besessen.

• Storefront: Shopify Hydrogen (Remix) auf Oxygen — React an der Edge.
• Checkout: Native Shopify-Checkout — bewusst unangetastet.
• Content: Shopify-Metafields + Sanity für Redaktion, strukturiertes Content-Modell wiederverwendet.
• Bilder: Shopify CDN, AVIF + WebP, responsive srcset, below-the-fold lazy.
• Analytics: First-Party über Shopify + self-hosted Umami für datenschutzfreundliche Seiten-Analyse.
• Tracking: Meta CAPI und GA4 server-seitig, nie auf dem kritischen Pfad.
• Performance: Lighthouse + RUM in CI, durchgesetzte Budgets, die den Build brechen.

Die Ergebnisse

Gemessen über die 60 Tage nach Launch, gleiche Quellen, gleiche Kampagnen:

• Conversion Rate von 1,1% auf 2,64% — 2,4-facher Lift.
• Mobile LCP von 4,3s auf 1,6s — 62% schneller, komfortabel in Googles “good” Bereich.
• AOV +38% — die redaktionelle PDP hebt Komplementärprodukte, die das alte Theme versteckt hat.
• Checkout-Drop-off halbiert — es zahlt sich aus, wenn der Shop auf 3G nicht bricht.
• Core Web Vitals grün auf 97% der Sessions. Vorher: 41%.

Die nächste Kampagne lief im Monat darauf auf der neuen Storefront. Es war die erste Kampagne, in der die Website nicht der Flaschenhals war.

Wie es weitergeht

Ein leichtgewichtiger Abo-Flow (nativ von Shopify, angepasst) und ein Loyalty-Tier, die beide die bestehende Komponenten-Bibliothek weiterverwenden. Weil die Storefront Code ist, der dem Kunden gehört — kein Theme-Marketplace-Plugin — sind das Pull Requests, keine Beschaffungszyklen.

Wenn Ihr Shop sich langsam anfühlt, veraltet aussieht und Sie sich bei Kunden entschuldigen — ein 4-monatiges Replatforming ist selten nötig. Reden Sie mit uns. Wir auditen ehrlich, und wenn wir nichts spürbar Schnelleres versprechen können, sagen wir das auch.