Headless WooCommerce: Performance-Boost für E-Commerce

Standard-WooCommerce ist langsam. Das ist keine Meinung, das ist Messtechnik. Headless WooCommerce löst dieses Problem, aber nicht für jeden. Wann der Aufwand gerechtfertigt ist und was er wirklich bringt.

Warum Standard-WooCommerce langsam ist

WordPress und WooCommerce sind PHP-basiert und rendern jede Seite serverseitig. Das bedeutet: jeder Seitenaufruf erzeugt eine Datenbankabfrage, PHP-Ausführung, Template-Rendering. Selbst mit gutem Caching liegt man oft bei 1,5–3 Sekunden Ladezeit. Google bewertet Ladezeiten über 2,5 Sekunden als "schlecht" für Core Web Vitals.

Dazu kommen typische WooCommerce-Probleme: 40+ Plugins die sich gegenseitig beeinflussen, unoptimiertes Theme-CSS, JavaScript-Bloat. Ein durchschnittlicher WooCommerce-Shop lädt 3–6 MB JavaScript, das spürt man auf mobilen Verbindungen.

Was bedeutet "Headless"?

Beim Headless-Ansatz wird WordPress/WooCommerce nur noch als Backend genutzt: als Datenverwaltung, Bestellsystem, Produktkatalog. Das Frontend wird komplett getrennt, meist mit Next.js, gebaut.

Next.js kann Seiten statisch vorrendern (Static Site Generation) oder server-seitig mit Caching. Das Ergebnis: Ladezeiten unter 0,5 Sekunden für statische Inhalte, Lighthouse-Scores über 95. Die Kommunikation zwischen Frontend und WooCommerce läuft über die WooCommerce REST API oder GraphQL via WPGraphQL.

Praxisbeispiel: AllesWurst

AllesWurst ist ein B2B-Fleischerei-Großhandel mit einem WooCommerce-Backend. Das Frontend wurde mit Next.js neu gebaut, mit KI-Produktberater, automatisierter B2B-Preiskalkulation und Produktfilterung für mehrere tausend SKUs.

Resultat: Produktseiten laden in unter 400ms (statt vorher ~2,8 Sekunden). Der KI-Chatbot kann Produktdaten aus der WooCommerce-Datenbank in Echtzeit abrufen und Empfehlungen geben. Das wäre mit einem Standard-WooCommerce-Theme schlicht nicht möglich.

Technische Umsetzung

Die Architektur ist simpel in der Theorie, aber es gibt Fallstricke:

• Cart & Checkout: Der schwierigste Teil. WooCommerce-Sessions müssen mit dem Next.js-Frontend synchronisiert werden.
• Webhooks: Wenn ein Produkt in WooCommerce geändert wird, muss das Next.js-Frontend revalidiert werden.
• Auth: Kundenlogin, Bestellhistorie: alles muss über JWT-Tokens oder ähnliches abstrahiert werden.
• Plugins: Viele WooCommerce-Plugins (Page Builder, Frontend-Features) funktionieren im Headless-Setup nicht mehr.

Performance-Vergleich: Vorher vs. Nachher

Zahlen sagen mehr als Versprechen. Hier ein direkter Vergleich zwischen einem Standard-WooCommerce-Shop (mit gutem Hosting und aktiviertem Caching) und derselben Produktdatenbank mit einem Headless Next.js Frontend:

• Time to First Byte (TTFB): Standard WooCommerce: 800–1.200ms. Headless Next.js: 50–150ms. Das ist ein Faktor 8–10x.
• Largest Contentful Paint (LCP): Standard WooCommerce: 2,5–3,5 Sekunden. Headless: 300–500ms. Google bewertet alles unter 2,5s als "gut", mit Headless liegt man weit darunter.
• Lighthouse Performance Score: Standard WooCommerce: 45–65. Headless Next.js: 95–100.
• Mobile (3G-Verbindung): Der Unterschied ist noch dramatischer. Standard WooCommerce auf 3G: 6–10 Sekunden Ladezeit. Headless: 1–2 Sekunden. Für mobile Nutzer ist das der Unterschied zwischen "Seite lädt" und "Nutzer springt ab".

Die SEO-Auswirkung ist direkt messbar: Google nutzt Core Web Vitals als Ranking-Faktor. Shops mit besseren Ladezeiten werden bei gleicher Relevanz bevorzugt platziert. Bei AllesWurst haben wir nach der Migration eine messbare Verbesserung der organischen Sichtbarkeit festgestellt.

SEO-Vorteile von Headless

Performance ist nur ein Teil der SEO-Geschichte. Headless WooCommerce mit Next.js bietet weitere entscheidende Vorteile für die Suchmaschinenoptimierung:

• Server-Side Rendering (SSR): Next.js liefert vollständiges HTML an den Googlebot. Im Gegensatz zu reinen React-SPAs muss Google kein JavaScript ausführen, um den Seiteninhalt zu sehen. Das eliminiert das JavaScript-Rendering-Problem komplett.
• Automatische Bildoptimierung: Mit next/image werden Produktbilder automatisch in modernen Formaten (WebP/AVIF) ausgeliefert und responsive Größen generiert. Das spart Bandbreite und verbessert die Ladezeiten ohne manuellen Aufwand.
• Saubere URL-Struktur: Keine WordPress-Parameter wie ?p=123 oder ?add-to-cart=456. Stattdessen semantische URLs wie /produkte/bio-rindfleisch, besser für Nutzer und Suchmaschinen.
• Structured Data (JSON-LD): Produktdaten, Bewertungen und Preise werden programmatisch als JSON-LD generiert, nicht über fehleranfällige WordPress-Plugins, sondern direkt aus den WooCommerce-API-Daten. Das erhöht die Chance auf Rich Snippets in Google.

Was ein fertiger Headless-Shop mitbringt

Damit niemand bei Null anfangen muss, baue ich Headless-Shops auf einer erprobten Basis auf. Live ansehen kannst du das Ergebnis samt Demo-Shops und kostenlosem Speed-Check auf headless.markusstoeger.com.

Was dazugehört:

• Produktlisting: Kategorie-Seiten mit Filtern und Sortierung, direkt angebunden an die WooCommerce REST API.
• Einzelproduktseite: Varianten, Bildergalerie, Beschreibung, alles aus WooCommerce-Daten gerendert.
• Warenkorb: Client-seitig verwaltet mit WooCommerce-Session-Synchronisierung.
• Checkout mit Stripe: Vollständiger Checkout-Flow inklusive Stripe-Zahlungsintegration.

Der Tech Stack: Next.js, TypeScript, WooCommerce REST API, Stripe-Integration. Weil diese Basis steht und in echten Shops erprobt ist, spart sie erfahrungsgemäß 2–4 Wochen gegenüber einer Implementierung von Grund auf.

Schritt-für-Schritt: Migration zu Headless

Eine Migration muss nicht chaotisch sein. Hier ist der bewährte Ablauf, den ich bei Projekten wie AllesWurst verwende:

• Schritt 1: WooCommerce REST API aktivieren und testen. API-Keys generieren, Endpunkte für Produkte, Kategorien und Bestellungen testen. Prüfen, ob alle benötigten Daten über die API verfügbar sind.
• Schritt 2: Next.js Frontend aufsetzen. Grundstruktur mit Routing, Layout und API-Anbindung erstellen, entweder von Grund auf oder auf einer bestehenden Basis.
• Schritt 3: Produktdaten über API laden. Produktlisting, Kategorien und Filter implementieren. Static Site Generation für Produktseiten einrichten, damit sie blitzschnell laden.
• Schritt 4: Warenkorb und Checkout. Der komplexeste Teil der Migration. WooCommerce-Sessions müssen korrekt mit dem Frontend synchronisiert werden, inklusive Mengenänderungen und Gutscheincodes.
• Schritt 5: Zahlungsanbieter integrieren. Stripe, PayPal oder andere Payment-Provider anbinden. Die Zahlungslogik läuft teilweise über WooCommerce, teilweise direkt über die Provider-APIs.
• Schritt 6: Webhooks einrichten. Echtzeit-Sync zwischen WooCommerce und dem Frontend. Wenn ein Produkt im Backend geändert wird, muss die entsprechende Seite im Frontend automatisch neu generiert werden.
• Schritt 7: DNS umschalten und Go-Live. DNS auf das neue Frontend umleiten. Das WooCommerce-Backend läuft weiterhin auf einer Subdomain für die Verwaltung.

Realistischer Zeitrahmen: 4–8 Wochen für einen mittelgroßen Shop mit 500–2.000 Produkten. Auf einer erprobten Basis lässt sich das auf 3–5 Wochen reduzieren.

Wann lohnt es sich?

Headless lohnt sich, wenn:

• Dein Shop mehr als 500 Produkte hat und Performance messbar leidet
• Du individuelle UX brauchst, die mit Standard-Themes nicht machbar ist
• Du KI-Features, Custom-Flows oder externe Integrationen einbinden willst
• Budget von mindestens €5.000–15.000 für die Erstimplementierung vorhanden ist

Für einen Shop mit 50 Produkten und Standard-Checkout ist Headless Overkill. Dann reicht ein gut optimiertes WooCommerce-Theme mit Caching. Aber wenn du an die Grenzen von WordPress stößt, ist Headless der sauberste Weg raus.