Technische Frontendoptimierung „Perfect Storefront“ (Teil 2)

Ein aufgeklapptes Macbook mit Code

Das Konzept der „Perfect Storefront“ zielt auf überdurchschnittliche Customer Experience und Suchmaschinenoptimierung ab. Headless Commerce schafft die Basis, funktionale Komponenten (Services) und Daten im Sinne einer kontinuierlichen Frontendoptimierung zu orchestrieren.

Im ersten Teil unserer Artikelreihe haben wir in das Konzept der „Perfect Storefront“ eingeführt. Perfect Storefront beschreibt das Ideal einer Verkaufsfläche im Internet, die Käufer entlang der gesamten Customer Journey bestmöglich unterstützt und damit den Vetrieb erfolgreicher macht. Da die digitale Verkaufsfläche heute nicht mehr nur einen Online-Shop, sondern in der Regel viele weitere Verkaufspunkte im Netz umfasst, unterscheiden wir zwischen “onsite” und “offsite”.

  • Onsite = Eigener Shop, Website, Landingpages etc.
  • Offsite = Suchmaschinen, Soziale Medien, etc.

Der eigene Shop ist für die meisten Unternehmen einfach zu kontrollieren. Deshalb wollen wir uns hier auf die Onsite-Aspekte der “Perfect Storefront” konzentrieren und in groben Zügen aufzeigen, wie diese sich technisch und inhaltlich realisieren lassen. Positiver Nebeneffekt: Mit der technischen Frontendoptimierung des eigenen Shops lässt sich nicht nur der Verkaufserfolg positiv beeinflussen, sondern auch die Sichtbarkeit in Suchmaschinen (SEO) verbessern.

Perfect Storefront bezieht sich grundsätzlich auf zwei Zielgruppen, bzw. -objekte:

  1. Käufer, die einen Online-Shop besuchen, sollen ein überdurchschnittliches Kauferlebnis (Customer Experience) erhalten, das mit personalisierten Inhalten und Prozessen auf den individuellen Bedarf zugeschnitten ist.
  2. Suchmaschinen sollen mit relevanten Inhalten und einer überdurchschnittlichen Performance (kurze Lade- und Reaktionszeiten) dazu gebracht werden, die “Page Experience” eines Online-Shops als hoch einzustufen.

Neue Anforderungen an die Website-Performance durch Google Core Web Vitals

Screenshot der Google Core Web Vitals

Quelle: Google – dort finden Sie auch nähere Informationen zu Core Web Vitals

Exkurs: Die Rolle von Personalisierung für die “Perfect Storefront”

Die Personalisierung von Inhalten, beispielsweise in Form von individuellen Produktempfehlungen auf Basis von früheren Bestellungen oder Produktsuchen, spielt eine zentrale Rolle, wenn es um die Schaffung von überragenden Kauferlebnissen in einem Online-Shop geht. Für Suchmaschinen spielt Personalisierung keine Rolle, da diese kein Kriterium für die Bewertung der Page Performance (“Search Signal”) ist. Es sollte allerdings darauf geachtet werden, keine speziellen Seiten nur für die Suchmaschinen-Bots auszuliefern. Ein Bot sollte wie ein normaler Seitenbesucher behandelt werden. Dafür ist Personalisierung im Online-Shop umso wichtiger, um Warenkörbe zu füllen und Käufer an einen Online-Shop zu binden.

Lesenswert zum Thema Personalisierung in unserem Blog:

Teil 1: Grundlagen, Prinzipien und Anwendungen

Teil 2: Technologien & Daten richtig einsetzen

Fazit: Das Konzept der “Perfect Storefront” soll nicht nur für optimale Kauferlebnisse im Online-Shop sorgen und damit den Verkaufserfolg steigern, sondern es soll auch die Basis für die erfolgreiche Vermarktung von Produkten und Inhalten über Suchmaschinen legen. Stichwort “SEO”.

HEADLESS COMMERCE FÜR MEHR FLEXIBILITÄT IN DER FRONTENDOPTIMIERUNG

Die jüngste Integration der Core Web Vitals in die Google Search Signals zeigt einmal mehr, dass das Umfeld, in dem sich ein Online-Shop heute behaupten muss, sich laufend verändert. So wie die Regeln für die Suchmaschinenoptimierung sind auch die Erwartungen und das Verhalten von Online-Käufern an den Online-Verkauf fortlaufend im Fluss. Deshalb muss ein Online-Shop heute sehr flexibel auf Veränderungen reagieren können, um dauerhaft wettbewerbsfähig zu bleiben.

Nicht ohne Grund geht der Trend im Bereich der Digital-Commerce-Technologie weg von monolithischen Komplettsystemen, die alle Funktionen und Inhalte eines Online-Shops in einem Softwarekomplex vereinen. Die Zukunft gehört vielmehr modularen Systemen, die sich aus einer Vielzahl von funktionalen Einheiten (Services) zusammensetzen und flexibel an neue Anforderungen anpassen lassen. Die Basis dafür bilden serviceorientierte Architekturen (SOA).

“Headless-Commerce”-Plattformen gehen einen Schritt weiter und entkoppeln die Präsentationsschicht (Frontend – was der Kunde “sieht”) von der Funktions- und Datenschicht (Backend – was im Hintergrund geschieht). Das hat vor allem den Vorteil, dass Anpassungen und Erweiterungen im Rahmen einer technischen Frontendoptimierung ohne Auswirkungen auf das Backend eines Shops möglich sind, die in ihrem Ausmaß und Risiko schwer kalkulierbar sind.

Modulare Headless Architektur

Beispiel: Headless-Architektur als flexible Basis für eine “Perfect Storefront” (Onsite)

Headless-Plattformen wie commercetools erlauben es, je nach Bedarf und Zielsetzung beliebige Services für unterschiedliche Funktionen im Backend zu kombinieren. Die Kommunikation erfolgt über einen “API-Layer” oder direkt zwischen den Services. Verschiedene Arten von Daten wie etwa Produkt-, Kunden-, Transaktionsdaten, Analytics und Shop-Inhalte (Content) haben wir hier der Einfachheit halber in einem Daten-Layer zusammengefasst. Im Frontend lassen sich damit verschiedene Touchpoints und Kanäle, darunter auch der Online-Shop, “bespielen”.

Welche funktionalen Services und Datenströme auf einer Headless-Commerce-Plattform orchestriert werden, hängt von den Zielen und Anforderungen im Einzelfall ab. In der folgenden Übersicht haben wir exemplarisch Funktionen/Services aufgelistet, die für die wesentlichen Aspekte der Perfect Storefront – Personalisierung und Page Performance – von Bedeutung sind.

Zielgruppe/-objekt Käufer Suchmaschinen
Anforderung Personalisierte Inhalte und Prozesse, die auf den individuellen Bedarf zugeschnitten sind Höchstmögliche Page-Performance – technisch (Reaktions-/Ladezeiten) und inhaltlich (Relevanz)
Taktik Personalisierte Inhalte und Funktionen (dynamisch) Page Speed, relevante Inhalte (statisch)
Shop-Bereich Seiten “hinter” dem Login Seiten “vor” dem Login
Funktionen/Services (Auswahl) – Personalisierungs-Engine – Produktsuche (personalisiert) – Pricing-Engine (personalisiert) – Recomendation-Engine – Customer Data Platform – Marketing Kampagnen – Headless Content Management – Cache, Static Site Generation – Mobile Frontend – Page-Analytics

Die Zuordnung der Services ist eher schematisch zu verstehen, da es in der Regel funktionale Überschneidungen zwischen beiden Bereichen gibt. Beispielsweise ist ein Service für Static Site Generation sowohl für Personalisierung und als auch für optimale Page Performance relevant.

Entscheidend ist, dass das serviceorienterte System flexibel komponiert werden kann (“Composable Commerce”) und kontinuierlich mit den Anforderungen des Verkaufs wachsen kann. Der Digital Commerce muss auf Veränderung ausgelegt sein, damit Services so einfach und schnell wie möglich ergänzt, ersetzt und getestet werden können. Time-to-Market wird verringert, während das Risiko von Veränderungen kalkulierbar bleibt. Das Konzept des Headless Commerce bietet hierfür eine sehr flexible und zukunftssichere Basis.

Wollen Sie Ihren Digital Commerce mit technischer Frontendoptimierung oder Headless Commerce auf die nächste Stufe heben? eCube berät, implementiert und begleitet Sie bei Ihrem Vorhaben!

Artikel teilen

Auch interessant

Unser Geschäftsführer Maximilian Kühne beim Arbeiten
Technische Frontendoptimierung „Perfect Storefront“ (Teil 1)

Online-Käufer sind anspruchsvoll. Das Schaufenster eines Shops sollte deshalb “perfekt” sein. Deshalb haben wir das Konzept der “Perfect Storefront” entwickelt.