9. Juni 2026 — Philip Kukulies
Astro als Shopify-Frontend: Lighthouse 100 in der Praxis
Von 3,2 Sekunden auf 0,8 Sekunden. Lighthouse Performance von 45 auf 100. Kein Demo-Projekt, kein optimiertes Test-Setup. Ein echter Shop, den Kunden täglich benutzen.
Viele Artikel über Astro und Shopify bleiben abstrakt. “Schneller”, “performanter”, “besser für SEO”. Hier siehst du, was das in einem realen Projekt bedeutet.
Das Projekt: apapachorealcacao.nl
Apapacho Real Cacao ist ein niederländischer Cacao-Shop. Die Website lief auf einem Standard-Shopify-Theme, war langsam und sah aus wie jeder andere Shopify-Store.
Ausgangssituation:
- Ladezeit: 3,2 Sekunden
- Lighthouse Performance Score: ~45
- Theme: Standard, kaum individuell
Nach dem Headless-Rebuild mit Astro:
- Ladezeit: 0,8 Sekunden
- Lighthouse Performance Score: 100
- Frontend: vollständig individuell, kein erkennbares Shopify-Template
Warum Astro?
Astro ist ein Framework, das für Content-Heavy-Websites und statische Ausgabe optimiert ist. Der Kernunterschied zu anderen Frameworks: Astro schickt standardmäßig kein JavaScript an den Browser, wenn es nicht gebraucht wird. Das macht die Seiten von Haus aus schneller.
Für einen Shopify-Storefront bedeutet das: Die Produktseiten, Kategorieseiten und die Startseite werden als statisches HTML ausgeliefert. Nur für interaktive Elemente wie den Warenkorb oder die Produktauswahl kommt JavaScript ins Spiel.
Wie die Shopify-Integration technisch funktioniert
Astro fragt Produktdaten, Kategorien und Inhalte über die Shopify Storefront API ab. Das passiert beim Build oder on-demand, je nach Anforderung.
Der Checkout läuft weiterhin über Shopify. Das ist ein bewusster Vorteil: Du behältst das bewährte Shopify-Checkout-System mit allem, was dazu gehört. Payment, Versand, Steuerberechnung, Rücksendungen. Das musst du nicht selbst bauen.
Das Ergebnis ist ein Frontend, das du vollständig kontrollierst, mit einem Backend, das Shopify zuverlässig seit Jahren betreibt.
Was das konkret für deinen Shop bedeutet
Deine Ladezeit entscheidet mit über deine Conversion-Rate
Jede Sekunde Ladezeit kostet Conversions — das belegen Studien aus dem E-Commerce seit Jahren. Wenn dein Shop drei Sekunden braucht und ein Wettbewerber unter einer Sekunde liegt, verlierst du Kunden, die du nie gesehen hast.
Dein Google-Ranking hängt auch von Ladezeiten ab
Core Web Vitals sind ein offizieller Rankingfaktor. Ein Lighthouse-Score von 100 bedeutet, dass dein Shop die technischen Anforderungen erfüllt, die Google für gute Platzierungen voraussetzt.
Dein Shop sieht aus wie dein Shop, nicht wie Shopify
Du bist nicht an Theme-Sektionen gebunden. Das Ergebnis sieht so aus, wie du es dir vorstellst — nicht wie der nächstbeste Template-Store in deiner Kategorie.
Für wen lohnt sich das?
Nicht für jeden Shop. Wenn du gerade erst anfängst oder ein kleines Sortiment hast und das Budget begrenzt ist, ist ein Standard-Shopify-Theme die pragmatischere Wahl.
Ein Headless-Setup mit Astro lohnt sich, wenn dein Shop wächst, wenn Performance ein echtes Geschäftsziel ist und wenn du aufgehört hast, wie jeder andere Shopify-Store auszusehen.
Ich habe solche Setups für Shops aus den Niederlanden, Deutschland und darüber hinaus gebaut. Jedes Projekt hat unterschiedliche Anforderungen — deshalb fangen wir mit einem Gespräch an, nicht mit einem Angebot.
Was würde das für deinen Shop bedeuten?
Schreib mir kurz, was du betreibst und womit du gerade nicht zufrieden bist. Ich sage dir direkt, ob Astro und Headless für dich Sinn ergeben oder ob der Aufwand in deinem Fall nicht gerechtfertigt wäre.