Wie wir für Ergotopia mit Composable Commerce und unserer hubble PWA maximale Performance und redaktionelle Freiheit vereinten

hubble commerceProgressive Web App

Der stark wachsende Onlineshop des Ergonomie-Experten Ergotopia stieß durch komplexe Produkte und einen extrem inhaltsstarken Gesundheitsblog an seine Leistungsgrenzen. Durch unsere Implementierung einer Composable-Commerce-Architektur – bestehend aus Shopware 6 als Headless-Backend, unserer hubble PWA als Frontend und einem dedizierten Headless-CMS – haben wir ein extrem schnelles System geschaffen, das herausragende Core Web Vitals liefert und den Redakteuren grenzenlose Freiheiten bietet.

Projektübersicht

Kunde: Ergotopia GmbH
Branche: E-Commerce / Gesundheits- & Büromöbel
Plattform: Shopware 6, hubble PWA, Headless CMS
Herausforderung: Starres Altsystem, Performance-Einbrüche bei komplexem Content, individuelle Checkout-Anforderungen
Lösung: Unser Composable-Commerce-Ansatz, Headless-Architektur, individuelle Frontend-Checkout-Entwicklung durch unser Team
Ergebnis: Exzellente Core Web Vitals, maximale Gestaltungsfreiheit für Redakteure, hochskalierbare Basis

Ausgangssituation und Problem

Ergotopia gehört zu den am schnellsten wachsenden Gesundheits- und Büromöbelunternehmen in Europa. Das Geschäftsmodell basiert nicht nur auf dem Verkauf stark erklärungsbedürftiger, ergonomischer Produkte an anspruchsvolle Kunden (B2B und B2C), sondern auch auf tiefer inhaltlicher Kompetenz, die über einen eigenen Gesundheitsblog vermittelt wird.

Typische Probleme in dieser Skalierungsphase, mit denen Ergotopia auf uns zukam:

Das bestehende Shopsystem stieß durch das enorme Unternehmenswachstum spürbar an seine Grenzen.
Das ständige Hinzufügen einzelner Features (Flickschusterei) machte das System träge und fehleranfällig („es lief einfach nicht mehr rund“).
Detailverliebte Content-Seiten luden zu langsam, was die User Experience (UX) und die Suchmaschinen-Rankings stark gefährdete.

Zielsetzung des Projekts

Ein vollständiger Relaunch war unumgänglich, um das Ergotopia-Motto „Alles auf einmal“ technologisch sauber abzubilden. Gemeinsam mit unserem Kunden haben wir folgende Ziele definiert:

Hohe Performance: Detailverliebte Seiten müssen sich für den Nutzer „in null Komma nix“ aufbauen.
Hohe Individualität: Maximale redaktionelle Freiheit für den Wissensbereich und maßgeschneiderte Checkouts.
System-Integration: Reibungslose Einbindung des bestehenden ERP-Systems in die neue Architektur.
Skalierbarkeit: Unser System muss das weitere Wachstum und die geplante Internationalisierung perspektivisch sicher abbilden können.

Lösung und Architektur

Um die gegensätzlichen Anforderungen von komplexem E-Commerce und extrem flexibler Content-Pflege zu vereinen, entschieden wir uns bei digital.manufaktur ganz bewusst gegen ein starres monolithisches System und für Composable Commerce.

Das bedeutet: Wir setzen das System aus verschiedenen, hochspezialisierten „Expertensystemen“ (Best-of-Breed) zusammen.

Backend (Shopware 6): Wir haben Shopware „kopflos“ gemacht (Headless). Es fungiert nun ausschließlich als robuster, pflegeleichter Motor für die reine E-Commerce- und Produktlogik.
Frontend (hubble PWA): Als Frontend-Layer haben wir unsere hochperformante hubble Progressive Web App (PWA) im Ergotopia-Design über das Backend gelegt.
Content (Headless-CMS): Für den redaktionellen Wissensbereich integrierten wir eines der führenden Headless-Content-Management-Systeme tief in unser Frontend, um die starren Layout-Grenzen klassischer Shopsysteme komplett zu sprengen.

Umsetzung

Komponentenbasierte Content-Pflege: Gemeinsam mit dem Kunden definierten wir flexible strukturelle Komponenten (z. B. Text-Bild-Kombinationen, Interview-Layouts, Video-Integrationen). Die Ergotopia-Redaktion kann diese nun nahezu grenzenlos und völlig eigenständig kombinieren.
Individueller Checkout: Den Kassenbereich – ein absoluter Schlüsselbereich für die Conversion – programmierten wir komplett in unserem hubble-Frontend. So verhindern wir Frustration bei hohen Besucherzahlen und garantieren einen maximal reibungslosen Kaufprozess.
ERP-Verzahnung: Wir haben das Backend über leistungsstarke APIs nahtlos an die bestehende Warenwirtschaft von Ergotopia angebunden.

Ergebnisse und KPIs

Das optimale Zusammenspiel der von uns integrierten Teilsysteme („wie bei einer guten Fußballmannschaft“) liefert Ergotopia heute exakt die geforderte Symbiose aus Performance und redaktioneller Freiheit.

SEO-Boost durch Core Web Vitals: Unsere hubble PWA verarbeitet selbst komplexe multimediale Inhalte blitzschnell. Das führt zu herausragenden Werten bei den Google Core Web Vitals und belohnt den Shop mit extrem starken organischen Rankings.
Mobile-Exzellenz: Die Seiten funktionieren auf mobilen Endgeräten perfekt und ohne jegliche Einschränkungen im Nutzererlebnis.
Zukunftssicheres Wachstum: Der neue „Tech Stack“ ist modular und lässt sich von uns jederzeit nahtlos um weitere Microservices erweitern.

«Ergotopia sieht sich als schnell wachsendes Unternehmen vielen Herausforderungen gegenüber. Um mit unserer Website technisch auf der Höhe der Zeit zu bleiben und unseren Kunden (vor allem auch auf mobilen Geräten) das bestmögliche Erlebnis bieten zu können, setzen wir seit diesem Jahr auf die von der Digitalmanufaktur entwickelte PWA-Lösung „Hubble“. Wir haben uns viele technische Lösungen angeschaut und uns letztlich hierfür entschieden. Besonders überzeugt hat dabei die ausgezeichnete Performance des neuen Systems – bei gleichzeitiger Stabilität – und ich kann Hubble guten Gewissens weiterempfehlen. Mit dem neuen Tech Stack ist uns mit sehr guter Betreuung durch die Digitalmanufaktur ein hervorragender Relaunch gelungen. Die neue Webseite dient nun als solide, performante und nutzerfreundliche Basis für weiteres Wachstum.»

Alex Weitnauer

Co-Founder und Geschäftsführer der Ergotopia GmbH

Learnings und Best Practices

Composable Commerce für „Content & Commerce“: Ein klassisches Shopsystem ist selten ein exzellentes Content-Management-System (und umgekehrt). Wenn Inhalte (wie Gesundheitsblogs) essenziell für die Marke sind, ist unsere Trennung über einen Composable-Ansatz (Shop-Backend + Headless CMS) oft die einzig wirklich skalierbare Lösung.
Freiheit darf nicht zulasten der Performance gehen: Redakteure tendieren dazu, Seiten mit hochauflösenden Bildern und Videos zu „überladen“. Unsere PWA (Progressive Web App) als Frontend fungiert hier als intelligenter technologischer Puffer, der diese enormen Datenmengen durch geschicktes Caching rasend schnell ausliefert.
Der Checkout gehört ins schnelle Frontend: Ein langsamer Checkout kostet massiv Umsatz. Wenn wir den Kassenprozess individuell in unserem performanten PWA-Frontend abbilden, hält er auch den härtesten Traffic-Spitzen (z. B. am Black Friday) sicher stand.

FAQ: Composable Commerce & Headless CMS

Was verstehen wir unter Composable Commerce?

Composable Commerce ist für uns der modernste, modulare Architektur-Ansatz im E-Commerce. Anstatt eine „All-in-One“-Software (Monolith) zu nutzen, fügen wir verschiedene spezialisierte Einzelsysteme (Best-of-Breed) – z. B. Shopware für den Warenkorb, ein Headless CMS für Texte, Algolia für die Suche – über APIs (Schnittstellen) flexibel zu einer maßgeschneiderten Plattform zusammen.

Warum empfehlen wir ein Headless-CMS für Onlineshops?

Standard-Shopsysteme zwingen Redakteure oft in starre Raster und Layouts. Ein Headless-CMS verwaltet Inhalte hingegen völlig unabhängig vom Design. So geben wir dem Marketing-Team die maximale Freiheit, komplexe Landingpages, Interviews oder multimediale Blogs beliebig per Baukastensystem zusammenzusetzen, ohne dass unsere Entwickler bei jeder kleinen Änderung eingreifen müssen.

Wie beeinflusst unsere PWA die Google Core Web Vitals?

Google bewertet Onlineshops nach Metriken wie Ladezeit (LCP), visueller Stabilität (CLS) und Interaktivität (FID/INP). Unsere hubble PWA kommuniziert via API und lädt nur die wirklich benötigten Datenpakete asynchron nach, anstatt bei jedem Klick die gesamte Seite neu zu rendern. Das verbessert die Core Web Vitals drastisch und führt messbar zu besseren Suchmaschinen-Rankings.

Fazit

Unser Projekt für Ergotopia demonstriert eindrucksvoll die Überlegenheit moderner, modularer Software-Architekturen. Wenn starkes unternehmerisches Wachstum auf den Anspruch trifft, detailverliebte redaktionelle Inhalte performant auszuspielen, stoßen traditionelle Systeme schnell an ihre Grenzen. Durch unsere mutige Entscheidung für einen Composable-Commerce-Ansatz – mit Shopware 6 im Backend, einem Headless-CMS für die Redaktion und der hubble PWA als rasantem Frontend – verfügt Ergotopia nun über ein hochgradig skalierbares Ökosystem. Es vereint redaktionelle Unabhängigkeit mit technischer Exzellenz und sichert die Mobile-First-Wachstumsziele für die Zukunft perfekt ab.