Die intelligente Suchfunktion für Ihren Online-Shop

WPO im E-Commerce – Gastartikel von Daniel Ruf

WPO im E-Commerce – Gastartikel von Daniel Ruf

31. Juli 2018|Weiteres

Im Vertical E-Commerce ist die Ladezeit der Seiten sehr wichtig, kurz die Web Performance Optimization spielt eine enorme Rolle.

Studien und Analysen haben gezeigt, dass bereits eine geringfügig längere Ladezeit in höheren Absprungraten und weniger Umsatz resultieren kann.
Die Nutzererfahrung und Zufriedenheit werden dadurch nachteilig beeinflusst und das Einkaufs-Erlebnis wird eher zum Frust-Erlebnis.

Mit verschiedenen Strategien kann man die Ladezeiten erheblich verbessern und dadurch Ranking und Umsatz optimieren.

PWAs (Progressive Web Apps)

Lösungen rund um Progressive Web Apps werden immer wichtiger.
Dahinter stehen Lösungen für schlankere und schnellere Frontends für Shops und Webseiten.

Ein wichtiger Bestandteil davon sind APIs die als Schnittstelle zwischen dem Frontend und dem Backend (die Shopsoftware) dienen.
Dies kann auch bereits eine optimierte Such- und Navigationslösung sein.

Die Nutzererfahrung (UX) und Zufriedenheit steigt dadurch stark an und die Nutzung der Oberfläche fühlt sich „reaktiver“ an.
Um dies zu erreichen werden neue Frontend-Frameworks wie React.js, Preact, Vue.js oder Angular genutzt.

Immer mehr Shopsysteme arbeiten an entsprechen Lösungen. Zum Beispiel arbeitet das Magento-Team an PWA Studio, was einige der Lösungen kombiniert.

Optimierung von Assets

Unter Assets werden Bilder, Stylesheets, Schriften und JavaScript-Dateien verstanden.
Hier ist es wichtig so wenig Daten wie möglich an den Browser zu senden, damit die Ladezeiten so niedrig wie möglich bleiben.

Neben responsive Images per srcset-Attribut oder picture-Tag, zählt hierzu auch die weitere Optimierung der Bilder mit entsprechenden Tools.
Da das menschliche Auge kleine Abweichungen vom Original kaum erkennen kann, gibt es (verlustbehaftete und verlustfreie) Komprimierungsverfahren um Bildgrößen zu verringern.
Google hat hier unter anderem neue Bildformate wie webp und webm entwickelt, sowie Algorithmen wie Zopfli und Brotli.

Für Bilder kann man hier oft einige Algorithmen in Kombination über Lösungen wie Imagemin einfach anwenden und so die Datenmengen erheblich reduzieren.
Die Auswahl der Tools ist groß und die Ergebnisse der Resultate können abhängig der Einstellungen sehr unterschiedlich sein.
Hier ist es wichtig, die für das Projekt passenden Bildformate, Algorithmen und Parameter anhand von Tests herauszufinden.

Anschließend kann man noch sogenannte Lazyloading-Methoden anwenden, damit nur die direkt benötigten Bilder geladen und angezeigt werden.

Genauso wichtig wie die Optimierung der Bilder ist auch die Optimierung von Stylesheets und JavaScript-Dateien.
Hierfür gibt es zahlreiche Lösungen zur Komprimierung, um ungenutzte Code-Zeilen zu entfernen (per sogenannter Code Coverage Analysen) und für den Besucher sichtbare Inhalte das CSS zu priorisieren (critical CSS).

Bei Schriften empfiehlt es sich diese selber zu hosten und nur die woff- und woff2-Formate zu verwenden.
Für Google Webfonts gibt es dafür zum Beispiel das folgende Tool: https://google-webfonts-helper.herokuapp.com/fonts

Darüber hinaus sollten referenzierte Assets, die 404-Fehler in der Browserkonsole verursachen, entsprechend aus dem Quellcode entfernt werden, da dies die Ladezeiten erheblich erhöhen kann.
Als Resultat erhöht sich oft schon die wahrgenommene bzw. „perceived“ Performance dramatisch.

Netzwerk

Um die Ladezeiten niedrig zu halten ist es auch wichtig die Netzwerk-Verbindung so optimal wie möglich zu nutzen.

Der erste Ansatz ist die Aktivierung von http2 und https (TLS).
http2 bietet einige Vorteile, unter anderem das parallele Laden und Streamen mehrerer Dateien.
Es gibt auch Lösungen wie oboe.js zum Streamen von JSON in Webanwendungen.

Dafür ist wichtig, dass es nicht mehr nur eine oder wenige CSS- und JavaScript-Dateien gibt, sondern dass diese wieder in möglichst kleine und einzelne Dateien aufgeteilt werden sollen.
Die Styles und die JavaScript-Befehle der Teilen-Buttons für Socialmedia-Netzwerke mit den Styles der Webseite in einer Datei auszuliefern macht insofern keinen Sinn.
Eine Aufteilung der Dateien kann entweder über manuelle oder automatisierte Lösungen erzielt werden. Eine der bekanntesten Lösungen ist das Tool webpack.

Performance-Budgets

Oftmals ist es hilfreich, sich ein sogenanntes Performance-Budget vorzugeben.
Damit setzt man sich Ziele für die Optimierung. Zum Beispiel soll die Startseite in unter 1 Sekunde und insgesamt weniger als 750KB Daten laden.

Unter dem folgenden Link gibt es ein einfaches Tool um Performance-Budgets zu berechnen: https://www.performancebudget.io/
Die Emulation der verschiedenen Verbindungen kann auch in Browsern über die Entwicklertools emuliert werden.

Monitoring, Auditing

Das Wichtigste ist generell ein stetiges Monitoring und Audits der Performance.

Die wichtigen Tools sind da unter anderem folgende:

  • sitespeed.io
  • PageSpeed Insights
  • Lighthouse
  • WebPagetest
  • GTmetrix

und weitere Tools, unter anderem auch Lösungen für Load Testing und Benchmarking.

Anpassungen im Hinblick auf DSGVO

Um DSGVO-konform zu sein lohnt es sich alle externen Stylesheets, JavaScript-Dateien und Schriften soweit möglich lokal bzw. selber zu hosten, Tracking-Scripte gar nicht bis kaum zu benutzen und DoNotTrack-Header zu berücksichtigen, Iframes per Klick zu laden, Teilen-Buttons über Shariff umzusetzen und möglichst externe Aufrufe zu cachen und zu verringern.

Autor:

Daniel Ruf, leidenschaftlicher Frontend-Entwickler bei UEBERBIT GmbH, aktiver Opensource-Contributor und WPO-Enthusiast