Hubble: Mobile Performance neu gedacht

Herausforderung: Kunden erwarten “Mobile First”

Ein E-Commerce-Anbieter im B2B- und B2C-Bereich sah sich mit steigenden Anforderungen an mobile Performance konfrontiert: eine schnelle, reibungslose User Experience – auch unterwegs. 

Lange Ladezeiten, eingeschränkte Darstellungen oder technische Limits bei personalisierten Inhalten passten nicht mehr zum Anspruch des Unternehmens.

Ziel: Mobile Optimierung und Performance-Booster

Die Performance auf mobilen Endgeräten sollte gezielt verbessert werden – ohne die etablierte Backend-Struktur grundlegend zu verändern. Gleichzeitig war eine technologische Basis gefragt, mit der sich zukünftige Anforderungen flexibel abbilden lassen.

Dafür sollte das bisherige System – basierend auf Magento 1 inklusive sog. FullPage Caching (Varnish) – analysiert und gezielt entkoppelt werden. 

Die Ziele: 

• Modernisierte, mobilfreundliche Oberfläche 
• Deutlich bessere Gesamtperformance
• Erhalt etablierter Backend-Prozesse
• Schnelle und reibungslose Integration in die bestehende IT-Infrastruktur

Unsere Lösung: hubble als Frontend-Layer

Mit hubble commerce wurde ein Headless-Ansatz realisiert, der das bestehende System um einen modernen Frontend-Layer ergänzt – ohne die IT-Infrastruktur grundlegend verändern zu müssen. 

Der ganzheitliche technologischen Ansatz bietet zahlreiche Vorteile:

• Erhalt bestehender Geschäftsprozesse: Investitionen in die bestehende Systemlandschaft bleiben erhalten, das Frontend kann unabhängig weiterentwickelt werden.
  
  
• Effizientere Projektumsetzung: Kürzere Laufzeiten, geringere Kosten und hohe Flexibilität sorgen für einen optimierten Entwicklungsprozess mit Fokus auf die User Experience.
  
  
• Nahtlose Datenintegration: Die hubble API importiert Daten aus dem vorhandenen Shopsystem und bereitet sie optimal für das neue Frontend auf.
  
  
• Technologische Performance: Elasticsearch ermöglicht schnelle Antwortzeiten für Suche, Filter und Listings – ganz ohne FullPage-Caching. Ein entscheidender Vorteil bei dynamischen oder personalisierten Inhalten
  
  
• Ressourcenschonend & skalierbar: Die native Frontend-Performance bleibt auch bei komplexen, personalisierten Inhalten konstant hoch und spart gleichzeitig Systemressourcen.

Ergebnis: Schnelle Ladezeit = hohe Conversion

Ein zentrales Ziel bei diesem Projekt war die Optimierung der Ladezeit – denn diese wirkt sich unmittelbar auf das Nutzererlebnis und die Conversion Rate aus.

Vorher – Ladezeit mit Caching:

• Erste sichtbare Inhalte nach 3,2 Sekunden
  
  
• Vollständige Bedienbarkeit erst nach 11 Sekunden
  
  
• Wichtig dabei: Diese Werte galten nur für gecachte Seiten. Sobald Nutzer personalisierte Inhalte abriefen oder Filter nutzten, griff das Caching nicht mehr – die sogenannte Native Performance fiel deutlich ab.

Nachher – Ladezeiten mit hubble, ohne Caching:

• Erste Inhalte bereits nach 0,5 Sekunden sichtbar
  
  
• Komplette Nutzbarkeit nach rund 1,2 Sekunden – und das bei komplett deaktiviertem Caching. 

Diese konstante Performance – unabhängig von Nutzungsverhalten oder Gerät – ist ein klarer Vorteil im Tagesgeschäft.

Besonders relevant: Mobile Performance

Gerade auf mobilen Endgeräten zeigt sich der Unterschied deutlich. Klassische Systeme verlieren bei mobilen Internetverbindungen schnell an Performance, wenn kein Caching greift. 

hubble dagegen sorgt für kurze Ladezeiten und eine stabile Performance – auch bei individuellen Ansichten und schlechter Verbindung.

Perspektive: Progressive Web App (PWA)

Mit dem responsiven Frontend wurde die Grundlage für eine zukünftige Progressive Web App geschaffen. 

Eine PWA bietet:

• Verbesserte Mobile Experience durch App-Charakter und Push-Notifications
  
  
• Offline-Funktionalitäten und minimierte Ladezeiten auf Mobilgeräten
  
  
• Zusätzliche Design- und UX-Optimierungen mit geringem Aufwand