Wie wir gemeinsam mit Coop-Experten die Lade-Performance der E-Commerce-Plattform optimieren
Die Coop Genossenschaft betreibt mit coop.ch eine der grössten E-Commerce-Plattformen der Schweiz in einer komplexen Infrastruktur. Die Plattform verarbeitet täglich tausende Transaktionen, was hohe Anforderungen an die Server- und Client-Side-Performance stellt. Besonders im mobilen Bereich fordert die dichte Datenmenge eine hocheffiziente Verarbeitung der Skripte im Browser.
Kunde
Daniel Eicher, Business Analyst, Coop Genossenschaft
Hohe JavaScript Execution Time
Die CompileTemplates-Funktion nahm auf mobilen Geräten in manchen Fällen > 1.5s in Anspruch und bot damit deutliches Potenzial für weitere Performance-Optimierungen.
Schlechte Web Vitals
Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS) lagen weit über den Google-Empfehlungen.
Überlastetes Script
Das Haupt-JavaScript-Bundle war zu gross und verlangsamte die gesamte Seite.
Blockierter Main-Thread
Die Main-Thread-Blockierung von über 2,5 Sekunden führte stellenweise zu verzögerter Interaktivität und zeigt zugleich klares Potenzial, die User Experience weiter zu verbessern.
Langsame Content-Darstellung
Produktkacheln wurden erst nach einigen Sekunden geladen – insbesondere auf mobilen Endgeräten mit schwächerer CPU ein erhebliches Problem.
SEO-Risiken
Schlechte Performance-Werte gefährdeten das Google-Ranking und damit die Sichtbarkeit.
Unsere Herangehensweise
Im engen Austausch mit den Inhouse-Spezialisten von Coop wurden die Performance-Bottlenecks systematisch analysiert und eine gemeinsame Optimierungsstrategie entwickelt:
Profiling der JavaScript-Ausführung, Identifikation der kritischen Render-Pfade und Analyse des Template-Kompilierungs-Prozesses.
Design einer Lösung mit vorkompilierten Handlebars-Templates, um Client-Side-Kompilierung zu eliminieren.
Implementierung von Skeleton Loadern zur Verbesserung der wahrgenommenen Performance und Reduktion von Layout Shifts.
Kontinuierliches Benchmarking auf verschiedenen Seitentypen (Home, PLP, PDP) mit realen Performance-Messungen.
Integration der Optimierungen in die bestehende SAP-Commerce-Cloud-Infrastruktur im Zusammenspiel mit dem Coop-Entwicklerteam.
Florian Hitz, CEO Kevin Rochel, Lead Developer
Pre-Compiled Templates
- Umstellung von Client-Side auf Pre-Compiled Handlebars-Templates
- Neue Template-Architektur mit vorkompilierten JavaScript-Dateien im precompiled/-Ordner
- Reduktion des Haupt-Scripts um 13,32%
Skeleton Loader
- Implementation von Skeleton Screens für Produktkacheln
- Sichtbare Ladezustände reduzieren wahrgenommene Wartezeit und CLS-Werte
LocalStorage-Optimierung
- Eliminierung grosser Datenmengen im Browser-LocalStorage
- Effizientere Caching-Strategie für Template-Daten
Optimiertes JSON-Loading
- Vollständige Überarbeitung des JSON-Loading-Mechanismus für alle Content-Typen
- Paralleles Laden von Komponenten statt sequenzieller Verarbeitung
SAP-Commerce-Cloud-Integration
- Nahtlose Integration der vorkompilierten Templates in die bestehende SAP-Commerce-Cloud-Infrastruktur
- Konfigurierbares Template-Loading via data-dynamic-templates Attribut
- Cache-freundliche Implementierung für CDN-Optimierung
Erfolge & KPIs
Die Performance-Optimierung erzielte messbare, beeindruckende Resultate:
JavaScript Performance
CompileTemplates Execution
65% schnellere Funktions ausführung
Gesamt JavaScript Execution
23% schneller auf allen Seiten
Script-Bundle-Grösse
13% reduziert
Core Web Vitals
Largest Contentful Paint
28% schneller
Cumulative Layout Shift
100% Eliminiert
DOMContentLoaded
41% schneller
Main-Thread & Interaktivität
Main-Thread Blocking
23% reduziert
Time to Interactive
Mobile optimiert
Seitenspezifische Verbesserungen
Homepage Produktkacheln
21% schneller
PLP Kacheln
33% schneller
PDP Carousel
23% schneller
Assortment Modal
82% schneller
Lighthouse Score
Signifikante Verbesserungen in allen Lighthouse-Kategorien, insbesondere Performance und Best Practices
Technischer Impact
Stabilisierung der Core Web Vitals innerhalb der Zielvorgaben
Entlastung des Main-Threads für schnellere clientseitige Interaktivität
Effizientere Datenübertragung bei mobilen Zugriffen
Nachhaltige Entlastung der internen Teams bei Folge-Releases
«Durch die enge und fokussierte Zusammenarbeit zwischen unseren internen Teams und Raffiniert Media konnten wir die technische Lade-Performance spürbar verbessern – selbst bei steigender Komplexität der Plattform. Neue Anforderungen wurden gemeinsam analysiert, pragmatisch umgesetzt und direkt in messbare Code-Stabilität übersetzt.»
Daniel Eicher, Business Analyst
Coop Genossenschaft
Performance bremst Ihre Conversion aus?
Lassen Sie uns gemeinsam Ihre E-Commerce-Plattform auf das nächste Performance-Level bringen.
Weitere Stories
Shop-Migration zu Headless
Von WooCommerce oder einem selbstgebauten Shop zu einer Headless-Architektur mit Payload und Next.js – mit Redirect-Konzept, damit deine Google-Rankings die Migration überleben. Inklusive der offenen Grenzen: Beta-Status der Commerce-Erweiterung, Versand/Steuern/Abos und Schweizer Zahlungsarten.
Visuelles Editieren in Payload CMS: Unser Live Preview Inspector Plugin (Version 1.6.0)
Ein Headless CMS strukturiert Daten sauber. Redaktionsteams arbeiten dadurch jedoch oft in tief geschachtelten Formularen ohne visuelle Verbindung zum Frontend. Das Suchen nach dem richtigen Eingabefeld für einen bestimmten Textblock auf der Website kostet im Alltag viel Zeit.
Barrierefreiheit (Accessibility) im Schweizer Onlinehandel: Gesetzliche Anforderungen und technische Umsetzung.
Barrierefreiheit im Schweizer Onlinehandel ist geschäftskritisch: Der EAA verschärft die Rechtslage, bis zu 20 % der Kunden werden sonst ausgeschlossen. Wer jetzt handelt, gewinnt Rankings, Performance und Conversion.