Online Shop mit Google Page Speed 100?

Aber natürlich stand bei der Entwicklung eigentlich nicht diese Zahl im Vordergrund, sondern vielmehr die Nutzererfahrung (neudeutsch Usability). Jede Funktion von der Startseite bis zum Checkout ist auf mobile Endgeräte hin optimiert. Dadurch konnten wir einen Score von 100 Punkten bei der Nutzererfahrung erzielen.

Der hohe PageSpeed Wert ist ein Ergebnis dieser Ausrichtung sowie der konsequent angewandten Prinzipien und verwendeten Technologien um die Performance des Shops zu optimieren – sowie der fantastischen technischen Baqend Plattform von Baqend.com auf der wir das Shop Frontend aufgesetzt haben.

Was misst Google PageSpeed?

Google Page Speed Insights erfasst nach bestimmten Kriterien die technische Optimierung des Frontends eines Shops oder einer Webseite – dabei werden folgende 3 Aspekte unterschieden:

1. Mobile Performance
2. Desktop Performance
3. Nutzerfreundlichkeit (insbesondere Mobil)

Es misst also NICHT die Ladezeit selbst, sondern technische Voraussetzungen, die für eine kurze Ladezeit oder genauer eine schnelle Darstellung wichtig sind. Für den Endnutzer ist dies das zentrale Kriterium, denn die gefühlte Ladezeit richtet sich nach der Anzeige erster Inhalte – nicht nach der Gesamtladezeit.

Daher baut Pagespeed auf den Voraussetzungen auf, um sicher zu stellen, dass Browser die Inhalte schnell darstellen, d.h. rendern, können. Hierzu ist es insbesondere notwendig, dass Bilder auf Ladezeit optimiert sind, Daten möglichst gut im Browser gecacht werden, Funktionen die im Browser stattfinden (Javascript) schlank gehalten werden. Diese Aspekte prüft Google PageSpeed bei der Analyse einer Seite.

Einige Optimierungsvorschläge von Google lassen sich in der Regel sehr leicht berücksichtigen – diese implementieren wir standardmäßig in unserer Online Shop Entwicklung. Zu diesen Mobile und Desktop Optimierungsmöglichkeiten für Geschwindigkeit gehören z.B.

1. Bildgrößen Optimierung
2. CSS, HTML und JS zu komprimieren
3. Browser Caching für Dateien wie z.B. JPG, PNG, CSS, JS

Darüber hinaus ist es wichtig das Browser Rendering möglichst schlank zu halten – z.B. durch die asyncrone Einbindung von Javascripts. Auch die Gestaltung des HTML und CSS Codes sollte auf den Geschwindigkeits-Aspekt hin geprüft werden. Dadurch können die Shop Seiteninhalte vom Browser schneller dem Nutzer angezeigt werden.

Da Shop Systeme oft über viele Module und Funktionen, wie z.B. Lagerbestand, Filter, Warenkorb, Merkliste, Zahlarten, Trackingsysteme verfügen ist es jedoch schwieriger z.B. die vielen enthaltenen verschiedenen Javascript und CSS Dateien zusammen zu fassen, wie es ideal wäre. Darüber hinaus wirken oft Zusatzfunktionen dem Geschwindigkeitsziel entgegen.

Durch unsere Mobile First Strategie und eine entsprechend optimierte Smartphone Version des Shops ist es uns sehr gut gelungen die Bedienung und Geschwindigkeit auf die mobilen Endgeräte und Touch Devices wie Tablets hin zu perfektionieren. Der Shop lädt initial sehr schnell und danach finden Interaktionen wie „In den Warenkorb“ sofort statt, da sie direkt auf dem Endgerät ausgeführt werden. Konsequenterweise erreichen wir daher einen Mobile Pagespeed von 100.

Den Desktop Shop haben wir von der Mobile Version abgeleitet aber auch sehr schlank gehalten. Hier wurde vor allem die Darstellung den größeren Bildschirmen angepasst. Die Bedienung haben wir gemäß Mobile First Strategie dem mobilen Shop untergeordnet – aber das ist kein Nachteil für die Desktop Version des Shops – entsprechend ist auch hier das Ergebnis: Pagespeed 100.

Wichtig ist die Aufgabe und den Wert sowie die Beschränkungen von Google Pagespeed Insights zu verstehen. Die hier ermittelten Werte sind nicht allein ausschlaggebend für die Nutzererfahrung in einem Online Shop oder einer Online Shop Mobile App bzw. Webseite. Sie berücksichtigen nicht die finale Ladezeit, spiegeln jedoch gut die verschiedenen Optimierungsmöglichkeiten im Frontend wieder und zeigen Verbesserungspotenzial auf.

Wichtig ist jedoch auch zu wissen, dass Shop Systeme oft aus vielen Funktionen bestehen und sich dadurch der Aufwand für Optimierungen im Hinblick auf Google Pagespeed wie eine exponentiell ansteigende Kurve verhält. Zunächst lassen sich recht leicht deutliche Verbesserungen erzielen – ab einem gewissen Punkt steigt jedoch der Aufwand für weitere Optimierung deutlich an. Wenn tief im Shop System verankerte Elemente umgebaut werden müssen – erhöht sich der Aufwand extrem. Hier gilt es dementsprechend die richtige Balance zu finden.

Daher sollte der Pagespeed von 100 kein alleiniges Ziel sein – sondern das bestmögliche Nutzererlebnis für den jeweiligen Shop, dessen Produkte und Zielgruppe. Insofern ist es wichtig, eine sinnvolle Balance aus Geschwindigkeit und Funktionen sowie Darstellung zu erarbeiten. Google Pagespeed ist dabei ein wichtiges Werkzeug, nicht jedoch das Ziel – das ist die optimale Nutzererfahrung.