Basierend auf den vorgeschlagenen Optimierungshebeln der Google PageSpeed Insights-Analyse nahm die IT-Abteilung von buecher.de Änderungen an wichtigen AdWords Zielseiten vor. Die Umsetzung dieser Maßnahmen führte zu einem deutlichen Ladezeitgewinn bei mobilen Zielseiten von fast 2 Sekunden (-35 %, Google Analytics) und einer schnelleren Darstellung des sichtbaren Teils der Seite (Webpagetest.org Speed Index 2,5 Sekunden*). Veränderungen zeigten sich auch am Optimierungsstand des verbesserten PSI (PageSpeed Index) Scores. Dieser kletterte von 63 auf 93 Punkte. Die Ladezeitverbesserungen zahlten sich ebenfalls auf Mobile Conversions aus, welche um bis zu 4 % gestiegen sind und stetig optimiert werden.
DIE ZIELE
Verkürzung der Seitenladezeit
Bessere Conversions im mobilen Bereich
Senkung des Cost Per Order (CPO)
Niedrigere Bouncerate
DER ANSATZ
Key Product: Optimierungen der mobilen Seite anhand des PageSpeed Index
Ansatz: Basierend auf Google PageSpeed Insights-Analysen wurden bestimmte technische Optimierungshebel umgesetzt, was vor allem die folgenden Punkte umfasst: Renderblocking JavaScript und CSS - Browser Caching - Bilderoptimierung - Priorisierung der Inhalte im visuell sichtbaren Teil der Seite
DIE ERGEBNISSE
Ladezeit ausgewählter AdWords Zielseiten von 5,3 auf 3,5 Sekunden gesenkt (Analytics)
PageSpeed Index des PageSpeed Insights Scores um 30 Punkte von 63 auf 93 verbessert
Steigerung der Mobile Conversions um bis zu 4 %
buecher.de wurde im Juni 1999 als Joint Venture unter dem Namen booxtra gegründet und wird seit November 2001 als buecher.de geführt. Das E-Commerce Unternehmen bietet versandkostenfreie Lieferungen innerhalb von Deutschland ohne Mindestbestellwert an. "Als Pure Online Player kann buecher.de mit Produktvielfalt, aktuellen Neuheiten sowie Schnelligkeit punkten, und erreicht so eine Kundenzufriedenheit von 95 Prozent", erzählt Ruslan Pakentryger, Search Marketing Manager bei buecher.de.
buecher.de agiert in einem stark umkämpften Markt. Die Anzahl der Mitbewerber ist groß, doch der Wettbewerb kann im Segment Bücher wegen der Buchpreisbindung nicht über den Preis ausgetragen werden. Da die Kunden mittlerweile mehrheitlich über mobile Endgeräte auf die Seite und den Shop zugreifen, war eine Optimierung in diesem Bereich schon länger ein Thema. Eine leistungsstarke mobile Seite, sowie die damit einhergehenden Optimierungen der AdWords-Budgets und Kampagnen entscheiden nachhaltig über den Unternehmenserfolg. "Die letzte große Optimierung wurde im Rahmen des 'Responsive Shop Launch' im Juni 2015 durchgeführt. Danach erzielten wir beim PageSpeed Index einen Score von 91/100 auf der Startseite", berichtet Martin Wagner, Senior Frontend Developer bei buecher.de.
Vor der Optimierung:2
Nach der Optimierung:
"In den darauffolgenden Monaten wurde der Score sporadisch überprüft und verschlechterte sich zusehends, vor allem seit der Unterscheidung von Mobile und Desktop", führt er weiter aus. Das Unternehmen identifizierte bereits im Mai 2016 die Hauptursache für den schlechten Score, konnte aber keine einfache technische Lösung zur Behebung des Problems finden. Es musste eine Lösung für den Above-the-Fold-Bereich gefunden werden, um die kritischen CSS-Regeln und JavaScript Code für diesen Bereich "inline" auszuliefern, damit die eigentlichen CSS- und JavaScript Dateien erst am Seitenende geladen werden können. CSS- und JavaScript Dateien blockierten das Rendern und verzögerten somit die Darstellung von Inhalten auf den Bildschirmen. Gerade weil eine rasche Ladezeit und eine gut funktionierende Seite eng mit den relevanten Kennzahlen aus dem Performance Marketing verbunden sind, wurde das Thema im Februar 2017 wiederaufgenommen und nun aus der IT heraus vorangetrieben.
"Wir merken Tag für Tag, dass die Anzahl der mobilen Abschlüsse im Vergleich zu den letzten Jahren deutlich angestiegen ist. Um ein gesundes Ergebnis erzielen zu können, ist der mobile CPO uns enorm wichtig. Unsere Erwartungen hierzu waren, dass dieser aufgrund der besseren Ladegeschwindigkeit sinken kann, da der Nutzer die Seite schneller zu Gesicht bekommt, länger auf dieser verweilt und dann auch mobil konvertiert."
- Ruslan Pakentryger, Search Marketing Manager, buecher.de
PageSpeed Insights von Google basiert auf einer Reihe von Performance Best Practice Checks. Es misst die Leistungsfähigkeit einer Seite auf Mobilgeräten und Desktop-Computern. Dabei ruft es die URL zweimal ab, einmal mit einem mobilen User-Agenten und einmal mit einem Desktop-User-Agenten. Die PageSpeed-Bewertung kann 0 bis 100 Punkte betragen. Eine Punktzahl von 85 oder mehr weist auf eine leistungsstarke Seite hin. PageSpeed Insights misst Möglichkeiten zur Steigerung der Leistungsfähigkeit zum einen im Hinblick auf die erforderliche Zeit zum Laden des ohne Scrollen sichtbaren Inhalts. Zum anderen wird die erforderliche Zeit zum vollständigen Laden der Seite bestimmt.3
Vor der aktuellen Optimierung stand die Webseite bei einem Score von 63/100. Was bei buecher.de folgte, war eine komplette Analyse des Shops. Alle Seitentypen – Startseite, Produktseiten, Kategorieseiten – wurden untersucht, immer mit dem Ziel, die bestmögliche Lösung für jeden Seitentyp zu finden. "Die mobile Optimierung war aufwändig, aber machbar", resümiert Martin Wagner. "Die technische Lösung für Critical CSS hat am meisten gebracht. Von der Analyse bis zur Umsetzung aller Maßnahmen haben wir etwa einen Monat gebraucht." Auch die Optimierung der Bilder, vor allem der Bannerbilder, machte sich positiv bemerkbar. So werden jetzt alle Bilder beim Upload in das Bannerverwaltungssystem automatisch in die richtige Größe gebracht und hinsichtlich der Dateigröße optimiert.
"Der Schlüssel zu einer besseren Ladezeit lag bei uns bei der Optimierung von CSS- und JavaScript Dateien, welche das Rendern negativ beeinflussten und die Darstellung des visuellen Teils der Seite blockierten."
- Martin Wagner, Senior Frontend Developer, buecher.de
Eine weitere Maßnahme war das konsequente asynchrone Nachladen von Web Fonts und JavaScript, sofern dies möglich ist. Als eine große Herausforderung gestaltete sich die Abhängigkeit von externen Drittanbietern, deren Pixel und Widgets auf der Seite von buecher.de integriert sind. Einige dieser Widgets sind nicht gut optimiert und erwarten beispielsweise jQuery synchron, während es bei buecher.de schon seit Jahren asynchron instanziiert wird. Dadurch ergibt sich oftmals ein Mehraufwand bei der Implementierung. Des Weiteren wurde die Laufzeit des Browser Cache für Bilder und Scripts angepasst. Das dynamische Laden von Bildern brachte eine zusätzliche Verbesserung auf den einzelnen Seiten. Bilder werden erst dann geladen, wenn sie in den sichtbaren Bereich des Nutzers kommen. Schlussendlich wurde eine Priorisierung der Elemente im Document Object Model (DOM) vorgenommen. So wird nun beispielsweise das Flyout-Menü nur bei Bedarf nachgeladen.
Search Marketing Manager Ruslan Pakentryger erläutert: "Das Marketingziel hinter diesen Optimierungen war ganz klar eine Conversion-Steigerung. Bessere Ladezeiten führen zu einer besseren Nutzererfahrung und unterstützen damit direkt unsere AdWords-Aktivitäten, Effizienz- und Umsatzziele, vor allem bei Mobile. Die Verbesserung der Ladezeit resultierte in einer Steigerung der Mobile Conversions von bis zu 4 %." Zahlreiche Studien belegen seine Aussage. Zwischen Ladezeit und Conversion Rate besteht ein Zusammenhang, auch ein Zehntel einer Sekunde kann Conversion Rates auf mobilen Geräten um bis zu -7 % reduzieren. Auch der Einfluss der Ladezeit auf Bounce Rates wurde nachgewiesen - eine oder zwei Sekunden machen sich aber auch hier deutlich bemerkbar und erhöhen die Bounce Rate um bis zu 103 % auf mobilen Geräten.4
Als Resultat dieses Optimierungsprozesses wurde ein permanentes Monitoring auf Basis von Google PageSpeed Insights aufgesetzt. Hinsichtlich der mobilen Ladegeschwindigkeit werden sowohl Seiten von buecher.de als auch von Mitbewerbern betrachtet. Die Nachhaltigkeit der ergriffenen Maßnahmen zeigt sich bei den 15 eigenen beobachteten Seiten, die alle Seitentypen umfassen, und nun einen Mobile PageSpeed Insights Score von mindestens 92 erzielen. Die mobile Startseite wird nun deutlich schneller geladen – statt in 5,3 Sekunden baut sie sich nun in etwa 3,5 Sekunden auf. "Wir freuen uns, dass wir nach der erfolgreichen Umsetzung dieser Maßnahmen der Vorreiter unter den Top-5 Medienversandhändlern hinsichtlich des Mobile Score sind", berichten Martin Wagner und Ruslan Pakentryger.
Die beiden schätzen die unkomplizierte Zusammenarbeit ihrer Bereiche. "Bei uns herrscht ohnehin eine Open-Door-Politik", sagt Search Marketing Manager Ruslan Pakentryger. "Da wir das Projekt aus der IT heraus durchgeführt haben, hatten wir während der Optimierung wenig Kommunikationsbedarf und aufgrund unserer Strukturen auch den direkten Kontakt zwischen den Abteilungen", ergänzt Martin Wagner. Die meisten umgesetzten Maßnahmen wurden fest in den Shop-Entwicklungsprozess integriert und sorgen dafür, dass die Ladegeschwindigkeit langfristig optimal bleibt.
Martin Wagner hat große Ambitionen für die Zukunft: "Wir versuchen den aktuellen Score zu halten und wenn möglich, weiter zu verbessern. Aktuell haben wir wieder Ressourcen im Rahmen des Google PageSpeedRace 2017 auf dieses Projekt gebunden und bereits weitere Verbesserungen erreicht mit dem ambitionierten Ziel im Durchschnitt auf 95/100 zu kommen."
Unser Tool-Tipp
Sie möchten Ihre mobile Website auch opitmieren? Dann testen Sie unser kostenloses Tool "Test My Site". Mit "Test My Site" können Websitebetreiber ihre mobile Performance analysieren. Betrachtet werden: die Geschwindigkeit der mobilen Website, die Wettbewerbsfähigkeit und die Anzahl der Website-Besucher, die das Unternehmen möglicherweise durch zu langes Laden seiner Site verliert. Anschließend erhalten Sie einen Report mit Verbesserungsvorschläge für Ihre Website. Wir glauben, dass mit etwas Hilfe jedes Unternehmen eine schnelle mobile Website haben kann.
