Ladezeiten mit Amazon Pay
Die Performance eines Shops ist mitunter ein wichtiges Kriterium für die Abschlussrate eines Kaufes. Auch Suchmaschinen wie Google bewerten die Geschwindigkeit mit der Webseiten ausgeliefert werden. Als eines der wichtigen Tools ist hier PageSpeed Insights von Google zu nennen. Aber auch die Console des Browser liefert aufschluss darüber, wie schnell Ihre Seite ausgeliefert wurde und im Detail sogar, welche Dateien hier als "Bremse" in Frage kommen.
Im Support kommen des öfteren Anfragen an, ob und wie weit die Einbindung von Amazon Pay, diesen Pagespeed beeinflusst. Um Ihnen hier einmal dazu genauere Auskunft erteilen zu können möchten wir Sie zächst mit einigen Faktoren bekant machen.
Die Geschwindigkeit setzt sich zusammen aus:
- Der Anzahl und Größe der Dateien (kb)
- Der Übertragungsqualität der Internetverbindung
- Ressourcen und Performance des ausliefernden Servers/Hosting
- Die Verarbeitung auf dem Empfangsgerät
Das ist vereinfacht dargestellt. Natürlich erhöhen Sie mit jedem Plugin das Sie einrichten das Volumen von zu übertragenen Daten. Bei unserem Amazon Pay Plugin ist es so, dass durch das Plugin zunächst die Funktionalität des Payments integriert wird. Es greift auf das SDK zurück, das im Plugin mitgebracht wird. Innerhalb dieses SDK müssen weitere Ressourcen direkt von Amazon geladen und eingebunden werden.
Im Normalfall laden Sie mit Amazon Pay ca. 3-6 Ressoucen nach. Im Regelfall kommen dabei ca. 100-130 kb Volumen zusammen.
Testing
Wir haben bei der Weiterentwicklung stets ein Auge darauf, bei einem stets wachsenen Angebot an Funktionen, eine möglichst Performante Leistung des Plugins zu bewirken. Sollten sich in Ihrer Integration gravierende Abweichungen darstellen, so können Sie uns mit konkreten Details gerne unter support@bestit.de zur Beratung heranziehen. Wir müssten diese Analyse auf Ihrem Shopsystem nachvollziehen können um das Gesamtbild zu beurteilen.
In unserem Test haben wir uns auf die üblichen Seiten eines Shopbesuchers fokussiert:
- /startseite
- /account (mit Login Amazon)
- /kategorie (inkl. Express Checkout)
- /artikeldetail (inkl Express Checkout)
- /checkout (mit Login Amazon)
- /address (Amazon Widget)
- /wallet (Amazon Widget)
- /checkout/confirm (Zusammenfassung inkl. Amazon Widgets Address/Wallet)
- SCA Prozess und /finish Page
Wir testen einmal den "Auslieferungszustand" des Plugins. Dabei sind zunächst alle möglichen Einbindungen des Amazon Pay Buttons an den vorgesehenden Stellen aktiviert und auch das Logo der Sidebar aktiv.
Möchten Sie Ihren Shop selbst testen, dann empfehlen wir Ihnen das kostenlose Performance Tool commerce-score.io. Dort können Sie vorher/nacher Vergleiche und Optimierungspotential für die getesteten Seiten entdecken. Vergleichen Sie die Zahlen zwischen verschiedenen Ständen Ihres Shops.
Button Konfiguration Auslieferungszustand
Im Plugin finden Sie folgende Optionen, einen Amazon Pay Button einzubinden:
- Button auf der Warenkorbseite anzeigen
- Button in der Warenkorb Modal Box anzeigen
- Button auf der Registrierungs-Seite anzeigen
- Button auf der Fehler-Seite anzeigen
- Express-Checkout: Button auf Artikeldetailseite
- Express-Checkout: Button im Artikellisting
- Express-Checkout: Button im Produktslider
- Sidebar Logo anzeigen (Ressource ist Lokal mitgeliefert)
Im Auslieferungszustand ist jeder der Buttons unter der Variante "Langinfo (Gold - Mittel)" voreingestellt. Amazon stellt aus Gründen der Corporate Identity die Buttons ausschließlich in Echtzeit (externer Download) zur Verfügung.
Sie können die Varianten nach Bedarf wie angeboten ändern. Nur auf der Warenkorbseite, kann man Ihnen die Option "nicht anzeigen" - nicht anbieten.
Button Varianten
Eine detaillierte Liste der Buttons und deren aktuellen Erscheinungsbild finden Sie direkt auf den Seiten von Amazon Pay: https://developer.amazon.com/de/docs/amazon-pay-onetime/button-widgets.html
Es gibt einen Login (LwA = Login with Amazon) und einen Payment (PwA = Pay with Amazon) Button, in Gold, hell und dunkel Grau. Alle Buttons werden in vier Größen angeboten.
Anhand der Optionen können Sie also selbst im gewissen Rahmen bestimmen - wo und damit wie viel Ressourcen von Amazon geladen werden sollen. Das Frontend von Shopware und insbesondere die Cache Logik verlangt jedoch von uns, dass wir bestimmte Komponenten konstant laden müssen, auch wenn der Button unter Umständen gar nicht an einer Bestimmten stelle eingeblendet wird.
Messwerte
Im nun nachfolgenden Überblick unserer Messungen haben wir die Ladezeiten in der Chrome Development Console ausgewertet. Dabei ist der Auslieferungszustand der Konfiguration genutzt worden. Einmal haben wir Amazon Pay aktiviert und einmal deaktiviert um die Messungen transparent zu vergleichen. Je Seite haben wir 10 Ladevorgänge vorgenommen und den Mittelwert daraus gebildet. Im Test (01.2020) haben wir auf Version 9.4.1 des Plugins zurückgegriffen und einer Standard Shopware Out-of-the-Box Version mit Standard Responsive Theme.
Die Ergebnisse im Vergleich
Page mit/ohne | Finish (s) | DOM Content (s) | Load (s) |
---|---|---|---|
/startseite | 3,48 3,73 | 1,27 1,23 | 2,59 2,56 |
/account | 2,82 2,45 | 1,45 1,40 | 2,78 2,41 |
/kategorie | 3,78 3,28 | 2,11 2,00 | 3,81 3,22 |
/detail | 3,95 3,11 | 1,56 1,59 | 3,17 2,80 |
/checkout Login | 2,33 1,99 | 1,06 1,03 | 2,26 1,95 |
/adress widget*¹ | 3,53 | 1,35 | 3,41 |
/wallet widget*¹ | 3,32 | 1,17 | 3,19 |
/checkout/confirm*¹ | 5,29 | 1,96 | 3,17 |
SCA & Finish Page*² | 4,48 2,02 | 2,97 0,98 | 4,02 1,94 |
*¹ Diese Seite gibt es nur durch den Amazon Prozess und ist nicht vergelichbar "ohne"
*² Diese Seite beinhaltet den SCA Prozess und den Aufbau der Finish Seite mit finaler Verarbeitung des erfolgreichen Checkouts
Resumee: Sie sehen natürlich das die externe Abwicklung eines Payments Perfomance benötigt und insbesondere zum Abschluss hin sehr viele Daten verarbeitet werden müssen. Aber in der Bewertung eines Google PageSpeed Insight kommt der Checkout selbst nicht in Betracht und damit beeinflusst dies auch nicht die Bewerungsskala Ihres Webshops.
Wir hoffen mit dieser real getroffenen Auswertung Ihnen ein Bild aus unserer Sicht zur Frage Perfomance geben zu können. Es gibt durchaus Möglichkeiten noch mehr Performance zu generieren - jedoch lässt sich im Rahmen mit Amazon Pay und der Einbindung externer Ressourcen und im Bezug auf das Frontend Cachen nur begrenzt etwas umsetzen.