Rakuten 24 hat die Web Vitals der echten Nutzer gemessen und festgestellt, dass ein guter Largest Contentful Paint (LCP) zu einer Steigerung der Conversion-Rate um 61,13 % führen kann.
Rakuten 24 ist ein Onlineshop, der mit großen multinationalen und inländischen Verbrauchsgüterherstellern zusammenarbeitet, um eine Vielzahl von Alltagsgegenständen wie Gesundheitswesen, Getränke, Haustierbedarf, Babyprodukte und mehr anzubieten. Dieses Geschäft wird von Rakuten Group, Inc. bereitgestellt, einem weltweit führenden Anbieter von Internetdiensten, der auf seiner digitalen Marktplatzplattform in Japan zu den besten Performances gehört.
Das Team von Rakuten 24 hat die Auswirkungen der Webleistung auf die Nutzererfahrung analysiert und kontinuierlich Core Web Vitals sowie andere Messwerte analysiert, optimiert und beobachtet.
Aus diesem Grund verzeichnen mehr als 75% der Nutzer Probleme mit Largest Contentful Paint (LCP), First Input Delay (FID) und First Contentful Paint (FCP). Sie arbeiten jedoch noch an Verbesserungen für Cumulative Layout Shift (CLS).
Rakuten 24 analysierte die Daten auf der Startseite und fand heraus, dass ein guter LCP-Wert zu folgenden Ergebnissen führen kann:
- Eine Steigerung der Conversion-Rate um bis zu 61,13 %
- 26,09% Umsatz pro Besucher.
- einen durchschnittlichen Bestellwert von 11,26 %.
- Ein guter FID-Wert kann zu einer Steigerung der Conversion-Rate um bis zu 55,88% führen.
Um Core Web Vitals und Geschäftsmesswerte weiter zu korrelieren, führte Rakuten 24 außerdem einen A/B-Test mit Schwerpunkt auf die Optimierung von Core Web Vitals und zugehörigen Messwerten durch. Dabei wurden folgende Verbesserungen verzeichnet:
- einen Umsatz von 53,37% pro Besucher.
- Conversion-Rate von 33,13 %.
- einen durchschnittlichen Bestellwert von 15,20 %.
- 9,99% im Durchschnitt verbrachte Zeit.
- Eine Reduzierung der Ausstiegsrate um 35,12 %
Die Chance hervorheben
Das Optimieren der Webleistung ist zwar eine sinnvolle Investition, um die Nutzerfreundlichkeit und das Unternehmenswachstum zu verbessern, aber das Team von Rakuten 24 weiß, wie schwierig es sein kann, Stakeholder davon zu überzeugen, Core Web Vitals einzuführen und sich auf die Webleistung zu konzentrieren. Er ist der Meinung, dass es der beste Weg ist, Stakeholdern zu zeigen, welche Art von Return on Investment (ROI) die Leistungsoptimierung einbringen kann.
Da Rakuten 24 ein relativ neuer und unabhängiger Dienst ist, nutzte das Unternehmen seine Flexibilität, um sich dieser Herausforderung zu stellen. Sie glauben, dass das Ergebnis ihrer Fallstudie ihnen helfen würde, in Zukunft mehr datenorientierte Entscheidungen zu treffen, sowie anderen Entwickelnden helfen, die Auswirkungen ihrer Arbeit zu messen und ihre Stakeholder davon zu überzeugen, dass sich eine Verbesserung der Leistung die Investition lohnt. In diesem Beitrag erfährst du, wie sie das geschafft haben.
JavaScript und Ressourcen optimieren
- Beseitigen Sie Ressourcen, die das Rendering blockieren.
- Teilen Sie den Code auf und verwenden Sie das dynamische
import(). - Inhalte in separate Teile aufteilen und HTML-Dateien „below the fold“ (mit Scrollen sichtbar) laden lassen
- JavaScript kann bei Bedarf ausgeführt und geladen werden.
- Erkennen Sie langsame JavaScript-Ressourcen und optimieren Sie den Ladeprozess, indem Sie das Attribut „async“ für
<script>-Tags verwenden und frühe Verbindungen zu wichtigen Ursprüngen herstellen (Ressourcenhinweise wiedns-prefetch,preconnectundpreload). - Entfernen Sie nicht verwendeten Code und komprimieren Sie den Code und komprimieren Sie ihn.
- Verwenden Sie ein CDN.
- Steuern Sie das Caching mithilfe des Service Workers mit der Workbox.
Bilder optimieren
- Bilder vom Typ „Below the fold“ (mit Scrollen sichtbar) über Lazy Loading.
- Optimieren Sie Bilder mit einem CDN, stellen Sie Bilder in der richtigen Größe bereit, komprimieren Sie die Bilder und übernehmen Sie die richtigen Bildformate für den jeweiligen Job (WebP, SVG, Web Fonts).
CLS optimieren
- Verwende CSS
aspect-ratio, um den erforderlichen Platz für Bilder zu reservieren, während die Bilder geladen werden. - Verwenden Sie CSS
min-height, um Layoutverschiebungen zu minimieren, während Elemente per Lazy Loading geladen werden.
Leistungsmessung
Das Team nutzte nicht nur PageSpeed Insights zur Prüfung der Website, sondern wollte auch herausfinden, was die Nutzer tatsächlich tun. Daher entschied sich Rakuten 24, die web-vitals-JavaScript-Bibliothek zu verwenden, um Core Web Vitals und andere relevante Messwerte zu messen und die Daten an das interne Analysetool zu senden.
Leistungsanalyse
Das Team analysierte die erfassten Felddaten, um festzustellen, ob ein Zusammenhang zwischen den Core Web Vitals und den wichtigsten Unternehmensmesswerten besteht. Dabei stellte sich heraus, dass der LCP-Wert bei Nutzern, die eine Conversion ausgeführt haben, in der Regel besser ist als bei Nutzern, die keine Conversion durchgeführt haben.
Die gesammelten Daten ergaben außerdem Folgendes:
- Ein guter LCP kann zu einer Steigerung der Conversion-Rate um bis zu 61,13 %, einer Steigerung des Umsatzes pro Besucher um 26,09% und des durchschnittlichen Bestellwerts um 11,26% führen.
- Ein guter FID-Wert kann eine Steigerung der Conversion-Rate um bis zu 55,88% im Vergleich zu den durchschnittlichen Gesamtdaten bewirken.
Leistungsüberwachung
Das Team hat ein Leistungsüberwachungs-Dashboard mit den im Außendienst gesammelten Daten und dem Business-Intelligence-Tool erstellt. Dies ist wichtig, um den Fortschritt zu überwachen und Regressionen zu verhindern.
A/B-Test
Das Team glaubte, dass A/B-Tests eine gute Möglichkeit sind, die geschäftlichen Auswirkungen der Leistungsoptimierungen zu messen. Daher optimierte das Team eine der Landingpages für Core Web Vitals und verglich die optimierte Version dann einen Monat lang per A/B-Test mit der Originalseite. Das Team wählte eine Landingpage mit einer hohen Anzahl an Zugriffen und Conversions aus, um mit dem Test aussagekräftige Ergebnisse zu erzielen. Während des Tests wurden 50% der Zugriffe zur optimierten Landingpage (Version A) und 50% an die Originalseite weitergeleitet (Version B). Der einzige Unterschied zwischen Version A und Version B bestand darin, dass Version A für Core Web Vitals optimiert war und keine anderen funktionalen oder optischen Unterschiede auftraten.
Die optimierte Version A wurde beim Lasttest auf Mobilgeräten 0,4 Sekunden früher geladen und zeigt keine nennenswerten Layoutverschiebung. Tatsächlich verbesserte sich der CLS von Version A um 92, 72% im Vergleich zu Version B. Weitere Web Vitals-Werte verbesserten sich ebenfalls: FID verbesserte sich um 7,95%, FCP verbesserte sich um 8,45% und TTFB verbesserte sich um 18,03%.
Beim Vergleich der optimierten Version A mit der nicht optimierten Version B stellte Rakuten 24 fest, dass Version A Folgendes bewirkt:
- 53,37% mehr Umsatz pro Besucher
- 33,13% höhere Conversion-Rate
- Steigerung des durchschnittlichen Bestellwerts um 15,20 %
- 9,99% höhere durchschnittliche Verweildauer
- Reduzierung der Ausstiegsrate um 35,12 %
Fazit
Die Optimierung der Webleistung ist eine Herausforderung, aber lohnenswert. Mit einem datengestützten Ansatz konnte Rakuten 24 die Nutzererfahrung verbessern und die positiven Auswirkungen auf das Unternehmen messen. Da dies nur ein Teil des Kaufprozesses und nicht das Ziel ist, wird die Website kontinuierlich verbessert, um Onlinekäufern ein besseres Einkaufserlebnis zu bieten.
Die Optimierung erfordert eine gemeinsame Anstrengung und Entwickler müssen auf diesem Weg nicht alleine sein. Rakuten 24 teilt ihre Probleme und Erfolge und hofft, dass noch mehr Entwickler Core Web Vitals-Daten nutzen können, um ein gegenseitiges Verständnis mit Stakeholdern zu entwickeln und gemeinsam eine hohe Nutzerfreundlichkeit zu erzielen und das Unternehmenswachstum zu fördern.