<div class="not-prose relative my-12 overflow-hidden rounded-3xl border border-white/10 bg-ink-900/40 p-6 md:p-10 reveal">
<div aria-hidden="true" class="absolute inset-0 opacity-70" style="background: radial-gradient(closest-side at 50% 50%, rgba(110,231,224,0.16), transparent 70%);"></div>
<div class="relative mb-6 flex items-center justify-between">
<div>
<p class="text-xs uppercase tracking-eyebrow text-copper-400">Largest Contentful Paint</p>
<h3 class="mt-1 font-display text-lg text-porcelain-100">Vom Schleichen zur Sub-Sekunde</h3>
</div>
<svg width="36" height="36" viewBox="0 0 36 36" class="float-soft text-copper-400" aria-hidden="true">
<path d="M 18 3 L 12 20 L 18 20 L 15 33 L 26 14 L 20 14 Z" fill="currentColor" opacity="0.85"/>
</svg>
</div>
<div class="relative space-y-5">
<div>
<div class="mb-2 flex items-center justify-between text-xs">
<span class="font-mono uppercase tracking-[0.18em] text-ink-300">Vorher</span>
<span class="font-display text-2xl text-ink-200">4,3s</span>
</div>
<div class="h-3 w-full overflow-hidden rounded-full bg-white/5">
<div class="bar-fill h-full w-[95%] rounded-full" style="background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.4));"></div>
</div>
</div>
<div>
<div class="mb-2 flex items-center justify-between text-xs">
<span class="font-mono uppercase tracking-[0.18em] text-copper-400">Nachher</span>
<span class="font-display text-3xl text-gradient-copper">1,6s</span>
</div>
<div class="h-3 w-full overflow-hidden rounded-full bg-white/5">
<div class="bar-fill h-full w-[35%] rounded-full" style="background: linear-gradient(90deg, rgba(232,149,74,0.5), rgba(232,149,74,1));"></div>
</div>
</div>
</div>
<div class="relative mt-8 grid grid-cols-3 gap-6 border-t border-white/10 pt-6 text-center">
<div>
<p class="font-display text-2xl leading-none text-gradient-copper">+140%</p>
<p class="mt-2 text-xs uppercase tracking-eyebrow text-ink-300">Conversion</p>
</div>
<div>
<p class="font-display text-2xl leading-none text-gradient-copper">−62%</p>
<p class="mt-2 text-xs uppercase tracking-eyebrow text-ink-300">LCP</p>
</div>
<div>
<p class="font-display text-2xl leading-none text-gradient-copper">+38%</p>
<p class="mt-2 text-xs uppercase tracking-eyebrow text-ink-300">AOV</p>
</div>
</div>
</div>
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
<div class="not-prose relative my-12">
<div aria-hidden="true" class="pointer-events-none absolute left-6 right-6 top-[3.5rem] hidden h-px bg-gradient-to-r from-transparent via-copper-500/30 to-transparent md:block"></div>
<div class="relative grid gap-5 md:grid-cols-3">
<article class="reveal group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-ink-800/50 via-ink-900/70 to-ink-950/90 p-6 transition-all duration-500 hover:-translate-y-2 hover:border-copper-500/50 hover:shadow-[0_24px_60px_-24px_rgba(232,149,74,0.35)]" style="transition-delay: 0ms;">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-copper-500/70 to-transparent opacity-60 transition-opacity group-hover:opacity-100"></div>
<span aria-hidden="true" class="pointer-events-none absolute -right-3 -top-5 select-none font-display text-[5.5rem] leading-none text-white/[0.04] transition-colors duration-500 group-hover:text-copper-500/15">01</span>
<div class="relative flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper-400 opacity-60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-copper-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Phase 01</span>
</div>
<p class="relative mt-5 text-xs uppercase tracking-eyebrow text-ink-300">Woche 1</p>
<h3 class="relative mt-2 font-display text-lg leading-snug text-porcelain-100">Audit & Design-Sprint</h3>
<p class="relative mt-3 text-sm leading-relaxed text-ink-300">Altes Shop-System mit RUM instrumentiert, heuristische Prüfung, PDP + Cart in 3-Tage-Sprint neu gestaltet.</p>
</article>
<article class="reveal group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-ink-800/50 via-ink-900/70 to-ink-950/90 p-6 transition-all duration-500 hover:-translate-y-2 hover:border-copper-500/50 hover:shadow-[0_24px_60px_-24px_rgba(232,149,74,0.35)]" style="transition-delay: 120ms;">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-copper-500/70 to-transparent opacity-60 transition-opacity group-hover:opacity-100"></div>
<span aria-hidden="true" class="pointer-events-none absolute -right-3 -top-5 select-none font-display text-[5.5rem] leading-none text-white/[0.04] transition-colors duration-500 group-hover:text-copper-500/15">02</span>
<div class="relative flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper-400 opacity-60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-copper-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Phase 02</span>
</div>
<p class="relative mt-5 text-xs uppercase tracking-eyebrow text-ink-300">Woche 2</p>
<h3 class="relative mt-2 font-display text-lg leading-snug text-porcelain-100">Build & Migration</h3>
<p class="relative mt-3 text-sm leading-relaxed text-ink-300">Hydrogen-Storefront live, Produkte + Inhalte migriert, Shopify-Checkout bewusst unangetastet (Apple Pay / PayPal bleiben).</p>
</article>
<article class="reveal group relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-ink-800/50 via-ink-900/70 to-ink-950/90 p-6 transition-all duration-500 hover:-translate-y-2 hover:border-copper-500/50 hover:shadow-[0_24px_60px_-24px_rgba(232,149,74,0.35)]" style="transition-delay: 240ms;">
<div aria-hidden="true" class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-copper-500/70 to-transparent opacity-60 transition-opacity group-hover:opacity-100"></div>
<span aria-hidden="true" class="pointer-events-none absolute -right-3 -top-5 select-none font-display text-[5.5rem] leading-none text-white/[0.04] transition-colors duration-500 group-hover:text-copper-500/15">03</span>
<div class="relative flex items-center gap-2">
<span class="relative flex h-2.5 w-2.5">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper-400 opacity-60"></span>
<span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-copper-400"></span>
</span>
<span class="font-mono text-[10px] uppercase tracking-[0.22em] text-copper-400">Phase 03</span>
</div>
<p class="relative mt-5 text-xs uppercase tracking-eyebrow text-ink-300">Woche 3</p>
<h3 class="relative mt-2 font-display text-lg leading-snug text-porcelain-100">Launch & Tuning</h3>
<p class="relative mt-3 text-sm leading-relaxed text-ink-300">Gestaffelter DNS-Cut-over, die erste Woche live A/B gegen das alte System, Performance-Budgets als CI-Gate.</p>
</article>
</div>
</div>
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.