Story-Time: Onlineshopping in der Bahn
Hast du schonmal versucht während einer Bahnfahrt etwas online zu kaufen?
Oft ist das ein sehr frustrierendes Erlebnis. Man kann den Shops wirklich beim Laden zuschauen.
Irgendwann denkt man, dass die Seite endlich fertig geladen ist, versucht einen Link zu klicken und alles springt nochmal hin-und-her, weil doch noch etwas fehlte.
Alternativ: Während man wartet kommt eine neue WhatsApp Nachricht rein, man springt rüber und schon ist der Kaufprozess abgebrochen und vergessen.
So erleben die meisten Nutzer die meisten Onlineshops, weil die wenigsten optimiert sind. Und das Einzige was die Shopbetreibende bemerken ist die niedrige Conversion-Rate auf Mobilgeräten.
Warum passiert das?
Shopbetreibende und Entwickelnde testen oft ausschließlich mit ihren High-End-Geräten und mit leistungsfähigem Internetanschluss.
Im B2C sind allerdings 80% der Nutzenden mit Smartphones unterwegs und die meisten sind wirklich nicht mehr auf dem Stand der Technik.
Das Testsetting der Entwickelnden entspricht also oft überhaupt nicht der Realität.
Mein Tipp: Deine Entwickelnden und Entscheidenden sollten deinen Online-Shop / deine Software regelmäßig so nutzen und erleben, wie deine Kunden: Mit betagten Geräten und mittelmäßiger Internetverbindung. Das klingt erstmal gemein, oder? Aber genau das ist das Erlebnis, dass auch deine zahlenden Kunden haben. Und darum sollte genau das die Messlatte sein.
Dazu gehört übrigens auch mal echte Smartphones zu nutzen und nicht nur Emulatoren, denn sie verhalten sich nicht nur in der Performance ganz anders.
Die echten Ladezeiten messen
Nur was man messen kann, kann man auch verbessern.
Manuelles Testen ist zwar wichtig, reicht aber nicht aus, um das Kundenerlebnis vollständig zu erfassen. Darum sollte die echte Geschwindigkeit, wie sie von deinen Besuchenden erlebt wird, gemessen werden.
Core Web Vitals
Für einen ersten Eindruck können die Core Web Vitals von Google herangezogen werden: Das sind öffentlich einsehbare Erhebungen der Ladezeiten, die Chrome-Nutzende erleben. Hier kannst du auch einen Blick auf die Geschwindigkeit deiner Konkurrenz werfen 😉
Der Nachteil: Die Zahlen sind bis zu 28 Tage alt. Um den Effekt von Veränderungen an deiner Seite zu bemerken, ist diese Lösung also nicht geeignet.
Hier kannst du die Core Web Vitals einsehen: https://cruxvis.withgoogle.com
Du siehst rot(e Werte)?
Ich zeige dir quick-wins, um deinen Shop schneller zu machen.
Webanalyse Tools
Viele Webanalyse Tools wie Google Analytics oder Matomo liefern inzwischen auch oberflächliche Performancedaten mit. Für einen ersten Blick in das Thema sind die dortigen Reports definitiv eine Option, für zielgerichtete Auswertungen und Analysen sollte allerdings ein spezialisiertes Tool verwendet werden.
Real User Monitoring
Besonders empfehlenswert sind „Real User Monitoring“ Lösungen. Hier werden die Ladezeiten des Browsers per JavaScript erfasst und können über ein Web Interface ausgewertet und auf verschiedene Kohorten heruntergebrochen werden.
Hier bekommst du die Messwerte mit minimaler Verzögerung zu sehen und kannst so schon unmittelbar nach Deployments den echten Effekt auf deine Kunden messen und bewerten.
Mein Go-To-Favorit: rumvision.com
Du möchtest mal reinschnuppern? Sprich mich gerne an und ich gebe dir eine Tour!
Relevante Kennzahlen aufbauen
Mach aus deiner Ladezeit KPIs und integriere sie in dein Monitoring.
Die wichtigsten Metriken sind:
- Die Antwortzeit des Servers, um das HTML auszuliefern: Time to first byte (TTFB)
- Die Zeit bis zum ersten Anzeigen der Seite: First Contentful Paint (FCP)
- Die Zeit bis zum größten Paint: Largest Contentful Paint (LCP)
- Wie stark sich die Seite verändert / „springt“: Cumulative Layout Shifts (CLS)
Immer wenn sich diese Zahlen verschlechtern leiden auch deine Kunden – und damit deine Conversion Rate und dein Umsatz.
Darum sollten deine Entwickler aktiv benachrichtigt werden, sobald sich diese Zahlen verschlechtern, damit sie sofort gegensteuern können. In aller Regel wird die Ladezeit schlechter wegen dem Rollout eines neuen Features oder Veränderungen an der technischen Infrastruktur.
Die Erwartungshaltung muss dabei klar sein: Wenn diese Metriken schlechter werden, dann muss sofort gehandelt werden.
Gezielt optimieren
Dank des Real User Monitorings wissen wir jetzt, welche Seiten für den meisten Frust bei deinen Kunden sorgen und sogar schon, ob es an den Antwortzeiten des Servers oder an einem Frontend-Thema liegt.
Jetzt wird es ein bisschen technischer: Als nächstes können wir über die Chrome Developer Tools die Situation des Nutzenden nachstellen und auswerten. Wie viele Daten werden übertragen, wie baut sich die Seite im Detail auf, wann werden die Schriftarten geladen, welches JavaScript blockiert das Rendering, und und und.
Hol hier deine Entwickler – oder mich – mit ins Boot. Wir analysieren die Situation im Detail und geben konkrete Maßnahmen zurück. Die meisten Findings treffen übrigens auf alle Seiten des gleichen Typs oder sogar auf den kompletten Shop zu und können so eine große Hebelwirkung entfalten.
Übrigens gilt auch hier das Parato-Prinzip: 80% der Ladezeitverbesserung lassen sich oft schon über wenige gezielte Optimierungen umsetzen!
Deine Checkliste
- Misst du schon die echte Geschwindigkeit deines Online-Shops bei deinen Kunden?
- Ist die Geschwindigkeit für alle deine Kunden gut und frustfrei?
- Hast du Kennzahlen, die die Geschwindigkeit widerspiegeln?
- Werden Veränderungen der Kennzahlen bemerkt?
- Ist klar kommuniziert, dass eine Verschlechterung der Kennzahlen sofort zu Maßnahmen durch die Entwickler führen muss?
Hol dir Unterstützung
Dir wird’s zu technisch?
Du möchtest, dass dein Shop blitzschnell wird für mehr zufriedene Kunden und bis zu 3x mehr Umsatz?
Schreib mir oder stelle uns einen kostenlosen Call ein und wir finden gemeinsam heraus, ob und wie ich euch unterstützen kann.