Checkliste mit Best Practices für Pre-Build und Go-Live

Willkommen bei Ihren ersten Schritten mit Composable Storefront! Diese Checkliste fasst die wichtigsten Punkte zusammen, die großen Einfluss auf Ihren Projektzeitplan haben können. Wenn Sie sich auf diese vier Best Practices konzentrieren, sind Sie besser gerüstet, um die Komplexität der Entwicklung, des Go-Live und des Monitoring einer erfolgreichen Progressive Web App (PWA) Kit-Website zu bewältigen und häufige Fallstricke zu vermeiden. Verwenden Sie diese Checkliste, um eine reibungslose und erfolgreiche Bereitstellung zu planen!

Sofern nicht anders angegeben, gelten alle Punkte in dieser Checkliste für Websites, die entweder 100 % auf Composable Storefront erstellt wurden oder phasenweise Headless-Rollouts durchführen.

Sie haben alles in der Hand, wenn es um die Anpassung geht. Bestimmen Sie zuerst den Umfang der nötigen Anpassungen, um Ihre Geschäftsanforderungen zu erfüllen. Denken Sie daran, dass eine hochgradig angepasste Website mehr Aufwand erfordert, wie diese Beispiele zeigen.

  • Machen Sie sich mit dem Design und der Funktionalität vertraut, die in unserer Retail React App verfügbar sind. Alle Funktionen, die in der Retail React App nicht verfügbar sind, müssen Sie selbst entwickeln.
  • Verwenden Sie möglichst vorhandene React-Komponenten. PWA Kit verwendet React, wodurch Sie Zugriff auf das React-Ökosystem von Komponenten haben. Wie Sie eine benutzerdefinierte Einstellung vornehmen, sehen Sie nach, ob es eine Chakra-Komponente dafür gibt. Wenn dies nicht der Fall ist, suchen Sie nach einer Open-Source-Version. Wenn es keine Open-Source-Version gibt, erstellen Sie die Komponente selbst.
  • Stellen Sie sicher, dass unsere APIs Ihre erforderliche benutzerdefinierte Funktionalität unterstützen und die von Ihnen benötigten Daten zurückgeben. Sollten unsere APIs dies nicht tun, haben Sie folgende Möglichkeiten:
    • Erstellen einer benutzerdefinierten API zum Zurückgeben der Daten oder
    • Erweitern der API-Antwort mithilfe eines Hooks
  • Vergewissern Sie sich, dass die Cartridges und Integrationen Ihrer Website mit einer Headless-Implementierung funktionieren. Um sie auf einer PWA Kit-Website zu verwenden, können Sie ihre Funktionalität mithilfe von benutzerdefinierten APIs oder Hooks bereitstellen.

Schaffen Sie ein solides Fundament für eine stabile, skalierbare Website, indem Sie diese Schritte befolgen.

  • Entscheiden Sie, wie viele MRT-Production-Umgebungen (Managed Runtime) Sie haben werden. Wenn Sie mehr Umgebungen haben, haben Sie mehr Kontrolle, aber die Verwaltung wird auch komplexer. Wenn Sie z. B. für fünf Marken dieselbe MRT-Umgebung verwenden, müssen Sie sie immer alle gemeinsam aktualisieren. Weniger Umgebungen bedeuten weniger Arbeit beim Betreiben der Website. Siehe Übersicht über Managed Runtime.
  • Entscheiden Sie, ob Sie unser Embedded Content Delivery Network (eCDN) oder ein CDN eines Drittanbieters verwenden möchten. Siehe Anwendungsfälle für das CDN eines Drittanbieters. Wenn Sie sich für die Verwendung eines Drittanbieter-CDN entscheiden, finden Sie weitere Informationen in der Dokumentation Ihres Anbieters.
  • Legen Sie Ihre URL-Strategie fest. Die meisten Kunden entscheiden sich dafür, bestehende URLs beizubehalten. Erarbeiten Sie einen Plan, um alle aktuellen URLs umzuleiten, die auf Ihrer neuen Website fehlen. Melden Sie sich für die Google Search Console-Tools oder andere Ranking-Tools an, um den Effekt des Rollouts auf Ihr SEO-Ranking im Blick zu behalten. Siehe Routing.
  • Legen Sie die Ziele, den Umfang und den Zeitplan für Ihren hybriden, phasenweise Headless-Rollout fest. Denken Sie daran: Umso mehr Zeit Sie für die damit verbundene Betriebskomplexität aufwenden müssen, desto länger befindet sich Ihre Website im Hybrid-Modus. Legen Sie einen Termin für den Übergang zu einer 100%igen Composable-Website fest. Weitere Informationen finden Sie unter Phasenweise Headless-Rollouts.

Wenden Sie diese Techniken an, um die Effizienz und Benutzererfahrung Ihrer Website zu optimieren.

  • Überprüfen Sie das serverseitige Rendering von Einstiegsseiten (Startseite, Kategorieseiten, Produktlistenseiten und Produktdetailseiten), indem Sie den Parameter ?__server_only an Ihre URLs anhängen. Vergewissern Sie sich, dass Ihre vom Server gerenderten Seiten über genügend Daten für Crawler verfügen und dass der Layout Shift zwischen Server und Client gering ist (idealerweise nicht vorhanden). Dies kann Ihr SEO-Ranking verbessern und Sie wissen dann, dass Ihre Einstiegsseiten auf mobilen Geräten schnell geladen werden, was dem Einkaufserlebnis zugutekommt.
  • Richten Sie Leistungstests mit Lighthouse CI ein. Beginnen Sie mit Leistungstests, wenn die Hälfte der Implementierung erfolgt ist. Auf diese Weise können Sie Leistungsverluste (gegenüber Ihrer aktuellen Website) lange vor dem Start Ihrer PWA Kit-Website identifizieren und korrigieren.
  • Richten Sie die fortlaufende Code-Bereitstellung in einer MRT-Umgebung ein, die nicht für die Produktion gedacht ist. Beginnen Sie bereits zu Beginn der Entwicklung mit dem Testen des in MRT bereitgestellten Codes, um sicherzustellen, dass Ihre Website wie erwartet funktioniert. So können Sie spätere kostspielige Nacharbeiten vermeiden. Siehe Automatisierungsbenutzer.

Sie sollten solches Tool verwenden, um die Leistung Ihrer Website laufend zu überwachen. Stellen Sie außerdem sicher, dass die von diesen Tools generierten Daten basierend auf den erwarteten Ergebnissen korrekt sind.

  • Mit Log Center können Sie Fehler und Kennzahlen überprüfen. Richten Sie Benachrichtigungen ein, damit Sie erfahren, wenn Ihre Storefront nicht ordnungsgemäß funktioniert, und dies untersuchen können.
  • Verwenden Sie Active Data, um die Kennzahlen Ihrer Website zu überwachen. Dies kann beim Analysieren des Käuferverhaltens helfen, um das Einkaufserlebnis zu verbessern, das Produktangebot zu optimieren und so das Umsatzwachstum zu fördern.
  • Berichte und Dashboards von B2C Commerce Dashboards liefern nützliche Daten, um Trends zu erkennen und wohlüberlegte Geschäftsentscheidungen auf der Grundlage Ihrer B2C-Commerce-Daten zu treffen.

Überprüfen Sie den restlichen empfohlenen Entwickler-Workflows zum Erstellen einer Website in Composable Storefront. Siehe Erste Schritte mit Composable Storefront.